/* =====================================================================
   MIBCP / Barstoni — design tokens
   Single source of truth for the public site AND the portal.

   Loaded FIRST, before style.css (public) and portal.css / mibcp-theme.css
   (portal). Those stylesheets keep their existing variable names as ALIASES
   pointing here, so nothing breaks while rules migrate one component at a time.

   Rules for anyone editing this file:
     - Every colour pair is contrast-checked against the surface it is used on,
       including --surface-sunken, not just white. Two tokens previously passed
       on white and failed on the portal background; that is why the check must
       name the surface.
     - No value enters this file without a stated purpose.
     - Nothing outside this file may introduce a new hex, spacing or radius.

   The brand is unchanged: navy #005f8a, deep #013049, gold #d4af37,
   red #c8102e, Newsreader display, Inter body.
   ===================================================================== */

:root {
  /* ---- Brand (unchanged, canonical) -------------------------------- */
  --brand-navy:        #005f8a;
  --brand-navy-mid:    #004a6d;
  --brand-navy-deep:   #013049;
  --brand-gold:        #d4af37;
  --brand-gold-pale:   #ecd88f;
  --brand-red:         #c8102e;

  /* ---- Surfaces ---------------------------------------------------- */
  --surface:           #ffffff;   /* cards, page bg on the public site      */
  --surface-sunken:    #f1f5f8;   /* portal page bg, alternating bands      */
  --surface-raised:    #ffffff;   /* modals, popovers                       */
  --surface-inverse:   #013049;   /* navy bands, header, footer             */
  --surface-accent-subtle: #eef6fa;

  /* ---- Text -------------------------------------------------------- */
  /* ratios: on --surface / on --surface-sunken                          */
  --text-primary:      #16202e;   /* 16.40 / 14.96  AA                     */
  --text-secondary:    #4b5563;   /*  7.56 /  6.89  AA                     */
  --text-muted:        #66717c;   /*  4.98 /  4.54  AA  (was #6b7681 =4.23 */
                                  /*                     on sunken: FAILED) */
  --text-on-inverse:   #ffffff;   /* 13.81 on --surface-inverse  AA        */
  --text-on-accent:    #ffffff;   /*  6.99 on --brand-navy       AA        */
  --text-link:         #005f8a;   /*  6.99 /  6.38  AA                     */
  --text-link-hover:   #013049;

  /* ---- Accent ------------------------------------------------------ */
  --accent:            #005f8a;
  --accent-hover:      #004a6d;
  --accent-active:     #013049;
  --accent-subtle:     #eef6fa;
  --accent-border:     #b6d3e0;

  /* ---- Highlight (gold) --------------------------------------------
     Gold is 2.10:1 on white. It is a DECORATIVE colour on dark surfaces
     only. For gold-coloured TEXT on a light surface use --highlight-text. */
  --highlight:         #d4af37;   /*  6.57 on --surface-inverse  AA        */
  --highlight-pale:    #ecd88f;   /*  9.73 on --surface-inverse  AA        */
  --highlight-text:    #886d12;   /*  4.95 /  4.51  AA  (was #8a6f14=4.39  */
                                  /*                     on sunken: FAILED) */

  /* ---- Status ------------------------------------------------------ */
  --danger:            #c8102e;   /*  5.88 /  5.37  AA                     */
  --danger-hover:      #a30d26;   /*  7.95 /  7.25  AA                     */
  --danger-subtle:     #fdeef0;
  --success:           #0f7a3d;   /*  5.42 /  4.95  AA                     */
  --success-subtle:    #e9f7ef;
  --warning-text:      #886d12;   /* same value as --highlight-text        */
  --warning-subtle:    #fdf6e3;
  --info:              #005f8a;
  --info-subtle:       #eef6fa;

  /* ---- Borders ----------------------------------------------------- */
  --border:            #e4e9ee;
  --border-strong:     #cbd5dd;
  --border-width:      1px;

  /* ---- Focus -------------------------------------------------------
     The previous ring was gold on white at 2.10:1, below the 3:1 that
     WCAG 2.1 (1.4.11) requires for a focus indicator. Navy passes on every
     light surface; gold-pale passes on navy. Both are paired with a halo so
     the ring is visible whatever sits behind it. */
  --focus-ring:         #005f8a;  /*  6.99 / 6.38 on light  — AA           */
  --focus-ring-inverse: #ecd88f;  /*  9.73 on navy          — AA           */
  --focus-halo:         rgba(255,255,255,.9);
  --focus-width:        2px;
  --focus-offset:       2px;

  /* ---- Type: family ------------------------------------------------ */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type: body scale (7 steps, replacing ~41 ad-hoc sizes) ------- */
  --text-2xs:  0.75rem;    /* 12px — legal, table meta                    */
  --text-xs:   0.8125rem;  /* 13px — captions, badges                     */
  --text-sm:   0.875rem;   /* 14px — secondary UI, table cells            */
  --text-base: 1rem;       /* 16px — body default                         */
  --text-lg:   1.125rem;   /* 18px — lead paragraphs                      */
  --text-xl:   1.25rem;    /* 20px — card titles                          */
  --text-2xl:  1.5rem;     /* 24px — section subheads                     */

  /* ---- Type: display scale (kept as-is; it already works) ---------- */
  --display-xs: clamp(1.05rem, 1.6vw, 1.3rem);
  --display-sm: clamp(1.3rem,  2.3vw, 1.75rem);
  --display-md: clamp(1.5rem,  3vw,   2rem);
  --display-lg: clamp(1.85rem, 3.6vw, 2.7rem);
  --display-xl: clamp(2.4rem,  4.5vw, 3.4rem);
  --display-2xl:clamp(2.4rem,  5.2vw, 3.9rem);

  /* ---- Type: weight, leading, measure ------------------------------ */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;  /* display                                   */
  --leading-snug:    1.35;  /* subheads, card titles                     */
  --leading-normal:  1.6;   /* body default                              */
  --leading-relaxed: 1.75;  /* long prose (privacy, terms)               */

  --measure:        68ch;   /* max line length for body copy             */
  --measure-narrow: 56ch;   /* prose pages                               */
  --tracking-tight: -0.015em;

  /* ---- Spacing (4px base; replaces 68 ad-hoc values) --------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* ---- Radii (adopted from the portal, which already had a scale) -- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- Shadows ----------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16,34,47,.06);
  --shadow-sm: 0 1px 2px rgba(16,34,47,.05), 0 2px 6px rgba(16,34,47,.06);
  --shadow-md: 0 4px 12px rgba(16,34,47,.08), 0 10px 24px rgba(16,34,47,.08);
  --shadow-lg: 0 12px 32px rgba(16,34,47,.14), 0 4px 10px rgba(16,34,47,.08);

  /* ---- Motion ------------------------------------------------------ */
  --ease:            cubic-bezier(.4,0,.2,1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 250ms var(--ease);

  /* ---- Layout ------------------------------------------------------ */
  --container:      1040px;
  --container-wide: 1240px;
  --tap-min:        44px;   /* minimum touch target (WCAG 2.5.5)         */
}

/* =====================================================================
   Dark theme — portal only.
   The portal already ships a light/dark switch via [data-bs-theme]. The
   public site has no dark mode and this rebuild does not add one: that
   would be new functionality, not a restyle.
   ===================================================================== */
[data-bs-theme="dark"] {
  --surface:           #172029;
  --surface-sunken:    #0f161d;
  --surface-raised:    #1d2731;
  --surface-inverse:   #0b1218;
  --surface-accent-subtle: #12303f;

  --text-primary:      #e6ecf1;
  --text-secondary:    #b3c0cb;
  --text-muted:        #8e9ba7;
  --text-link:         #7fc4e3;
  --text-link-hover:   #a9dcf2;

  --accent:            #2f93c4;
  --accent-hover:      #4aa8d6;
  --accent-active:     #7fc4e3;
  --accent-subtle:     #12303f;
  --accent-border:     #24506a;

  --highlight-text:    #e0c05a;
  --danger:            #f0637a;
  --danger-hover:      #f78a9b;
  --danger-subtle:     #3a1219;
  --success:           #4fbe7f;
  --success-subtle:    #0f2c1c;
  --warning-text:      #e0c05a;
  --warning-subtle:    #2f2610;

  --border:            #2a3742;
  --border-strong:     #3c4b58;

  --focus-ring:        #7fc4e3;
  --focus-halo:        rgba(0,0,0,.6);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4);
}

/* =====================================================================
   Universal focus indicator.
   Replaces the gold ring (2.10:1 — below the 3:1 WCAG 1.4.11 requires).
   The halo keeps it visible against navy bands and photographs alike.
   ===================================================================== */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset)) var(--focus-halo);
  border-radius: 2px;
}
.surface-inverse :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.section-navy :focus-visible {
  outline-color: var(--focus-ring-inverse);
  box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset)) rgba(0,0,0,.5);
}

/* =====================================================================
   Motion. The previous reduced-motion block clamped animation-duration but
   left 22 transitions running. This neutralises both.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Minimum touch targets on small screens (WCAG 2.5.5).
   Measured before: 3 buttons on the homepage and 5 controls on /quote
   were under 44px.
   ===================================================================== */
@media (max-width: 560px) {
  .btn, button.btn, a.btn,
  .input, .select, .textarea,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea {
    min-height: var(--tap-min);
  }
}