/* =========================================================================
   Midway Supply — theme.css
   Canonical design tokens. Source of truth for the site.
   ============================================================================
   Aesthetic premise (from the Midway design brief + the family voice):
     "Plain, sturdy, useful — like the yard itself."
     Family-owned building supply since 1972. Contractor-first.
     Navy + red. Working honest, not corporate-polished.
   ============================================================================

   This file is the contract.
   ─────────────────────────────────────────────────────────────────────────
   Every page on the site reads tokens from this file. No component carries
   hardcoded color, spacing, or motion. If you find yourself writing a hex
   or a px value in component CSS, the right move is almost always to
   reach for an existing token, or add one here.

   Token strata (top → bottom of file):
     1. Primitives        brand swatches, raw scale steps (--red-500, etc)
     2. Semantic aliases  --surface, --text-body, --link  (what components use)
     3. Composition       --focus-ring, --rule-hairline, --card-bg, --density
                          (derived dials, what the user + you negotiate over)
     4. Mode overrides    [data-theme="dark"], [data-palette="muted"], etc

   The "I'm tired of the color scheme" workflow:
     a) Open /system.html and look at the current swatches + components.
     b) Edit a primitive (e.g. --red-500) or a composition dial (e.g. --density),
        save theme.css, refresh — every page reflects the new look on next load.
        No component CSS needs to change.

   Composition tokens (the layer 3 dials) are the high-leverage knobs:
   --density rescales every component's padding, --tracking-wide loosens
   every uppercase label, --focus-ring restyles every interactive surface.
   Prefer adding to layer 3 over touching components.

   Backward-compat note: this file replaces tokens.css. Every variable the
   pre-strata tokens.css exposed (--bg, --surface, --accent, --primary,
   --text, --muted, --line, --call, --font-heading, etc.) is preserved
   as a semantic alias in §2 so existing component CSS keeps working.
   ============================================================================
*/

/* =========================================================================
   WEBFONTS — self-hosted (Latin subset). Mirrored from Google Fonts on
   2026-05-28 to break the third-party dependency (Doctrine #11 Sovereign
   Vendor Boundary). 6 weight cuts of Inter + Inter Tight, ~273KB total.
   Adding a new weight: drop the .woff2 in /assets/fonts/, add an
   @font-face block here, reference it via --font-* in §2b.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* =====================================================================
     §1. PRIMITIVES — brand swatches + numeric scales.
     Components do NOT read these directly; they read the semantic aliases
     in §2 instead. Adjust here to shift the brand wholesale.
     ===================================================================== */

  /* -- Brand swatches (Midway navy + red, from the logo) -- */
  --brand-navy:        #24345C;   /* primary brand — headings, dark panels, footer. EXACT logo navy (logo.png/brand SVG sampled 2026-08-20; was #23345C, a transcription slip) */
  --brand-navy-deep:   #16223D;   /* derived for text/link contrast on light */
  --brand-red:         #B3202A;   /* primary CTA — call-to-action, alerts, hover bar */
  --brand-red-deep:    #8C1A22;   /* CTA hover/pressed */
  --brand-call-green:  #15803D;   /* phone-CTA green (only here, never an accent elsewhere). Was #16A34A (3.3:1 on white text, failed AA); #15803D = green-600, 4.9:1 — 2026-08-18 a11y audit */

  /* -- Red working scale (derived from --brand-red) -- */
  --red-50:  #FDEBEC;
  --red-100: #FBCFD2;
  --red-200: #F4A2A8;
  --red-300: #E97681;
  --red-400: #D24A55;
  --red-500: #B3202A;   /* brand-red */
  --red-600: #931C24;
  --red-700: #75171D;
  --red-800: #5C1218;
  --red-900: #420D12;

  /* -- Navy working scale (derived from --brand-navy) -- */
  --navy-50:  #EEF1F6;
  --navy-100: #D8DDE9;
  --navy-200: #B2BBD0;
  --navy-300: #8896B2;
  --navy-400: #5B6E92;
  --navy-500: #24345C;   /* brand-navy */
  --navy-600: #1D2B4D;
  --navy-700: #18233D;
  --navy-800: #131B30;
  --navy-900: #0D1422;

  /* -- Cool-gray neutrals (the page substrate; cool, not warm) -- */
  --neutral-50:  #F4F6F8;   /* page surface — Midway bg */
  --neutral-100: #EEF1F5;   /* raised/alt surface */
  --neutral-200: #D9DDE3;   /* hairline rules, dividers */
  --neutral-300: #B6BCC5;   /* strong border */
  --neutral-400: #8B93A1;
  --neutral-500: #5A6472;   /* muted body */
  --neutral-600: #434B58;
  --neutral-700: #2E343F;
  --neutral-800: #1C2230;   /* text body */
  --neutral-900: #0F131C;   /* deepest ink — rare */

  /* -- Green (call-CTA + success only — never an accent) -- */
  --green-50:  #ECFDF3;
  --green-300: #6EE7A4;
  --green-500: #16A34A;
  --green-600: #15803D;
  --green-700: #166534;
  --green-900: #052E16;

  /* =====================================================================
     §2. SEMANTIC ALIASES — what components reach for. Names describe
     ROLE, not color. Swap the primitive on the right to retheme.
     ===================================================================== */

  /* -- Surfaces -- */
  --bg:             var(--neutral-50);
  --surface:        #FFFFFF;
  --surface-alt:    var(--neutral-100);
  --surfaceAlt:     var(--surface-alt);                 /* legacy alias */

  /* -- Text -- */
  --text:           var(--neutral-800);                 /* legacy alias preserved */
  --text-body:      var(--neutral-800);
  --text-heading:   var(--neutral-900);
  --text-muted:     var(--neutral-500);
  --text-inverse:   #FFFFFF;                            /* text on dark/brand bands */
  --muted:          var(--text-muted);                  /* legacy alias */
  --text-on-primary: #FFFFFF;
  --text-on-dark:   var(--neutral-100);

  /* -- Borders / rules -- */
  --line:           var(--neutral-200);                 /* legacy alias */
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);

  /* -- Link -- */
  --link:           var(--brand-navy-deep);
  --link-hover:     var(--brand-red);

  /* -- Primary / accent aliases (preserve every name from the old tokens.css) -- */
  --primary:        var(--brand-red);                   /* legacy alias preserved */
  --primary-dark:   var(--brand-red-deep);
  --primary-darker: var(--red-800);
  --primary-light:  var(--red-400);
  --primary-lighter:var(--red-100);
  --primary-alpha-10: rgba(179, 32, 42, 0.10);
  --primary-alpha-30: rgba(179, 32, 42, 0.30);

  --secondary:      var(--brand-navy);                  /* legacy alias preserved */
  --secondary-dark: var(--brand-navy-deep);

  --accent:         var(--brand-red);                   /* legacy alias — accent === primary on Midway */
  --accent2:        var(--brand-navy);                  /* legacy alias preserved */

  /* -- Call CTA (phone-call green button) -- */
  --call:           var(--brand-call-green);            /* legacy alias preserved */
  --call-hover:     var(--green-600);

  /* -- Status -- */
  --success:        var(--green-600);
  --success-light:  var(--green-50);
  --warning:        #B58515;
  --warning-light:  #FAF1DC;
  --danger:         #9A3324;                            /* distinct from brand-red so alerts ≠ branding */
  --danger-light:   #F6E3DE;
  --info:           var(--navy-500);
  --info-light:     var(--navy-50);

/* =====================================================================
     §2b. TYPOGRAPHY
     Midway is a sans-serif system: Inter Tight for display, Inter for body.
     Mono only for data / code panels (system-monospace stack is fine).
     ===================================================================== */
  --font-heading: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-heading);                  /* alias */
  --font-reading: var(--font-body);                     /* alias */
  --font-mono:    ui-monospace, "SF Mono", "Menlo", Consolas, "Liberation Mono", monospace;

  /* Type scale — modular, ~1.22 ratio. Display steps fluid for hero work. */
  --size-display-xl: clamp(3rem, 6vw, 5.5rem);          /* hero set-pieces */
  --size-display-lg: clamp(2.25rem, 4.5vw, 3.75rem);    /* page H1 */
  --size-h1:    clamp(1.875rem, 3vw, 2.5rem);
  --size-h2:    clamp(1.375rem, 2vw, 1.75rem);
  --size-h3:    clamp(1.125rem, 1.5vw, 1.25rem);
  --size-h4:    1rem;
  --size-lead:  clamp(1.125rem, 1.4vw, 1.25rem);
  --size-body:  1rem;
  --size-small: 0.9375rem;
  --size-tiny:  0.8125rem;
  --size-button: 1rem;
  --size-eyebrow: 0.75rem;

  --weight-display: 800;     /* Inter Tight is bold-confident at large sizes */
  --weight-h1: 700;
  --weight-h2: 700;
  --weight-h3: 600;
  --weight-h4: 600;
  --weight-body: 400;
  --weight-bold: 600;
  --weight-button: 600;

  --lh-display: 1.05;
  --lh-h1: 1.15;
  --lh-h2: 1.25;
  --lh-h3: 1.35;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  /* Reading measure (used on long-form: about, blog, services detail) */
  --measure: 64ch;

  /* =====================================================================
     §2c. SHAPE — small radii (Midway is square-on, not rounded-and-cute),
     restrained shadows (paper, not glass).
     ===================================================================== */
  --radius-xs:   0.125rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-base: 0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 999px;

  --border-thin:  1px;
  --border-base:  1px;
  --border-heavy: 2px;

  --shadow-sm:    0 1px 2px rgba(15, 19, 28, 0.05);
  --shadow-base:  0 2px 6px rgba(15, 19, 28, 0.06), 0 1px 2px rgba(15,19,28,0.04);
  --shadow-md:    0 4px 12px rgba(15, 19, 28, 0.08), 0 2px 4px rgba(15,19,28,0.05);
  --shadow-lg:    0 12px 32px rgba(15, 19, 28, 0.12), 0 4px 10px rgba(15,19,28,0.06);
  --shadow-xl:    0 24px 60px rgba(15, 19, 28, 0.16);
  --shadow-inner: inset 0 1px 2px rgba(15, 19, 28, 0.05);

  /* =====================================================================
     §2d. SPACE — space-1..3 stay raw (tight gaps shouldn't shift with
     density). space-4..7 multiply by --density (the whole-site dial in §3).
     space-8..10 stay raw (structural macro-spacing).
     ===================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: calc(1rem    * var(--density, 1));
  --space-5: calc(1.5rem  * var(--density, 1));
  --space-6: calc(2rem    * var(--density, 1));
  --space-7: calc(3rem    * var(--density, 1));
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Intermediate steps — added 2026-07-13 (design-as-data adoption). Curated to
     what site.css actually uses; additive only, never renumber (site-kit §2.8). */
  --space-hairline: 0.1rem;
  --space-xs:   0.2rem;
  --space-1-2:  0.4rem;
  --space-3-4:  0.85rem;
  --space-2xs:  0.125rem;
  --space-2-3:  0.625rem;
  --space-4-5:  calc(1.25rem * var(--density, 1));
  --space-5-6:  calc(1.75rem * var(--density, 1));
  --space-6-7:  calc(2.5rem  * var(--density, 1));
  --space-7-8:  calc(3.5rem  * var(--density, 1));
  --space-8-9:  5rem;
  --space-9-10: 7rem;

  --spacing-section: calc(clamp(3.5rem, 7vw, 6rem) * var(--density, 1));
  --spacing-block:   calc(clamp(1.75rem, 3.5vw, 3rem) * var(--density, 1));
  --spacing-inline:  clamp(1.25rem, 2.5vw, 1.75rem);

  --content-width: 72rem;
  --site-width:    84rem;
  --reading-width: 36rem;

  /* =====================================================================
     §2e. MOTION — purposeful, never gratuitous.
     ===================================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-quick: 200ms;           /* the site's dominant hover/transition beat */

  /* =====================================================================
     §3. COMPOSITION TOKENS — the design dials components reach for.
     Each composes lower-level primitives. Tune these to change a feeling
     site-wide without touching component CSS.
     ===================================================================== */

  /* Brand RGB triplets — for rgba() composition (focus rings, soft tints) */
  --brand-red-rgb:   179, 32, 42;
  --white-rgb:       255, 255, 255;
  --black-rgb:       0, 0, 0;
  --neutral-800-rgb: 28, 34, 48;
  --brand-navy-rgb:  36, 52, 92;
  --ink-rgb:         15, 19, 28;

  /* Tracking (letter-spacing) — pulled out so every named role is tunable */
  --tracking-tight: -0.02em;    /* big display */
  --tracking-snug:  -0.015em;   /* h1 */
  --tracking-base:  -0.01em;    /* h2 / display sub */
  --tracking-flat:   0;          /* body */
  --tracking-loose:  0.04em;
  --tracking-wide:   0.12em;    /* eyebrow / uppercase labels */
  --tracking-mono:   0.04em;
  --tracking-mid:    0.08em;    /* badge caps — between loose and eyebrow */
  --tracking-wider:  0.14em;    /* tracked uppercase labels (heavier than eyebrow) */
  --tracking-widest: 0.18em;    /* rare max-tracked chips */

  /* Focus ring — every interactive surface reaches for this single dial */
  --focus-ring:    0 0 0 3px rgba(var(--brand-red-rgb), 0.22);
  --focus-outline: 2px solid var(--brand-red);
  --focus-offset:  2px;

  /* Rule (border) primitives — the role becomes the token */
  --rule-hairline: 1px solid var(--border);
  --rule-strong:   1px solid var(--border-strong);
  --rule-dashed:   1px dashed var(--border);

  /* Card / surface primitives */
  --card-bg:        var(--surface);
  --card-bg-raised: #FFFFFF;
  --card-border:    var(--rule-hairline);

  /* Panel primitives — the light content panels (home Why/Knowledge/Start Here inset,
     the .band-light closers). ONE dial: every panel reads these. 2026-08-18. */
  --panel-bg:       var(--bg);
  --panel-fg:       var(--text-body);
  --panel-border:   var(--rule-hairline);
  --card-pad:       var(--space-5);
  --card-pad-tight: var(--space-4);

  /* Density multiplier — one number, whole-site breathing room.
     1 = default · 0.85 = compact · 1.2 = airy. Components multiply:
     padding: calc(var(--card-pad) * var(--density)); */
  --density: 1;

  /* Hover primitives */
  --hover-tint:   var(--surface-alt);
  --hover-accent: var(--brand-red-deep);
  --hover-shift:  1px;

  /* Code panel theme — one place for the dark-on-navy code aesthetic */
  --code-bg:      var(--neutral-900);
  --code-fg:      var(--neutral-100);
  --code-comment: var(--neutral-500);
  --code-accent:  var(--navy-300);
  --code-string:  var(--green-300);

  /* Status — dark variants (hover, pressed, focused) */
  --danger-dark:  #7E2A1E;
  --warning-dark: #8E6810;
  --success-dark: var(--green-700);

  /* Ring helper — preserved alias from legacy tokens.css */
  --ring-color: var(--border);

  /* Iconography */
  --icon-stroke: 1.8;
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 24px;
}

/* =========================================================================
   §4. MODE OVERRIDES
   ========================================================================= */

/* -- Dark theme — yard-friendly dim, same chroma -- */
[data-theme="dark"] {
  --bg:             #0F131C;
  --surface:        #1C2230;
  --surface-alt:    #262D3D;
  --surfaceAlt:     var(--surface-alt);
  --text:           #E5E8EE;
  --text-body:      #E5E8EE;
  --text-heading:   #F5F7FA;
  --text-muted:     #9BA3B2;
  --muted:          var(--text-muted);
  --text-on-primary: #FFFFFF;
  --line:           #2E3545;
  --border:         #2E3545;
  --border-strong:  #424A5E;

  --link:           var(--navy-300);
  --link-hover:     var(--red-400);

  --primary:        var(--red-400);
  --primary-dark:   var(--brand-red);
  --secondary:      var(--navy-300);
  --accent:         var(--red-400);
  --accent2:        var(--navy-300);
  --call:           var(--green-500);
  --call-hover:     #22C55E;

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-base:  0 2px 6px rgba(0,0,0,0.4);
  --shadow-md:    0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.55);

  --focus-ring:   0 0 0 3px rgba(var(--brand-red-rgb), 0.32);
  --hover-tint:   var(--surface-alt);
  --hover-accent: var(--red-400);

  --card-bg:        var(--surface);
  --card-bg-raised: var(--surface-alt);
  --panel-bg:       var(--surface);
  --code-bg:        #0A0D14;
  --code-fg:        var(--text-body);
}

/* -- Palette variant: "muted" — softer neutrals for long-form reading -- */
[data-palette="muted"] {
  --neutral-50:  #F6F7F8;
  --neutral-100: #EEF0F2;
  --neutral-200: #DCDFE3;
  --neutral-300: #BDC2C9;
  --neutral-400: #8E96A1;
  --neutral-500: #5F6772;
  --neutral-600: #444B55;
  --neutral-700: #2E343C;
  --neutral-800: #1C2128;
  --neutral-900: #0E1116;
}

/* -- Glass intensity variants (used by the chrome / sticky bars only) -- */
[data-glass="whisper"]  { --glass-bg: rgba(244,246,248,0.88); --glass-blur:  6px; }
[data-glass="subtle"]   { --glass-bg: rgba(244,246,248,0.74); --glass-blur: 12px; }
[data-glass="tactile"]  { --glass-bg: rgba(244,246,248,0.62); --glass-blur: 20px; }
[data-theme="dark"][data-glass="whisper"]  { --glass-bg: rgba(15,19,28,0.84); }
[data-theme="dark"][data-glass="subtle"]   { --glass-bg: rgba(15,19,28,0.70); }
[data-theme="dark"][data-glass="tactile"]  { --glass-bg: rgba(15,19,28,0.56); }

/* =========================================================================
   §5. BASE ELEMENT STYLES — link tokens to elements.
   Kept minimal; site.css owns the component layer.
   ========================================================================= */
html { font-family: var(--font-body); color: var(--text-body); background: var(--bg); }
body { font-family: var(--font-body); color: var(--text-body); background: var(--bg); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  letter-spacing: var(--tracking-snug);
}
a { color: inherit; }
a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}