/* ============================================================================
   TOKENS — the single source of truth for colour, type, space, motion.
   Mirrored by brandConfig.js so the site still works with JS disabled.
   Nothing below this file should hard-code a hex value or a pixel font size.
   ========================================================================== */

/* ── Self-hosted font slot ───────────────────────────────────────────────────
   Drop woff2 files into assets/ and uncomment. Then set
   brandConfig.fonts.useGoogleFonts = false and remove the <link> tags in
   partials/header.html.

   @font-face {
     font-family: 'CN Display';
     src: url('../assets/CNDisplay-Variable.woff2') format('woff2-variations');
     font-weight: 400 900; font-display: swap; font-style: normal;
   }
   @font-face {
     font-family: 'CN Text';
     src: url('../assets/CNText-Variable.woff2') format('woff2-variations');
     font-weight: 300 700; font-display: swap; font-style: normal;
   }
   ────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* ── Brand palette (mirror of brandConfig.colors) ─────────────────────── */
  --cn-accent:         #16E0BD;
  --cn-accent-strong:  #0A7F6D;
  --cn-accent-press:   #0FC9A9;
  --cn-accent-glow:    rgba(22, 224, 189, 0.16);
  --cn-accent-veil:    rgba(22, 224, 189, 0.08);
  --cn-signal:         #5B8CFF;
  --cn-signal-strong:  #2B52C7;

  --cn-ink-deep:       #07090C;
  --cn-ink:            #0C1015;
  --cn-ink-raised:     #141A21;
  --cn-paper:          #FFFFFF;
  --cn-paper-alt:      #F4F6F8;
  --cn-text-on-light:  #0C1015;
  --cn-text-on-dark:   #F7F9FA;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --cn-font-display: 'Archivo', 'Archivo Expanded', 'Helvetica Neue', Arial, sans-serif;
  --cn-font-body:    'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cn-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid editorial scale. Min values are mobile, max are 1440px+. */
  --fs-display-1: clamp(2.125rem, 1.1rem + 6.2vw, 6rem);
  --fs-display-2: clamp(2.125rem, 1.35rem + 3.6vw, 4.25rem);
  --fs-h1:        clamp(2rem,     1.4rem + 2.9vw, 3.5rem);
  --fs-h2:        clamp(1.625rem, 1.25rem + 1.85vw, 2.75rem);
  --fs-h3:        clamp(1.25rem,  1.12rem + 0.62vw, 1.625rem);
  --fs-h4:        clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --fs-lead:      clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  --fs-body:      1.0625rem;
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;
  --fs-eyebrow:   0.75rem;
  --fs-metric:    clamp(2.75rem, 1.6rem + 4.4vw, 5rem);

  --lh-tight:  1.02;
  --lh-snug:   1.14;
  --lh-normal: 1.35;
  --lh-body:   1.62;
  --lh-loose:  1.72;

  --tr-display: -0.035em;   /* tight tracking on big editorial type */
  --tr-heading: -0.022em;
  --tr-body:     0em;
  --tr-eyebrow:  0.16em;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;

  /* ── Space — 4px base ─────────────────────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-7: 2rem;     --s-8: 2.5rem;
  --s-9: 3rem;     --s-10: 4rem;    --s-11: 5rem;    --s-12: 6rem;
  --s-13: 8rem;    --s-14: 10rem;

  /* Section rhythm — generous, Deloitte-style whitespace */
  --section-y:      clamp(4rem, 2rem + 7vw, 9rem);
  --section-y-lg:   clamp(5.5rem, 2.5rem + 9vw, 12rem);
  --section-y-tight: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container:      1320px;
  --container-wide: 1600px;
  --container-text: 68ch;
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 3.5rem);
  --header-h: 76px;

  /* ── Radii — deliberately square for an enterprise register ───────────── */
  --r-xs: 2px;  --r-sm: 3px;  --r-md: 5px;  --r-lg: 10px;  --r-pill: 999px;

  /* ── Borders & elevation (light context defaults) ─────────────────────── */
  --line:        rgba(12, 16, 21, 0.12);
  --line-strong: rgba(12, 16, 21, 0.22);
  --line-faint:  rgba(12, 16, 21, 0.07);
  --shadow-1: 0 1px 2px rgba(7, 9, 12, 0.05), 0 2px 8px rgba(7, 9, 12, 0.04);
  --shadow-2: 0 2px 4px rgba(7, 9, 12, 0.06), 0 12px 28px rgba(7, 9, 12, 0.08);
  --shadow-3: 0 4px 10px rgba(7, 9, 12, 0.08), 0 24px 60px rgba(7, 9, 12, 0.12);

  /* ── Glassmorphism ────────────────────────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur:   saturate(150%) blur(18px);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-1: 140ms;  --dur-2: 260ms;  --dur-3: 420ms;  --dur-4: 720ms;

  /* ── Semantic surface tokens — remapped per theme & per surface ───────── */
  --surface:       var(--cn-paper);
  --surface-alt:   var(--cn-paper-alt);
  --surface-raised: var(--cn-paper);
  --text:          var(--cn-text-on-light);
  --text-muted:    rgba(12, 16, 21, 0.64);
  --text-faint:    rgba(12, 16, 21, 0.46);
  --link:          var(--cn-signal-strong);
  --accent-text:   var(--cn-accent-strong);
  --z-header: 100;
  --z-mega:   90;
  --z-drawer: 120;
  --z-toast:  200;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
/* Never define a colour ONLY inside a media query — every token above has a
   light definition on bare :root, and only the semantic layer flips here. */
:root[data-theme='dark'],
:root:not([data-theme='light']) {
  /* intentionally empty — see the two blocks below */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface:        var(--cn-ink);
    --surface-alt:    var(--cn-ink-deep);
    --surface-raised: var(--cn-ink-raised);
    --text:           var(--cn-text-on-dark);
    --text-muted:     rgba(247, 249, 250, 0.68);
    --text-faint:     rgba(247, 249, 250, 0.46);
    --link:           var(--cn-signal);
    --accent-text:    var(--cn-accent);
    --line:           rgba(247, 249, 250, 0.14);
    --line-strong:    rgba(247, 249, 250, 0.26);
    --line-faint:     rgba(247, 249, 250, 0.08);
    --glass-bg:       rgba(12, 16, 21, 0.72);
    --glass-border:   rgba(247, 249, 250, 0.12);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

/* Explicit user choice wins in both directions. */
:root[data-theme='dark'] {
  --surface:        var(--cn-ink);
  --surface-alt:    var(--cn-ink-deep);
  --surface-raised: var(--cn-ink-raised);
  --text:           var(--cn-text-on-dark);
  --text-muted:     rgba(247, 249, 250, 0.68);
  --text-faint:     rgba(247, 249, 250, 0.46);
  --link:           var(--cn-signal);
  --accent-text:    var(--cn-accent);
  --line:           rgba(247, 249, 250, 0.14);
  --line-strong:    rgba(247, 249, 250, 0.26);
  --line-faint:     rgba(247, 249, 250, 0.08);
  --glass-bg:       rgba(12, 16, 21, 0.72);
  --glass-border:   rgba(247, 249, 250, 0.12);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);
}

:root[data-theme='light'] {
  --surface:        var(--cn-paper);
  --surface-alt:    var(--cn-paper-alt);
  --surface-raised: var(--cn-paper);
  --text:           var(--cn-text-on-light);
  --text-muted:     rgba(12, 16, 21, 0.64);
  --text-faint:     rgba(12, 16, 21, 0.46);
  --link:           var(--cn-signal-strong);
  --accent-text:    var(--cn-accent-strong);
  --line:           rgba(12, 16, 21, 0.12);
  --line-strong:    rgba(12, 16, 21, 0.22);
  --line-faint:     rgba(12, 16, 21, 0.07);
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --glass-border:   rgba(255, 255, 255, 0.55);
}

/* ── Surface scopes ──────────────────────────────────────────────────────────
   A section carries its own palette regardless of the page theme. This is the
   Deloitte Digital pattern: light editorial page, decisive dark chapters.
   ────────────────────────────────────────────────────────────────────────── */
/* Applied to every surface that is dark REGARDLESS of the page theme: section
   scopes, the mega-menu panels and the mobile drawer. The menu and drawer must
   be listed here — without the remap they inherit the light semantic tokens
   and components inside them render dark-on-dark. */
.surface-dark,
.mega,
.drawer {
  --surface:        var(--cn-ink);
  --surface-alt:    var(--cn-ink-deep);
  --surface-raised: var(--cn-ink-raised);
  --text:           var(--cn-text-on-dark);
  --text-muted:     rgba(247, 249, 250, 0.68);
  --text-faint:     rgba(247, 249, 250, 0.44);
  --link:           var(--cn-accent);
  --accent-text:    var(--cn-accent);
  --line:           rgba(247, 249, 250, 0.14);
  --line-strong:    rgba(247, 249, 250, 0.28);
  --line-faint:     rgba(247, 249, 250, 0.07);
  --glass-bg:       rgba(20, 26, 33, 0.6);
  --glass-border:   rgba(247, 249, 250, 0.12);
  background: var(--surface);
  color: var(--text);
}

.surface-deep { --surface: var(--cn-ink-deep); }

.surface-paper {
  --surface:        var(--cn-paper);
  --surface-alt:    var(--cn-paper-alt);
  --surface-raised: var(--cn-paper);
  --text:           var(--cn-text-on-light);
  --text-muted:     rgba(12, 16, 21, 0.64);
  --text-faint:     rgba(12, 16, 21, 0.46);
  --link:           var(--cn-signal-strong);
  --accent-text:    var(--cn-accent-strong);
  --line:           rgba(12, 16, 21, 0.12);
  --line-strong:    rgba(12, 16, 21, 0.22);
  --line-faint:     rgba(12, 16, 21, 0.07);
  background: var(--surface);
  color: var(--text);
}

.surface-alt-bg { background: var(--surface-alt); color: var(--text); }