/* ==========================================================================
   tokens.css - the single source of every colour, size, radius, shadow, easing and duration (BUILD-CONTRACT 4, 5).
   Day = the Figma design. Night = derived: deep navy page, cream text, the sun glow becomes a moon glow, the dark bands step one shade deeper.
   The theme is data-theme="day|night" on <html> (server by Istanbul time, theme.js keeps it in sync). No raw colour outside this file.
   ========================================================================== */

:root {
  /* ---- brand palette (Figma values, verified in figma/dokum) ---- */
  --palette-navy: #00354C;
  --palette-navy-deep: #00263A;
  --palette-petrol: #007088;
  --palette-turquoise: #02A9C2;
  --palette-sun: #FCAF17;
  --palette-sun-soft: #FFE7A3;
  --palette-orange: #F5821F;
  --palette-cream: #F4EEE3;
  --palette-cream-warm: #FFF4E0;
  --palette-ice: #E3F2F4;
  --palette-slate: #3A5867;
  --palette-white: #FFFFFF;
  --palette-night-knob: #0B4A66;
  --white-06: rgb(255 255 255 / 0.06);
  --white-10: rgb(255 255 255 / 0.10);
  --white-16: rgb(255 255 255 / 0.16);
  --white-18: rgb(255 255 255 / 0.18);
  --white-20: rgb(255 255 255 / 0.20);
  --white-60: rgb(255 255 255 / 0.60);
  --white-85: rgb(255 255 255 / 0.85);
  --navy-14: rgb(0 53 76 / 0.14);
  --knob-day-from: #FDC24A;
  --knob-day-glow: rgb(245 130 31 / 0.45);
  --knob-night-glow: rgb(255 255 255 / 0.18);
  --sun-mid: #F7A01C;
  --sun-glow: rgb(252 175 23 / 0.5);
  --wordmark-from: rgb(255 255 255 / 0.14);
  --wordmark-to: rgb(255 255 255 / 0.03);
  --shade-strong: rgb(0 38 58 / 0.7);
  --shade-none: rgb(0 38 58 / 0);
  --shade-veil: rgb(0 38 58 / 0.2);
  --shade-bottom: rgb(0 38 58 / 0.75);
  --shadow-bar: 0 12px 30px rgb(0 53 76 / 0.08);
  --table-head: var(--palette-navy);

  /* ---- fonts ---- */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- fluid type: 390 px phone -> 1440 px desktop (Figma values at both ends) ---- */
  --fs-hero: clamp(49px, calc(49px + 53 * (100vw - 390px) / 1050), 102px);
  --fs-hero-accent: clamp(52px, calc(52px + 54 * (100vw - 390px) / 1050), 106px);
  --fs-hero-last: clamp(56px, calc(56px + 56 * (100vw - 390px) / 1050), 112px);
  --fs-xl: clamp(52px, calc(52px + 68 * (100vw - 390px) / 1050), 120px);
  --fs-xl-accent: clamp(56px, calc(56px + 72 * (100vw - 390px) / 1050), 128px);
  --fs-lg: clamp(46px, calc(46px + 46 * (100vw - 390px) / 1050), 92px);
  --fs-seq: clamp(46px, calc(46px + 50 * (100vw - 390px) / 1050), 96px);
  --fs-call: clamp(44px, calc(44px + 60 * (100vw - 390px) / 1050), 104px);
  --fs-insta: clamp(46px, calc(46px + 58 * (100vw - 390px) / 1050), 104px);
  --fs-about: clamp(30px, calc(30px + 26 * (100vw - 390px) / 1050), 56px);
  --fs-fact: clamp(40px, calc(40px + 24 * (100vw - 390px) / 1050), 64px);
  --fs-fact-italic: clamp(44px, calc(44px + 24 * (100vw - 390px) / 1050), 68px);
  --fs-value-no: clamp(28px, calc(28px + 16 * (100vw - 390px) / 1050), 44px);
  --fs-value-title: clamp(21px, calc(21px + 13 * (100vw - 390px) / 1050), 34px);
  --fs-value-text: clamp(14px, calc(14px + 2 * (100vw - 390px) / 1050), 16px);
  --fs-eyebrow: clamp(12px, calc(12px + 2 * (100vw - 390px) / 1050), 14px);
  --fs-lead: clamp(16px, calc(16px + 4 * (100vw - 390px) / 1050), 20px);
  --fs-copy: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
  --fs-body-lg: clamp(16px, calc(16px + 3 * (100vw - 390px) / 1050), 19px);
  --fs-strip-italic: clamp(30px, calc(30px + 26 * (100vw - 390px) / 1050), 56px);
  --fs-strip-bold: clamp(28px, calc(28px + 26 * (100vw - 390px) / 1050), 54px);
  --fs-mail: clamp(20px, calc(20px + 16 * (100vw - 390px) / 1050), 36px);
  --fs-wordmark: clamp(84px, calc(84px + 166 * (100vw - 390px) / 1050), 250px);
  --fs-card-title: 34px;
  --fs-ui: 17px;           /* buttons, links in running UI */
  --fs-small: 15px;
  --fs-micro: 13px;
  --lh-display: 0.96;
  --ls-display: -0.04em;
  --ls-eyebrow: 0.14em;

  /* ---- space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-13: 72px;
  --space-14: 80px;
  --space-15: 96px;
  --gutter: 20px;                       /* side padding: 20 phone, 32 small tablet, 40 tablet, 40 -> 80 desktop (layout.css) */
  --content-max: 1280px;                /* Figma content width (1440 - 2 * 80) */
  --page-max: 1440px;                   /* the Figma frame: header, hero and bands never grow past it */
  --header-top: 20px;

  /* ---- shape ---- */
  --radius-pill: 999px;
  --radius-xs: 6px;
  --radius-s: 18px;
  --radius-m: 24px;
  --radius-l: 28px;
  --radius-xl: 36px;
  --radius-2xl: 56px;
  --radius-arc: 240px;                  /* the big round corner of the asymmetric photo frames */

  /* ---- motion (emil-design-eng) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-fast: 180ms;
  --dur-ui: 240ms;
  --dur-theme: 300ms;
  --dur-reveal: 520ms;

  /* ---- layers ---- */
  --z-content: 1;
  --z-header: 50;
  --z-menu: 40;
  --z-consent: 60;
  --z-dialog: 70;
}

@media (min-width: 600px) { :root { --gutter: 32px; --header-top: 24px; } }
@media (min-width: 768px) { :root { --gutter: 40px; --header-top: 28px; } }
@media (min-width: 1024px) { :root { --gutter: calc(40px + 40 * (100vw - 1024px) / 416); } }
@media (min-width: 1440px) { :root { --gutter: 80px; } }

/* ==========================================================================
   Day theme (default = Figma)
   ========================================================================== */
:root,
:root[data-theme="day"] {
  color-scheme: light;
  --color-bg: var(--palette-cream);                    /* page */
  --color-bg-alt: var(--palette-ice);                  /* ice sections */
  --color-surface: var(--palette-white);               /* cards on the page */
  --color-band: var(--palette-navy);                   /* dark bands: branches, strip, footer */
  --color-band-deep: var(--palette-navy-deep);
  --color-ink: var(--palette-navy);                    /* headings, strong text */
  --color-ink-soft: var(--palette-slate);              /* body text */
  --color-accent: var(--palette-petrol);               /* eyebrows, italic accent words */
  --color-accent-on-surface: var(--palette-petrol);                /* accent text on --color-surface (breadcrumb, legal TOC numbers) */
  --color-accent-fill: var(--palette-petrol);
  --color-on-band: var(--palette-white);
  --color-on-band-accent: var(--palette-turquoise);
  --color-line: var(--palette-navy);                   /* hairlines on the page */
  --color-line-soft: rgb(0 53 76 / 0.14);
  --color-sun: var(--palette-sun);
  --color-orange: var(--palette-orange);
  --color-turquoise: var(--palette-turquoise);
  --color-focus: var(--palette-petrol);
  --color-focus-on-band: var(--palette-sun);

  --btn-dark-bg: var(--palette-navy);
  --btn-dark-ink: var(--palette-white);
  --btn-outline: var(--palette-navy);
  --header-bg: rgb(255 255 255 / 0.72);
  --header-bg-stuck: rgb(255 255 255 / 0.86);
  --header-line: rgb(0 53 76 / 0.12);
  --header-shadow: 0 10px 34px rgb(0 53 76 / 0.10);
  --logo-ink: var(--palette-navy);
  --glow: radial-gradient(closest-side, rgb(252 175 23 / 0.38), rgb(252 175 23 / 0));
  --glow-small: radial-gradient(closest-side, rgb(252 175 23 / 0.32), rgb(252 175 23 / 0));
  --section-ice: linear-gradient(180deg, var(--palette-cream), var(--palette-ice));
  --stage-gradient: linear-gradient(135deg, var(--palette-navy), #004A63 54%, var(--palette-petrol));
  --stage-ring: rgb(255 255 255 / 0.2);
  --shadow-card: 0 20px 50px rgb(0 53 76 / 0.18);
  --shadow-pop: 0 18px 44px rgb(0 53 76 / 0.2);
  --switch-line: var(--palette-navy);
  --media-tag-bg: rgb(0 38 58 / 0.5);                   /* the Figma glass (white 16 %) made darker so the white caption passes AA on the yellow placeholders */
  --card-bg: var(--palette-white);
  --scrim: rgb(0 38 58 / 0.45);
  --field-bg: var(--palette-cream);
  --color-error: #B42318;
  --color-success-bg: rgb(2 169 194 / 0.12);
  --color-error-bg: rgb(180 35 24 / 0.08);
}

/* ==========================================================================
   Night theme (derived)
   ========================================================================== */
:root[data-theme="night"] {
  color-scheme: dark;
  --color-bg: #002B40;
  --color-bg-alt: #003650;
  --color-surface: #00384F;
  --color-band: #001B2B;
  --color-band-deep: #00121D;
  --color-ink: var(--palette-cream);
  --color-ink-soft: #B9CCD4;
  --color-accent: #3CC8DD;                              /* turquoise, a step lighter for small text on the night glow */
  --color-accent-on-surface: #3CC8DD;
  --color-accent-fill: var(--palette-turquoise);
  --color-on-band: var(--palette-white);
  --color-on-band-accent: var(--palette-turquoise);
  --color-line: rgb(244 238 227 / 0.5);
  --color-line-soft: rgb(244 238 227 / 0.16);
  --color-focus: var(--palette-sun);
  --color-focus-on-band: var(--palette-sun);

  --btn-dark-bg: var(--palette-cream);
  --btn-dark-ink: var(--palette-navy-deep);
  --btn-outline: var(--palette-cream);
  --header-bg: rgb(0 27 43 / 0.7);
  --header-bg-stuck: rgb(0 27 43 / 0.86);
  --header-line: rgb(244 238 227 / 0.16);
  --header-shadow: 0 10px 34px rgb(0 0 0 / 0.3);
  --logo-ink: var(--palette-cream);
  --glow: radial-gradient(closest-side, rgb(255 231 163 / 0.16), rgb(255 231 163 / 0));
  --glow-small: radial-gradient(closest-side, rgb(255 231 163 / 0.14), rgb(255 231 163 / 0));
  --section-ice: linear-gradient(180deg, #002B40, #003650);
  --stage-gradient: linear-gradient(135deg, #00121D, #00283B 54%, #004C63);
  --stage-ring: rgb(255 255 255 / 0.14);
  --shadow-card: 0 20px 50px rgb(0 0 0 / 0.45);
  --shadow-pop: 0 18px 44px rgb(0 0 0 / 0.5);
  --switch-line: var(--palette-white);
  --media-tag-bg: rgb(0 18 29 / 0.4);
  --card-bg: #00324A;
  --scrim: rgb(0 10 18 / 0.62);
  --field-bg: #002B40;
  --color-error: #FFB4AB;
  --color-success-bg: rgb(2 169 194 / 0.18);
  --color-error-bg: rgb(255 180 171 / 0.1);
}