/* ==========================================================================
   RSA School of Motoring Leinster: brand pack design tokens
   Extracted from RSASOM_brand_pack/rsa-pack/css/rsa.css (71 KB, generated
   x/h classes) and brand-pack.html. Values are the ones the pack actually
   ships. Where the pack value fails WCAG 2.2 AA, the shipped value is kept as
   a primitive and a corrected SEMANTIC token sits beside it (marked FIX).
   See contrast-audit.md for ratios.
   Phase 0 artefact. Not yet wired into the 11ty build.
   ========================================================================== */

:root {
  /* ---------- 1. Colour primitives (pack names) ---------- */
  --rsa-road-black:   #0B0B0C; /* page background (.x1) */
  --rsa-night:        #000000; /* header, hero base, footer, dark sections */
  --rsa-surface:      #161618; /* panels, cards, form fields, body fallback */
  --rsa-raised:       #1C1C1F; /* review cards */
  --rsa-tile:         #131315; /* brand page tiles only */
  --rsa-track:        #26262A; /* EDT tracker empty cell */
  --rsa-navy-black:   #0A141C; /* 12 EDT roundel, roundel ring gap */

  --rsa-white:        #FFFFFF;
  --rsa-chalk:        #F4F4F2; /* headings and primary text */
  --rsa-fog:          #D6D6D8; /* hero lede, body on black (heavier than Mist) */
  --rsa-mist:         #C4C4C7; /* body copy on black */
  --rsa-haze:         #B5B5B8; /* small labels ("Call us now") */
  --rsa-smoke:        #A6A6AB; /* card body, secondary copy */
  --rsa-ash:          #8A8A8F; /* footer legal, tracker numerals */
  --rsa-slate:        #5C5C62; /* brand page arrows (decorative) */
  --rsa-graphite:     #3A3A3F; /* dashed road line (Town B) */
  --rsa-wordmark:     rgba(255,255,255,.14); /* giant "made" footer wordmark (decorative) */

  --rsa-red:          #DA2A23; /* primary buttons, header rule, service band, RSA tag */
  --rsa-red-hover:    #F03A32; /* hover only (pack). Fails with white text, see FIX */
  --rsa-plate-red:    #E32119; /* L-plate glyph */
  --rsa-go-green:     #8EDB4F; /* headline accents, badges, logo strip, selected, focus */
  --rsa-go-green-hover: #A6EA6E;
  --rsa-amber:        #FFAE3B; /* eyebrows and stars */
  --rsa-sign-green:   #00703C; /* road sign module ONLY (as a fill) */
  --rsa-sign-ink:     #D5EADD; /* sign sub-labels */
  --rsa-sign-yellow:  #FFD100; /* sign hover only */
  --rsa-avatar-blue:  #2E7DBF; /* review avatar initial disc */
  --rsa-avatar-brown: #6B4433; /* review avatar initial disc */

  /* Hairlines (white alpha on dark) */
  --rsa-line-08: rgba(255,255,255,.08); /* default divider / card border */
  --rsa-line-10: rgba(255,255,255,.10);
  --rsa-line-12: rgba(255,255,255,.12); /* section top borders */
  --rsa-line-16: rgba(255,255,255,.16);
  --rsa-line-22: rgba(255,255,255,.22); /* underline track on split headings */
  --rsa-line-25: rgba(255,255,255,.25); /* divider inside red bands */

  /* ---------- 2. Semantic colour (use these in components) ---------- */
  --color-bg:            var(--rsa-road-black);
  --color-bg-deep:       var(--rsa-night);
  --color-panel:         var(--rsa-surface);
  --color-panel-raised:  var(--rsa-raised);
  --color-text:          var(--rsa-chalk);
  --color-text-strong:   var(--rsa-white);
  --color-text-body:     var(--rsa-mist);
  --color-text-lede:     var(--rsa-fog);
  --color-text-muted:    var(--rsa-smoke);
  --color-text-faint:    var(--rsa-ash);   /* min AA on Surface/Raised/Black; NOT on Track */
  --color-accent:        var(--rsa-go-green);
  --color-eyebrow:       var(--rsa-amber);
  --color-star:          var(--rsa-amber);
  --color-action:        var(--rsa-red);
  --color-on-action:     var(--rsa-white);
  --color-on-accent:     var(--rsa-road-black); /* text on Go Green: ALWAYS dark */

  /* FIX tokens (contrast-audit.md) */
  --color-action-hover:  #C0261F;  /* FIX F2: darken on hover (white 5.94:1); pack #F03A32 = 3.92:1 */
  --color-text-red:      #FF5A52;  /* FIX F7: red AS TEXT on dark (5.88:1 on Surface); #DA2A23 = 3.73:1 */
  --color-on-red-muted:  var(--rsa-white); /* FIX F4: body copy on red bands is white, never Fog/Mist/Haze */
  --color-on-red-accent: var(--rsa-night); /* FIX F3: accent words on red: green text on a black chip */
  --color-field-border:  #7A7A80;  /* FIX F5: field boundary 4.92:1 on Night, 4.24:1 on Surface */
  --color-placeholder:   var(--rsa-ash); /* FIX F6: 5.26:1 on Surface; browser default #757575 = 3.92:1 */
  --color-track-text:    #9A9AA0;  /* FIX F12: tracker numerals on Track 5.39:1 */
  --color-avatar-blue:   #2A72AF;  /* FIX F11: white initial 5.09:1 */
  --color-sign-text:     var(--rsa-sign-ink); /* FIX F10: never Sign Green as text on dark */
  --focus-ring: 0 0 0 3px var(--rsa-go-green), 0 0 0 5px var(--rsa-night); /* FIX F9: two-tone, visible on green/red/black */

  /* ---------- 3. Typography ---------- */
  --font-display: Poppins, sans-serif;          /* headings, labels, buttons, numbers */
  --font-body:    'DM Sans', sans-serif;        /* body, inputs, reviews, eyebrows */
  --font-mono:    'JetBrains Mono', monospace;  /* brand page swatch codes only */
  /* Google Fonts request used by the pack:
     Poppins 500;600;700;800 + DM Sans opsz 9..40 wght 400;500;700 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700; /* small labels, numbers, eyebrows */
  --fw-black:   800; /* all display headings, buttons */
  --fw-plate:   900; /* L / N plate glyph (DM Sans 900, synthesised) */

  /* Display scale (Poppins 800 uppercase) */
  --fs-mega:     clamp(110px, 12vw, 160px); /* Town C big EDT numerals */
  --fs-wordmark: min(10.5vw, 136px);        /* footer "made equal." */
  --fs-hero-c:   clamp(52px, 7vw, 100px);   /* Town C slanted hero H1 */
  --fs-hero-b:   clamp(48px, min(7.6vw, 8.5vw - 20px), 104px);
  --fs-hero-a:   clamp(50px, 6.4vw, 92px);
  --fs-h1:       clamp(34px, 4.6vw, 64px);  /* homepage H1, brand spec 64 */
  --fs-stat:     clamp(48px, 5vw, 68px);    /* rolling stats, brand spec 68 */
  --fs-h2:       clamp(32px, 3.6vw, 50px);  /* brand spec 46 */
  --fs-h2-sm:    clamp(28px, 3.2vw, 44px);
  --fs-num-xl:   96px;  /* EDT "12" panels */
  --fs-num-lg:   84px;
  --fs-num-md:   64px;  /* outlined step numerals */
  --fs-num-sm:   56px;
  --fs-num-xs:   40px;
  --fs-h3:       22px;  /* card titles */
  --fs-h4:       18px;
  /* Text scale (DM Sans) */
  --fs-lede:     19px;
  --fs-body-lg:  17px;  /* brand spec body 17 */
  --fs-body:     16.5px;
  --fs-body-sm:  15px;
  --fs-small:    14px;
  --fs-label:    13px;  /* buttons, brand spec 13 */
  --fs-caption:  12.5px;
  --fs-eyebrow:  12px;  /* brand spec 12 */
  --fs-micro:    11px;
  --fs-nano:     10.5px; /* review badges "GOOGLE ★★★★★" */

  --lh-display:  1.02; /* H1 */
  --lh-tight:    .9;   /* stacked numerals */
  --lh-snug:     1.1;
  --lh-heading:  1.2;
  --lh-body:     1.6;
  --lh-relaxed:  1.7;  /* most common body leading */
  --lh-lede:     1.55;

  --ls-display:  -.03em; /* headings (most common) */
  --ls-tight:    -.04em; /* numerals */
  --ls-tighter:  -.05em; /* big numerals, wordmark */
  --ls-button:   -.01em; /* buttons and badges in CSS (brand page says .08em, CSS wins) */
  --ls-nav:      .06em;
  --ls-label:    .08em;
  --ls-eyebrow:  .2em;   /* green uppercase eyebrows */
  --ls-eyebrow-sm: .16em;
  --ls-stars:    2px;

  /* ---------- 4. Radii ---------- */
  --radius-xs:   2px;  /* default for buttons, badges, fields, cards (95 uses) */
  --radius-sm:   3px;  /* brand page spec for buttons */
  --radius-md:   4px;  /* tiles, panels */
  --radius-lg:   6px;  /* plate glyph boxes */
  --radius-sign: 8px;  /* county sign outer (12px / 14px for large signs) */
  --radius-sign-lg: 12px;
  --radius-sign-xl: 14px;
  --radius-round: 50%; /* avatars, roundels, FAQ icon */

  /* ---------- 5. Spacing ---------- */
  --container:   1280px;
  --gutter:      40px;   /* pack desktop side padding */
  --gutter-mobile: 20px; /* NEW: pack has no mobile value (no media queries) */
  --space-1: 2px;  --space-2: 4px;  --space-3: 6px;  --space-4: 8px;
  --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px;
  --space-9: 18px; --space-10: 20px; --space-11: 22px; --space-12: 24px;
  --space-14: 28px; --space-16: 32px; --space-20: 40px; --space-24: 48px;
  --space-28: 56px; --space-section: 96px; /* hero top padding / section rhythm */
  --pad-btn:     15px 20px;       /* header + standard red button */
  --pad-btn-lg:  20px 26px 18px;  /* hero primary button */
  --pad-badge:   7px 10px 6px;
  --pad-card:    26px;
  --pad-panel:   30px;
  --hero-min-h:  640px;
  --hero-form-band: 104px; /* hero photo stops 104px above bottom, form bar sits there */
  --scroll-offset: 110px;  /* [id] scroll-margin-top */

  /* ---------- 6. Borders and rules ---------- */
  --rule-header: 3px solid var(--rsa-red);   /* header bottom */
  --rule-green:  2px solid var(--rsa-go-green);
  --rule-green-top: 5px solid var(--rsa-go-green);
  --heading-underline:
    linear-gradient(var(--rsa-go-green), var(--rsa-go-green)) 0 100% / 54px 2px no-repeat,
    linear-gradient(var(--rsa-line-22), var(--rsa-line-22)) 0 100% / 100% 2px no-repeat;
  --road-dash-h: repeating-linear-gradient(90deg, var(--rsa-go-green) 0 16px, transparent 16px 26px);
  --road-dash-v: repeating-linear-gradient(180deg, var(--rsa-graphite) 0 18px, transparent 18px 30px);
  --stroke-numeral: 2px var(--rsa-red); /* -webkit-text-stroke on outlined step numbers */

  /* ---------- 7. Shapes ---------- */
  --clip-rsa-tag:   polygon(0 0, 100% 0, 94% 100%, 0 100%); /* name rule tag, slanted right edge */
  --clip-slant-c:   polygon(19% 0, 100% 0, 100% 100%, 3% 100%); /* Town C slanted hero photo */
  --clip-slant-a:   polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  --tilt-sign-l:    rotate(-2deg);
  --tilt-sign-r:    rotate(1.2deg);
  --tilt-card:      rotate(6deg);

  /* ---------- 8. Shadows ---------- */
  --shadow-header:  0 2px 18px rgba(0,0,0,.5);
  --shadow-card:    0 10px 24px rgba(0,0,0,.25);
  --shadow-card-hover: 0 24px 50px rgba(0,0,0,.5);
  --shadow-lift:    0 20px 44px rgba(0,0,0,.2);
  --shadow-float:   0 30px 56px rgba(0,0,0,.32);
  --shadow-panel:   0 4px 44px rgba(0,0,0,.5);
  --shadow-sign:    0 10px 22px rgba(0,0,0,.22);
  --shadow-red-glow: 0 14px 30px rgba(218,42,35,.35);
  --ring-green:     0 0 0 3px var(--rsa-go-green);
  --ring-white:     0 0 0 3px var(--rsa-white);
  --ring-roundel:   0 0 0 3px var(--rsa-go-green), 0 0 0 5px var(--rsa-navy-black);
  --ring-gap:       0 0 0 6px var(--rsa-road-black);
  --inset-red:      inset 0 0 0 3px var(--rsa-red);

  /* ---------- 9. Gradients and photo treatment ---------- */
  --photo-lift:          brightness(1.45) contrast(1.05); /* hero photos */
  --photo-lift-soft:     brightness(1.45);
  --photo-lift-strong:   brightness(1.5);
  --photo-pass:          none; /* student pass photos stay unfiltered */
  --overlay-hero:   linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.34) 56%, rgba(0,0,0,.2) 76%, rgba(0,0,0,.16) 100%);
  --overlay-hero-a: linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.74) 36%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.14) 100%);
  --overlay-hero-floor: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); /* 90px band above the form bar */
  --overlay-ticket: linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,0) 78%); /* Town C service tickets */
  --overlay-panel:  linear-gradient(90deg, rgba(11,11,12,.95), rgba(11,11,12,.35) 62%, rgba(11,11,12,.2));
  --overlay-edge:   linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
  /* FIX F8: stronger ticket overlay for text over card photos */
  --overlay-ticket-fix: linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.9) 55%, rgba(0,0,0,.35) 85%, rgba(0,0,0,0) 100%);

  /* ---------- 10. Motion ---------- */
  --ease-reveal: cubic-bezier(.2,.7,.2,1);
  --ease-roll:   cubic-bezier(.6,0,.15,1);  /* rolling stat numbers */
  --dur-fast:  .2s;  /* button background */
  --dur-base:  .3s;  /* card lift */
  --dur-hero:  .9s;
  --dur-roll:  1.6s;
  --lift-sm: translateY(-2px); --lift-md: translateY(-4px); --lift-lg: translateY(-6px); --lift-xl: translateY(-8px);
  --nudge-x: translateX(6px);

  /* ---------- 11. Layering ---------- */
  --z-base:   1;
  --z-sticky-cta: 40; /* NEW: mobile sticky CTA (not in pack) */
  --z-hero-ui: 30;    /* pack: hero form bar */
  --z-header: 50;     /* pack: sticky header */
  --z-overlay: 60;    /* NEW: mobile menu, chat sheet */

  /* ---------- 12. Breakpoints (reference values; CSS vars cannot drive @media) ---------- */
  /* The pack has NO media queries. It relies on clamp(), auto-fit grids
     (minmax(min(100%,160..440px),1fr)) and one JS threshold (hero framing
     switches at 1100px). Proposed Phase 1 breakpoints, aligned with the
     existing site and the pack's auto-fit minimums: */
  --bp-sm: 480px;   /* single column below */
  --bp-md: 768px;   /* tablet: nav collapses to menu, hero form stacks */
  --bp-lg: 1100px;  /* pack JS framing threshold */
  --bp-xl: 1280px;  /* container max */
}

/* Focus (pack: 3px solid Go Green, offset 2px). FIX F9 adds a dark outer ring
   so the indicator survives green and red surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rsa-go-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--rsa-night);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}