/* ===========================================================================
   AnglerPermit Canada — Design Language (Part 3)
   Single source of truth. Every size, space, colour, radius, shadow and
   duration used anywhere on the site resolves to a token in this file.
   Magic numbers in component CSS are a review defect.

   DIR-DSN decisions recorded here so they are not re-litigated:

   DSN-01  ONE type family: Barlow, weights 400/500/600/700.
           Barlow is already the logo's face and is already self-hosted,
           latin-subsetted and preloaded, so the page and the mark agree and
           a second family would cost a network round trip for nothing. Its
           low-contrast, slightly condensed grotesque reads institutional
           rather than decorative — and the brief names a single well-set
           sans as the safer premium result. Fallback metrics are overridden
           below so `swap` cannot shift layout.

   DSN-02  Brand ramp is BUILT FROM the existing #2563EB, which stays as
           brand-600 — a returning customer sees the same brand. The existing
           navy #0A2540 is kept as a named dark-surface anchor rather than
           forced onto the blue ramp: it is a second brand colour, not a
           lightness step, and pretending otherwise would drift the hue.
   ======================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand ------------------------------------------------------------
     Ramp derived from #2563EB (hsl 221 83% 53%), which holds at 600.        */
  --brand-50:  #EFF4FF;
  --brand-100: #DBE6FE;
  --brand-200: #BFD3FE;
  --brand-300: #93B4FD;
  --brand-400: #608BFA;
  --brand-500: #3B6DF6;
  --brand-600: #2563EB;   /* default interactive — unchanged from today */
  --brand-700: #1D4FD7;   /* hover */
  --brand-800: #1E40AF;   /* active */
  --brand-900: #1E3A8A;

  /* Dark brand surface (headers, dark bands, footer). Not a ramp step. */
  --navy:      #0A2540;
  --navy-700:  #123152;
  --navy-600:  #1B3F63;

  /* ---- Neutrals — cool-biased to sit with the navy ---------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFD;
  --neutral-50:  #F8F9FB;
  --neutral-100: #F1F3F7;
  --neutral-200: #E4E7EC;  /* hairline borders / dividers */
  --neutral-300: #D0D5DD;
  --neutral-400: #98A2B3;
  --neutral-500: #667085;  /* muted text */
  --neutral-600: #475467;
  --neutral-700: #344054;  /* body text */
  --neutral-800: #1D2939;
  --neutral-900: #101828;  /* headings */

  /* ---- Semantic --------------------------------------------------------- */
  --success-600: #067647;  --success-50: #ECFDF3;
  --error-600:   #D92D20;  --error-50:   #FEF3F2;
  --warning-600: #B54708;  --warning-50: #FFFAEB;
  --info-600:    var(--brand-600); --info-50: var(--brand-50);

  /* ---- Roles ------------------------------------------------------------ */
  --text:            var(--neutral-700);
  --text-strong:     var(--neutral-900);
  --text-muted:      var(--neutral-500);
  --text-on-dark:    #FFFFFF;
  --text-on-dark-mu: #B6C6D8;   /* ≥4.5:1 on --navy */
  --surface:         var(--neutral-0);
  --surface-sunken:  var(--neutral-50);
  --surface-brand:   var(--brand-50);
  --hairline:        var(--neutral-200);
  --hairline-dark:   rgba(255,255,255,0.14);

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring-color: var(--brand-600);
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);

  /* ---- Spacing (base 4, rhythm 8) --------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  /* Section rhythm — mobile defaults, raised at the breakpoints below. */
  --section-y:        var(--space-16);  /* 64 */
  --section-y-feature: var(--space-20); /* 80 */
  --gutter:           var(--space-5);   /* 20 */
  --card-pad:         var(--space-5);   /* 20 */
  --grid-gap:         var(--space-4);   /* 16 */

  /* Within a section */
  --gap-eyebrow-heading: var(--space-3);  /* 12 */
  --gap-heading-subhead: var(--space-4);  /* 16 */
  --gap-subhead-content: var(--space-8);  /* 32 mobile → 40 desktop */
  --gap-content-cta:     var(--space-8);  /* 32 mobile → 48 desktop */

  /* ---- Containers ------------------------------------------------------- */
  --container:        1200px;
  --container-read:   720px;   /* prose + legal */
  --container-form:   600px;   /* form column */
  --measure:          68ch;
  --measure-display:  20ch;

  /* ---- Type ------------------------------------------------------------- */
  --font-sans: 'Barlow', 'Barlow Fallback', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);      /* 36 → 64 */
  --fs-h1:      clamp(2rem, 1.6rem + 1.9vw, 3rem);          /* 32 → 48 */
  --fs-h2:      clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);    /* 28 → 40 */
  --fs-h3:      clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);  /* 22 → 28 */
  --fs-h4:      1.25rem;      /* 20 */
  --fs-body-lg: 1.125rem;     /* 18 */
  --fs-body:    1rem;         /* 16 */
  --fs-body-sm: 0.9375rem;    /* 15 */
  --fs-caption: 0.8125rem;    /* 13 */
  --fs-overline: 0.75rem;     /* 12 */

  --lh-display: 1.05;  --lh-h1: 1.1;   --lh-h2: 1.15;  --lh-h3: 1.25;
  --lh-h4: 1.3;        --lh-body: 1.6; --lh-body-sm: 1.5;
  --lh-caption: 1.45;  --lh-overline: 1.3;

  --tr-display: -0.03em; --tr-h1: -0.02em; --tr-h2: -0.02em;
  --tr-h3: -0.01em;      --tr-h4: -0.01em; --tr-overline: 0.08em;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;   --radius-md: 8px;   --radius-lg: 12px;
  --radius-xl: 16px;  --radius-2xl: 24px; --radius-full: 9999px;

  /* ---- Elevation — layered, low-opacity, neutral-900 based, never black -- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.05);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16,24,40,0.08), 0 8px 8px -4px rgba(16,24,40,0.03);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --dur-slower: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Controls --------------------------------------------------------- */
  --control-h:    48px;   /* inputs + selects, all viewports */
  --btn-h-sm:     36px;
  --btn-h-md:     44px;
  --btn-h-lg:     48px;   /* mobile; 52 from tablet up */
  --header-h:     64px;
  --tap-min:      44px;
  --row-min:      56px;   /* accordion / list row minimum */
  --marker:       40px;   /* numbered step marker */
  --icon-sm:      16px;
  --icon-md:      20px;
  --icon-lg:      24px;
  --hero-min:     600px;  /* desktop hero floor — never a 100vh lock */
  --drawer-w:     380px;

  /* Logo (Part 3.8). DEVIATION, approved DIR-DSN and recorded as a token:
     3.8 specifies 28-32px mobile / 32-36px desktop, which assumes a compact
     square mark. This logo is a 3.85:1 wordmark lockup (960x249) — at 36px
     the wordmark would be unreadably small, and the owner explicitly asked
     for a larger, clearly visible mark. 40px desktop / 36px mobile keeps the
     lockup legible while reading tighter than the 48px it was. */
  --logo-h:       36px;
  --logo-canada:  10.5px;
}

/* Section rhythm scales with the viewport (3.1). */
@media (min-width: 768px) {
  :root {
    --section-y: var(--space-20);          /* 80 */
    --section-y-feature: 104px;
    --gutter: var(--space-8);              /* 32 */
    --card-pad: var(--space-6);            /* 24 */
    --grid-gap: var(--space-6);            /* 24 */
    --gap-subhead-content: var(--space-10);/* 40 */
    --gap-content-cta: var(--space-12);    /* 48 */
    --btn-h-lg: 52px;
    --header-h: 76px;
    --logo-h: 40px;
  }
}
@media (min-width: 1024px) {
  :root {
    --section-y: 112px;
    --section-y-feature: 144px;
    --gutter: var(--space-12);             /* 48 */
    --card-pad: var(--space-8);            /* 32 */
    --grid-gap: var(--space-8);            /* 32 */
  }
}

/* Fallback metrics so font-display:swap cannot shift layout (Part 9).
   Measured against Barlow's own metrics; Arial is the substitute. */
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  /* Measured, not guessed: Barlow renders a 50-char sample at 2345.5px
     where Arial renders 2490.6px @100px → Arial must scale to 94.2% to
     match advance width. Line box 120 vs 115 → ascent/descent raised to
     match Barlow's taller box so swap changes nothing. */
  size-adjust: 94.2%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms;
  }
}