/* === Canyon Wall Theme === */
/*
  A variable-only theme drawn from Grand Canyon strata:
  rust-red stone, ponderosa green, pale granite, trail dust, and shadow gray.

  Load this AFTER the base Xanthan CSS files in _includes/html/html-head.html.

  Teaching purpose:
  - Shows how to build a coherent palette from a visual reference
  - Keeps the framework CSS intact
  - Maps named colors to semantic roles from base.css
  - Uses red as an accent, not as the whole identity
*/

/*****************************************************
CSS VARIABLE OVERRIDES
*****************************************************/
:root {
  /* ===== Canyon Wall Color Palette ===== */
  --canyon-red: #9f4a35;          /* Weathered red wall */
  --canyon-red-dark: #733326;     /* Deep stratum red */
  --canyon-red-light: #aa543d;    /* Sunlit red rock for hover states */
  --ponderosa-green: #2f4938;     /* Dark rim vegetation */
  --rim-green-light: #8fa08a;     /* Pale green lichen and rim light */
  --shadow-gray: #293038;         /* Canyon shadow and ink */
  --granite-white: #f3efe5;       /* Pale stone / page surface */
  --limestone: #ded0b5;           /* Light cliff face */
  --trail-tan: #c7a77a;           /* Dust and dry grass, reserved for warnings */

  /* ===== Override Base Theme Variables ===== */
  /* Backgrounds */
  --bg-page: var(--granite-white);
  --bg-card: color-mix(in srgb, var(--granite-white) 96%, var(--limestone));
  --bg-accent: color-mix(in srgb, var(--ponderosa-green) 7%, var(--bg-page));
  --bg-code: color-mix(in srgb, var(--limestone) 70%, var(--bg-page));
  --bg-nav: var(--shadow-gray);
  --bg-footer: var(--shadow-gray);
  --bg-footer-bottom: var(--shadow-gray);

  /* Homepage sections */
  --bg-section-alt: color-mix(in srgb, var(--rim-green-light) 28%, var(--granite-white));
  --bg-section-warm: var(--shadow-gray);
  --text-section-warm: var(--granite-white);
  --text-section-warm-heading: var(--granite-white);
  --text-section-warm-link: var(--rim-green-light);
  --text-section-warm-link-hover: var(--granite-white);
  --border-section-warm: var(--canyon-red);
  --border-section-accent: var(--canyon-red);
  --hero-tagline-color: color-mix(in srgb, var(--shadow-gray) 76%, var(--bg-page));

  --bg-feature-card: var(--shadow-gray);
  --text-feature-card: var(--granite-white);
  --text-feature-card-muted: color-mix(in srgb, var(--granite-white) 76%, transparent);
  --border-feature-card: color-mix(in srgb, var(--canyon-red) 70%, var(--shadow-gray));
  --border-feature-card-hover: var(--rim-green-light);
  --bg-feature-band: var(--shadow-gray);
  --text-feature-band: var(--granite-white);
  --text-feature-band-muted: color-mix(in srgb, var(--granite-white) 76%, transparent);
  --text-feature-band-link: var(--rim-green-light);
  --text-feature-band-link-hover: var(--granite-white);
  --bg-editorial-note: color-mix(in srgb, var(--rim-green-light) 18%, var(--granite-white));
  --border-editorial-note: var(--canyon-red);
  --text-lede: color-mix(in srgb, var(--shadow-gray) 86%, var(--canyon-red));
  --text-kicker: var(--canyon-red-dark);
  --metadata-border: color-mix(in srgb, var(--canyon-red) 32%, transparent);

  /* Text */
  --text-body: var(--shadow-gray);
  --text-on-dark: var(--granite-white);
  --text-muted: color-mix(in srgb, var(--shadow-gray) 68%, var(--bg-page));
  --text-footer-link: var(--granite-white);
  --text-footer-bottom: color-mix(in srgb, var(--granite-white) 72%, transparent);

  /* Accents & Interactive */
  --accent-primary: var(--canyon-red);
  --accent-border: var(--canyon-red);
  --interactive-hover: var(--rim-green-light);
  --interactive-hover-bg: var(--canyon-red-light);
  --interactive-subtle: color-mix(in srgb, var(--ponderosa-green) 14%, transparent);
  --interactive-subtle-hover: color-mix(in srgb, var(--rim-green-light) 22%, transparent);
  --accent-primary-dark: var(--canyon-red-dark);

  /* Heading hierarchy */
  --text-h1: var(--shadow-gray);
  --text-h2: var(--shadow-gray);
  --text-h3: var(--shadow-gray);
  --text-h4: var(--shadow-gray);
  --text-h5: var(--shadow-gray);

  /* Status colors tuned to the palette */
  --success: var(--ponderosa-green);
  --warning: var(--trail-tan);
  --warning-bg: color-mix(in srgb, var(--trail-tan) 24%, var(--bg-page));
  --error: var(--canyon-red-dark);
  --info: color-mix(in srgb, var(--ponderosa-green) 70%, var(--granite-white));

  /* Page headers */
  --bg-page-header: var(--shadow-gray);
  --page-header-subtitle: color-mix(in srgb, var(--granite-white) 74%, transparent);
  --page-header-caption: color-mix(in srgb, var(--granite-white) 78%, transparent);
  --page-header-caption-hover: var(--granite-white);
}