/* ==========================================================================
   Falcon Diesel — theme pack
   --------------------------------------------------------------------------
   Five complete looks. Each block redefines tokens only — never a component
   rule — so switching a theme repaints the whole site with no markup change.
   `data-theme` is set on <html> by theme.js.

   Themes differ on more than hue: type family, heading weight and case,
   corner radius, shadow depth and section rhythm all move together, so each
   one reads as a genuinely different design direction rather than a recolour.

     falcon    — the brand as it stands today: charcoal + gold, Jakarta Sans
     midnight  — dark, technical, cool gold on near-black
     steel     — light industrial: cool grey, steel blue, tight corners
     highvis   — site-signage brutalism: black, safety yellow, condensed caps
     heritage  — warm workshop: cream, oxblood, Fraunces serif headings
   ========================================================================== */

/* ── 1. FALCON (default) ───────────────────────────────────────────────── */
:root,
[data-theme='falcon'] {
  --accent: #f5cb5c;
  --accent-strong: #c9971b;
  --on-accent: #1a1614;
  --accent-soft: rgba(245, 203, 92, 0.15);
  --accent-line: rgba(245, 203, 92, 0.42);
  --accent-dk: #f5cb5c;     /* 10.4:1 on --surface-inverse */
  --on-accent-dk: #1a1614;
  --accent-text: #7d5a0e;   /* 6.3:1 on white — gold itself is 2.6:1 */

  --ink: #242021;
  --ink-2: #33302f;
  --ink-3: #45403f;

  --surface: #ffffff;
  --surface-2: #f6f5f3;
  --surface-3: #eceae6;
  --surface-inverse: #242021;
  --surface-inverse-2: #2f2b2c;

  --text: #242021;
  --text-muted: #5f5b5a;
  --text-faint: #6f6b69;   /* 5.3:1 on white; the old #8b8785 was 3.6:1 */
  --text-on-dark: #fffefc;
  --text-on-dark-muted: #b3aeac;

  --border: #e4e2de;
  --border-strong: #cdcac4;
  --border-on-dark: rgba(255, 255, 255, 0.12);

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --head-weight: 700;
  --head-tracking: -0.022em;
  --head-transform: none;
  --eyebrow-tracking: 0.14em;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-btn: 100px;
  --shadow-sm: 0 1px 3px rgba(20, 18, 18, 0.07);
  --shadow-md: 0 8px 28px rgba(20, 18, 18, 0.10);
  --shadow-lg: 0 20px 56px rgba(20, 18, 18, 0.15);
}

/* ── 2. MIDNIGHT ───────────────────────────────────────────────────────── */
[data-theme='midnight'] {
  --accent: #ffcf4d;
  --accent-strong: #ffdd7a;
  --on-accent: #17130c;
  --accent-soft: rgba(255, 207, 77, 0.13);
  --accent-line: rgba(255, 207, 77, 0.34);
  --accent-dk: #ffcf4d;     /* 13.4:1 on #0b0b0d */
  --on-accent-dk: #17130c;
  --accent-text: #ffdd7a;   /* 14.0:1 — the page surface is dark here */

  --ink: #f4f2ef;
  --ink-2: #d9d5d0;
  --ink-3: #b8b3ad;

  --surface: #131315;
  --surface-2: #1a1a1d;
  --surface-3: #23232a;
  --surface-inverse: #0b0b0d;
  --surface-inverse-2: #17171b;

  --text: #e8e5e1;
  --text-muted: #9a958f;
  --text-faint: #8b857f;   /* 5.1:1 on #131315; the old #6f6a66 was 3.5:1 */
  --text-on-dark: #f6f4f1;
  --text-on-dark-muted: #9a958f;

  --border: #2a2a30;
  --border-strong: #3a3a43;
  --border-on-dark: rgba(255, 255, 255, 0.09);

  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-head: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --head-weight: 700;
  --head-tracking: -0.025em;
  --head-transform: none;
  --eyebrow-tracking: 0.17em;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-btn: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
}
/* Midnight: the page itself is dark, so "inverse" bands must read *lighter*
   than the page or every band collapses into one flat black. */
[data-theme='midnight'] .band-inverse,
[data-theme='midnight'] .cta-band,
[data-theme='midnight'] .site-footer { background: #0b0b0d; }
[data-theme='midnight'] .site-header,
[data-theme='midnight'] .topbar { background: rgba(11, 11, 13, 0.92); backdrop-filter: blur(12px); }
[data-theme='midnight'] .band-inverse .card { background: #1a1a1e; }
[data-theme='midnight'] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.7) 45%, rgba(11, 11, 13, 0.97) 100%),
    linear-gradient(100deg, rgba(8, 8, 10, 0.8) 20%, transparent 88%);
}
[data-theme='midnight'] .logo-wall img { filter: grayscale(1) invert(1) brightness(1.8); opacity: 0.5; }
[data-theme='midnight'] .logo-wall li:hover img { opacity: 0.9; }
[data-theme='midnight'] .brand .logo-on-dark,
[data-theme='midnight'] .site-footer .footer-logo { filter: none; }

/* ── 3. STEEL ──────────────────────────────────────────────────────────── */
[data-theme='steel'] {
  --accent: #2f6f9e;
  --accent-strong: #24587f;
  --on-accent: #ffffff;
  --accent-soft: rgba(47, 111, 158, 0.10);
  --accent-line: rgba(47, 111, 158, 0.32);
  /* #2f6f9e is only 3.05:1 on #16202a, so dark bands get a lifted sky blue. */
  --accent-dk: #7fb6dd;     /* 7.6:1 on --surface-inverse */
  --on-accent-dk: #0d1a24;
  --accent-text: #24587f;   /* 7.6:1 on white */

  --ink: #16202a;
  --ink-2: #22303d;
  --ink-3: #2f4150;

  --surface: #ffffff;
  --surface-2: #f1f4f7;
  --surface-3: #e4e9ee;
  --surface-inverse: #16202a;
  --surface-inverse-2: #1f2c39;

  --text: #16202a;
  --text-muted: #566473;
  --text-faint: #5f6e80;   /* 5.2:1 on white, 4.7:1 on the band-2 grey */
  --text-on-dark: #f4f7fa;
  --text-on-dark-muted: #a3b2c0;

  --border: #dde3e9;
  --border-strong: #c2ccd6;
  --border-on-dark: rgba(255, 255, 255, 0.13);

  --font-body: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Archivo', -apple-system, sans-serif;
  --head-weight: 700;
  --head-tracking: -0.028em;
  --head-transform: none;
  --eyebrow-tracking: 0.12em;

  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-btn: 4px;
  --shadow-sm: 0 1px 2px rgba(22, 32, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(22, 32, 42, 0.10);
  --shadow-lg: 0 14px 40px rgba(22, 32, 42, 0.14);
}
/* Gold stars are a review-platform convention, not a brand accent — keep them
   warm even where the theme accent is not. */
[data-theme='steel'] .stars { color: #d99b23; }
[data-theme='heritage'] .stars { color: #c98b3c; }

[data-theme='steel'] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(16, 24, 32, 0.8) 0%, rgba(16, 24, 32, 0.6) 45%, rgba(22, 32, 42, 0.94) 100%),
    linear-gradient(100deg, rgba(16, 24, 32, 0.78) 20%, transparent 86%);
}

/* ── 4. HIGH-VIS ───────────────────────────────────────────────────────── */
[data-theme='highvis'] {
  --accent: #ffe500;
  --accent-strong: #d4bf00;
  --on-accent: #0a0a0a;
  --accent-soft: rgba(255, 229, 0, 0.14);
  --accent-line: rgba(255, 229, 0, 0.5);
  --accent-dk: #ffe500;     /* 15.5:1 on #0a0a0a */
  --on-accent-dk: #0a0a0a;
  --accent-text: #0a0a0a;   /* black accents on light is the High-Vis look;
                               dark bands get --accent-dk (safety yellow) */

  --ink: #0a0a0a;
  --ink-2: #171717;
  --ink-3: #262626;

  --surface: #fbfbf9;
  --surface-2: #efefec;
  --surface-3: #e2e2de;
  --surface-inverse: #0a0a0a;
  --surface-inverse-2: #171717;

  --text: #0a0a0a;
  --text-muted: #4d4d4d;
  --text-faint: #5d5d5d;   /* 6.4:1 on --surface; the old #757575 was 4.45:1 */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #a8a8a8;

  --border: #d9d9d4;
  --border-strong: #0a0a0a;
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --font-body: 'Archivo', -apple-system, sans-serif;
  --font-head: 'Barlow Condensed', 'Archivo Narrow', Impact, sans-serif;
  --head-weight: 800;
  --head-tracking: 0.005em;
  --head-transform: uppercase;
  --eyebrow-tracking: 0.2em;

  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-btn: 0px;
  --shadow-sm: 2px 2px 0 rgba(10, 10, 10, 0.9);
  --shadow-md: 5px 5px 0 rgba(10, 10, 10, 0.9);
  --shadow-lg: 9px 9px 0 rgba(10, 10, 10, 0.9);
}
/* Condensed caps run small at the shared scale — push the display sizes up. */
[data-theme='highvis'] h1 { font-size: clamp(2.7rem, 6.6vw, 4.6rem); line-height: 0.98; }
[data-theme='highvis'] h2 { font-size: clamp(2.05rem, 4.2vw, 3.05rem); line-height: 1.03; }
[data-theme='highvis'] h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
[data-theme='highvis'] h4 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.01em; }
[data-theme='highvis'] .btn { border-width: 2px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
[data-theme='highvis'] .btn-primary:hover { box-shadow: 4px 4px 0 var(--ink); }
[data-theme='highvis'] .card { border-width: 2px; border-color: var(--ink); }
[data-theme='highvis'] .card:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); border-color: var(--ink); }
[data-theme='highvis'] .band-inverse .card { border-color: var(--border-on-dark); }
[data-theme='highvis'] .band-inverse .card:hover { box-shadow: 5px 5px 0 var(--accent); border-color: var(--accent); }
[data-theme='highvis'] .icon-badge { border-width: 2px; border-color: var(--ink); background: var(--accent); color: var(--ink); }
[data-theme='highvis'] .band-inverse .icon-badge { border-color: var(--accent); color: var(--ink); }
[data-theme='highvis'] .frame,
[data-theme='highvis'] .form-card,
[data-theme='highvis'] .table-wrap { border-width: 2px; border-color: var(--ink); }
[data-theme='highvis'] .band-inverse .frame,
[data-theme='highvis'] .band-inverse .table-wrap { border-color: var(--border-on-dark); }
[data-theme='highvis'] .tag { border-width: 2px; border-color: var(--ink); background: var(--accent); color: var(--ink); }
[data-theme='highvis'] .band-inverse .tag { border-color: var(--accent); color: var(--ink); }
[data-theme='highvis'] .eyebrow::before { height: 4px; background: var(--accent); }
[data-theme='highvis'] .quote { border-width: 2px; border-left-width: 6px; border-color: var(--ink); border-left-color: var(--accent); }
[data-theme='highvis'] .accent-text { color: var(--ink); background: var(--accent); padding: 0 0.15em; }
[data-theme='highvis'] .band-inverse .accent-text { color: var(--ink); }
[data-theme='highvis'] .link-arrow { text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme='highvis'] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.95) 100%),
    linear-gradient(100deg, rgba(0, 0, 0, 0.8) 20%, transparent 88%);
}

/* ── 5. HERITAGE ───────────────────────────────────────────────────────── */
[data-theme='heritage'] {
  --accent: #9c3a2c;
  --accent-strong: #7d2b20;
  --on-accent: #fdf8f0;
  --accent-soft: rgba(156, 58, 44, 0.09);
  --accent-line: rgba(156, 58, 44, 0.28);
  /* Oxblood is 2.2:1 on the charcoal bands — unreadable and invisible as a
     filled shape. Dark surfaces get the warmer clay instead. */
  --accent-dk: #e2a06a;     /* 6.7:1 on --surface-inverse */
  --on-accent-dk: #3a2a1c;
  --accent-text: #7d2b20;   /* 8.9:1 on the cream surface */

  --ink: #2c2620;
  --ink-2: #3b332b;
  --ink-3: #4c423a;

  --surface: #fdf9f2;
  --surface-2: #f5eee1;
  --surface-3: #ece2d1;
  --surface-inverse: #2c2620;
  --surface-inverse-2: #3a322a;

  --text: #2c2620;
  --text-muted: #6b5f52;
  --text-faint: #786b5c;   /* 4.9:1 on --surface; the old #938575 was 3.4:1 */
  --text-on-dark: #fdf9f2;
  --text-on-dark-muted: #c0b3a3;

  --border: #e5dac7;
  --border-strong: #cfbfa6;
  --border-on-dark: rgba(253, 249, 242, 0.14);

  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --head-weight: 600;
  --head-tracking: -0.014em;
  --head-transform: none;
  --eyebrow-tracking: 0.16em;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-btn: 6px;
  --shadow-sm: 0 1px 3px rgba(44, 38, 32, 0.08);
  --shadow-md: 0 6px 24px rgba(44, 38, 32, 0.11);
  --shadow-lg: 0 18px 48px rgba(44, 38, 32, 0.16);
}
[data-theme='heritage'] h1, [data-theme='heritage'] h2 { font-variation-settings: 'SOFT' 0, 'WONK' 1; }
[data-theme='heritage'] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(36, 30, 24, 0.8) 0%, rgba(36, 30, 24, 0.62) 45%, rgba(44, 38, 32, 0.95) 100%),
    linear-gradient(100deg, rgba(36, 30, 24, 0.78) 20%, transparent 86%);
}

/* ── Logo colour handling per theme ─────────────────────────────────────
   The header sits on a dark surface in every theme except none — but the
   footer and light bands need the dark mark. Themes that put the logo on a
   light ground swap which file shows. */
[data-theme='highvis'] .brand img,
[data-theme='midnight'] .brand img { opacity: 0.96; }

/* ── Theme dock swatch colours ─────────────────────────────────────────── */
.theme-swatch[data-theme-id='falcon']   { --sw-bg: #242021; --sw-accent: #f5cb5c; }
.theme-swatch[data-theme-id='midnight'] { --sw-bg: #0b0b0d; --sw-accent: #ffcf4d; }
.theme-swatch[data-theme-id='steel']    { --sw-bg: #f1f4f7; --sw-accent: #2f6f9e; }
.theme-swatch[data-theme-id='highvis']  { --sw-bg: #0a0a0a; --sw-accent: #ffe500; }
.theme-swatch[data-theme-id='heritage'] { --sw-bg: #f5eee1; --sw-accent: #9c3a2c; }