/* ==========================================================================
   Resilience Group — Design Tokens
   Version 1.1 (2026-05-20: gold locked, service-accents added)
   
   Single source of truth for all visual values.
   Every CSS property must reference a token — never hardcode.
   
   Locked by AD-2026-05-20-RESILIENCE-DESIGN-LOCK:
   - Navy primary: #1a2744 (kept)
   - Accent gold: #C2A269 (replaces previous copper #b08a4a)
   - Type system: Zodiak + Satoshi (kept)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Faces — Self-hosted from /assets/fonts/
   Variable fonts: one file covers all weights.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Zodiak';
  src: url('/assets/fonts/Zodiak-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Light Mode (default)
   -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {

  /* -- Surfaces (warm stone) -- */
  --color-bg:                #f5f3ef;
  --color-surface:           #faf9f6;
  --color-surface-2:         #ffffff;
  --color-surface-offset:    #edeae4;
  --color-surface-offset-2:  #e5e2db;
  --color-surface-dynamic:   #ddd9d2;
  --color-divider:           #d4d0c9;
  --color-border:            #c9c4bb;

  /* -- Text -- */
  --color-text:              #1a1814;
  --color-text-muted:        #6b6760;
  --color-text-faint:        #a9a59e;
  --color-text-inverse:      #faf9f6;

  /* -- Primary (deep navy) -- */
  --color-primary:           #1a2744;
  --color-primary-hover:     #253556;
  --color-primary-active:    #0f1a2e;
  --color-primary-highlight: #dde1e8;

  /* -- Accent (gold — locked 2026-05-20) -- */
  --color-accent:            #c2a269;
  --color-accent-hover:      #a88a52;
  --color-accent-active:     #8e7340;
  --color-accent-highlight:  #f0e7d3;

  /* -- Service accent variables (Sprint D locks values) --
     Each service page can opt into one of these via a single CSS variable
     override at the page root: --service-accent: var(--color-service-trustee);
     Then borders/eyebrows use var(--service-accent, var(--color-accent)). */
  --color-service-trustee:   #a8533a;  /* terracotta */
  --color-service-corporate: #3c5b8f;  /* indigo */
  --color-service-fund:      #2d7a7a;  /* teal */
  --color-service-payroll:   #5a7a3c;  /* green */

  /* -- Semantic -- */
  --color-warning:           #964219;
  --color-warning-highlight: #ddcfc6;
  --color-error:             #a12c4d;
  --color-error-highlight:   #e0ced7;
  --color-success:           #437a22;
  --color-success-highlight: #d4dfcc;

  /* -- Shadows (warm-toned for stone backgrounds) -- */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */

[data-theme="dark"] {

  /* -- Surfaces -- */
  --color-bg:                #111316;
  --color-surface:           #181b20;
  --color-surface-2:         #1e2128;
  --color-surface-offset:    #1a1d22;
  --color-surface-offset-2:  #22262d;
  --color-surface-dynamic:   #2a2e36;
  --color-divider:           #252930;
  --color-border:            #353a44;

  /* -- Text -- */
  --color-text:              #c8cad0;
  --color-text-muted:        #7d8290;
  --color-text-faint:        #555a66;
  --color-text-inverse:      #181b20;

  /* -- Primary (navy lightens for contrast) -- */
  --color-primary:           #8ba3cc;
  --color-primary-hover:     #a0b5d8;
  --color-primary-active:    #7490be;
  --color-primary-highlight: #1e2536;

  /* -- Accent (gold lightens for contrast) -- */
  --color-accent:            #d8b878;
  --color-accent-hover:      #c8a565;
  --color-accent-active:     #b89252;
  --color-accent-highlight:  #2e2618;

  /* -- Service accent variables (dark mode derivations) -- */
  --color-service-trustee:   #c87858;
  --color-service-corporate: #6b8bbf;
  --color-service-fund:      #5ba8a8;
  --color-service-payroll:   #8aa868;

  /* -- Semantic (same hues, adjusted for dark) -- */
  --color-warning:           #d4845a;
  --color-warning-highlight: #2e2218;
  --color-error:             #d45c7a;
  --color-error-highlight:   #2e1820;
  --color-success:           #6ab842;
  --color-success-highlight: #1a2e14;

  /* -- Shadows (deeper for dark surfaces) -- */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

/* System preference fallback (when no data-theme attribute set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    --color-bg:                #111316;
    --color-surface:           #181b20;
    --color-surface-2:         #1e2128;
    --color-surface-offset:    #1a1d22;
    --color-surface-offset-2:  #22262d;
    --color-surface-dynamic:   #2a2e36;
    --color-divider:           #252930;
    --color-border:            #353a44;

    --color-text:              #c8cad0;
    --color-text-muted:        #7d8290;
    --color-text-faint:        #555a66;
    --color-text-inverse:      #181b20;

    --color-primary:           #8ba3cc;
    --color-primary-hover:     #a0b5d8;
    --color-primary-active:    #7490be;
    --color-primary-highlight: #1e2536;

    --color-accent:            #d8b878;
    --color-accent-hover:      #c8a565;
    --color-accent-active:     #b89252;
    --color-accent-highlight:  #2e2618;

    --color-service-trustee:   #c87858;
    --color-service-corporate: #6b8bbf;
    --color-service-fund:      #5ba8a8;
    --color-service-payroll:   #8aa868;

    --color-warning:           #d4845a;
    --color-warning-highlight: #2e2218;
    --color-error:             #d45c7a;
    --color-error-highlight:   #2e1820;
    --color-success:           #6ab842;
    --color-success-highlight: #1a2e14;

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}

/* --------------------------------------------------------------------------
   Typography Scale (fluid clamp)
   -------------------------------------------------------------------------- */

:root {
  --font-display: 'Zodiak', Georgia, serif;
  --font-body:    'Satoshi', Inter, system-ui, sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Line heights */
  --leading-display:  1.1;
  --leading-subhead:  1.3;
  --leading-body:     1.6;
  --leading-label:    1.4;

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-uppercase: 0.08em;
}

/* --------------------------------------------------------------------------
   Spacing Scale
   -------------------------------------------------------------------------- */

:root {
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
}

/* --------------------------------------------------------------------------
   Border Radius
   -------------------------------------------------------------------------- */

:root {
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   Content Widths + Container Padding
   Sprint H (per docs/responsive-parametrisation.md §1.4)
   -------------------------------------------------------------------------- */

:root {
  --content-narrow:   640px;
  --content-default:  960px;
  --content-wide:    1200px;
  --content-max:     1440px;

  /* Fluid inline padding: 16px phones, ramps to 32px desktop, no MQ needed. */
  --container-pad: clamp(1rem, 4vw, 2rem);
}

/* --------------------------------------------------------------------------
   Breakpoint tokens
   Engine-canonical per asym-intel-internal:ops/RESPONSIVE-PUBLISHING-KNOWHOW.md §2.
   Tokens for documentation/lint reference; @media queries still hard-code the
   numeric value (CSS doesn't yet support var() in @media). PR-time linter
   (HK item) must fail if the two diverge.
   -------------------------------------------------------------------------- */

:root {
  --bp-sm:  480px;   /* large phone (iPhone 15 Pro portrait) */
  --bp-md:  768px;   /* tablet portrait (iPad Mini) */
  --bp-lg: 1024px;   /* tablet landscape / small laptop */
  --bp-xl: 1280px;   /* desktop */
  --bp-2xl: 1536px;  /* wide desktop */
}

/* --------------------------------------------------------------------------
   Header height tokens (Sprint H)
   Per asym-intel/resilience:docs/responsive-parametrisation.md §2.
   The site-header is sticky; anything anchored beneath it consumes var(--header-h).
   -------------------------------------------------------------------------- */

:root {
  --header-h-mobile:  56px;
  --header-h-tablet:  64px;
  --header-h-desktop: 72px;
  --header-h: var(--header-h-mobile);
}
@media (min-width: 768px)  { :root { --header-h: var(--header-h-tablet); } }
@media (min-width: 1024px) { :root { --header-h: var(--header-h-desktop); } }

/* --------------------------------------------------------------------------
   Z-index ladder (Sprint H)
   Reserved slots; only ones currently in use are --z-header (50) and
   --z-mobile-nav (100). Sticky CTA, sub-nav, modal slots reserved for future.
   -------------------------------------------------------------------------- */

:root {
  --z-sticky-subnav: 40;
  --z-header:        50;
  --z-sticky-cta:    55;
  --z-mobile-nav:   100;
  --z-modal:        200;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

:root {
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Sprint A patterns: 3px top border, 4px left border accent treatment
   Per AD-2026-05-20-RESILIENCE-DESIGN-LOCK §1.2
   -------------------------------------------------------------------------- */

.accent-top {
  border-top: 3px solid var(--color-accent);
}

.accent-left {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-5);
}

.accent-band {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}