/* ==========================================================================
   Goretii Designs: DESIGN TOKENS (single source of truth), design v2
   Navy + sky + mist, Plus Jakarta Sans + Inter.
   --------------------------------------------------------------------------
   Every color, font, type size, radius, shadow, spacing value and motion
   setting used by styles.css and motion.css lives in this file.
   Components never use raw hex values; they use the semantic tokens in C.
   To re-skin the site (palette, fonts, motion feel), edit ONLY this file.
     A. Fonts (@font-face)      B. Raw palette        C. Semantic surfaces
     D. Typography              E. Spacing & layout   F. Radius & shadows
     G. Effects / atmosphere    H. Motion             I. Responsive overrides
   Source: specs/design-v2.md.
   ========================================================================== */

/* A. Fonts (self-hosted, latin subset, variable) -------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-italic-latin-var.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks (keep layout shift near zero while fonts load) */
@font-face { font-family: "PJS Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 108.21%; ascent-override: 95.93%; descent-override: 20.52%; line-gap-override: 0%; }
@font-face { font-family: "PJS Fallback"; font-style: italic; src: local("Arial Italic"), local("Arial"), local("Liberation Sans Italic"); size-adjust: 108.21%; ascent-override: 95.93%; descent-override: 20.52%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 107.10%; ascent-override: 90.45%; descent-override: 22.52%; line-gap-override: 0%; }

:root {
  /* B. Raw palette ------------------------------------------------------- */
  --navy-600: #1e3a5f;  --navy-700: #122c4d;  --navy-800: #1c2f4a;  --navy-900: #0a1c33;  --navy-950: #061327;
  --sky-500: #1697f3;   --sky-400: #2ca9f2;
  --blue-500: #3b82f6;  --blue-400: #60a5fa;  --blue-300: #93c5fd;
  --gold-300: #fcd34d;                        /* decorative only, navy only */
  --mist: #f7fafd;      --mist-2: #e1eefa;    --white: #ffffff;     --line: #dae6f1;
  --ink: #212a3b;       --slate: #5e6f87;     --slate-300: #94a3b8; --steel: #b0c7dd;
  --emerald-600: #059669;                     /* check icons only (not text) */
  --red-600: #dc2626;   --rose-400: #fb7185;
  /* Derived for this system (AA-safe variants) */
  --blue-600: #1276c0;  /* primary button fill (white label 4.80:1), focus ring on light */
  --blue-700: #116fb6;  /* links + accent text on light, button hover */
  --line-navy: #1f2b3d; /* hairlines on navy (decorative) */
  --field-navy: #6a717d;/* control borders on navy (3.78:1) */
  --field-light: #77879c;/* control borders on light (3.66:1) */
  /* RGB triplets for translucent tints (keep in sync with the hexes above) */
  --shadow-rgb: 30 64 124;
  --white-rgb: 255 255 255;
  --navy-950-rgb: 6 19 39;
  --sky-500-rgb: 22 151 243;
  --blue-500-rgb: 59 130 246;
  --blue-400-rgb: 96 165 250;
  --blue-300-rgb: 147 197 253;
  --gold-300-rgb: 252 211 77;
  /* Gradients */
  --gradient-navy: radial-gradient(120% 120% at 0% 0%, var(--navy-600) 0%, var(--navy-700) 38%, var(--navy-900) 72%, var(--navy-950) 100%);
  --gradient-navy-cta: radial-gradient(90% 140% at 100% 0%, var(--navy-600) 0%, var(--navy-700) 34%, var(--navy-900) 70%, var(--navy-950) 100%);
  --gradient-sky: linear-gradient(135deg, var(--sky-500), var(--sky-400));
  --hairline-gold: linear-gradient(90deg, var(--gold-300), rgb(var(--gold-300-rgb) / 0));
  --hairline-glass: linear-gradient(135deg, rgb(var(--blue-300-rgb) / 0.40), rgb(var(--white-rgb) / 0.04) 45%, rgb(var(--gold-300-rgb) / 0.28));

  /* Fixed-role colors used by components (not surface-dependent) */
  --c-deep: var(--navy-950);        /* deepest navy: device frames, solid header, menu */
  --c-deep-2: var(--navy-800);      /* raised navy: browser frame, chips */
  --c-deep-3: var(--navy-900);      /* phone frame */
  --c-deep-line: var(--line-navy);  /* hairlines on navy */
  --c-deep-field: var(--field-navy);/* control borders on navy */
  --c-deep-muted: var(--steel);     /* muted text/borders on navy */
  --c-light: var(--white);          /* light screen / text on deep */
  --c-accent: var(--sky-500);       /* decorative brand highlight: dots, progress, fills */
  --c-accent-hover: var(--blue-400);/* link hover on navy */
  --c-on-accent: var(--navy-950);   /* text/icons on --c-accent (5.98:1) */
  --c-chip-icon: var(--sky-400);    /* icons inside navy chips */
  --c-gold: var(--gold-300);        /* jewelry: hairlines, sample-badge dot */
  --c-selection-bg: var(--blue-300);
  --c-selection-fg: var(--navy-950);

  /* D. Typography -------------------------------------------------------- */
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: var(--font-body);            /* alias kept for components */
  --font-serif: var(--font-display);
  --font-accent-style: italic;
  --fw-accent: 300;                         /* weight of accent italic words + numerals */

  --fs-display: clamp(2.75rem, 1.5rem + 5.556vw, 6.5rem);   /* 44 -> 104 */
  --fs-h1: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);         /* 40 -> 80 */
  --fs-h2: clamp(2rem, 1.5rem + 2.222vw, 3.5rem);           /* 32 -> 56 */
  --fs-h3: clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);   /* 22 -> 30 */
  --fs-h4: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);    /* 18 -> 22 */
  --fs-numeral: clamp(3.5rem, 2.167rem + 5.926vw, 7.5rem);  /* 56 -> 120, PJS 300 */
  --fs-lead: clamp(1.125rem, 1.0625rem + 0.278vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem);
  --fs-eyebrow: clamp(0.75rem, 0.729rem + 0.093vw, 0.8125rem);
  --fs-button: clamp(0.9375rem, 0.917rem + 0.093vw, 1rem);
  --fs-marquee: var(--fs-h3);
  --fs-giant: clamp(5rem, 2rem + 13vw, 13rem);
  --fs-wordmark: 1.125rem;
  --fs-wordmark-lg: 1.25rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 700;
  --fw-heading-sm: 600;

  --lh-display: 1;
  --lh-h1: 1.04;
  --lh-heading: 1.08;
  --lh-body: 1.7;
  --ls-display: -0.035em;
  --ls-h1: -0.03em;
  --ls-h2: -0.025em;
  --ls-h3: -0.015em;
  --ls-h4: -0.01em;
  --ls-eyebrow: 0.16em;
  --ls-wordmark: -0.02em;
  --measure: 68ch;
  --measure-lead: 54ch;
  --eyebrow-line-w: 24px;

  /* E. Spacing & layout -------------------------------------------------- */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem;
  --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem;
  --space-3xl: 6rem; --space-4xl: 8rem;
  --gutter: clamp(1rem, 0.667rem + 1.481vw, 2rem);         /* grid gap 16 -> 32 */
  --pad-x: 20px;                                           /* page side padding 20 / 32 / 48 */
  --section-y: clamp(4.5rem, 3rem + 6.667vw, 9rem);        /* 72 -> 144 */
  --section-y-tight: clamp(3rem, 2.5rem + 2.222vw, 4.5rem);
  --stack-heading: clamp(2.5rem, 2rem + 2.222vw, 4rem);
  --container: 75rem;                                      /* 1200px */
  --container-wide: 90rem;                                 /* 1440px */
  --container-narrow: 55rem;
  --header-h: 64px;
  --header-h-tall: 64px;
  --cta-bar-h: 4rem;

  /* F. Radius & shadows -------------------------------------------------- */
  --radius-xs: 6px;
  --radius-s: 12px;     /* chips, small controls */
  --radius: 14px;
  --radius-md: 18px;    /* buttons, inputs */
  --radius-m: 22px;     /* cards (alias of --radius-lg) */
  --radius-lg: 22px;
  --radius-l: 28px;     /* device frames, hero visual (alias of --radius-xl) */
  --radius-xl: 28px;
  --radius-phone: 26px;
  --radius-round: 9999px;
  --radius-pill: 9999px;
  --shadow-soft: 0 1px 2px rgb(var(--shadow-rgb) / 0.05);
  --shadow-card: 0 1px 3px rgb(var(--shadow-rgb) / 0.06), 0 1px 2px -1px rgb(var(--shadow-rgb) / 0.05);
  --shadow-lift: 0 10px 28px -10px rgb(var(--shadow-rgb) / 0.16), 0 3px 8px -4px rgb(var(--shadow-rgb) / 0.08);
  --shadow-float: 0 30px 60px -24px rgb(var(--shadow-rgb) / 0.28), 0 12px 24px -12px rgb(var(--shadow-rgb) / 0.16);
  --shadow-navy: inset 0 1px 0 rgb(var(--white-rgb) / 0.06), 0 40px 80px -32px rgb(0 0 0 / 0.65), 0 16px 32px -16px rgb(0 0 0 / 0.45);
  --glow-sky: 0 0 0 1px rgb(var(--sky-500-rgb) / 0.35), 0 14px 40px -10px rgb(var(--sky-500-rgb) / 0.55);
  /* aliases used by components */
  --shadow-1: var(--shadow-card);
  --shadow-3: var(--shadow-float);
  --shadow-device: var(--shadow-navy);

  /* G. Effects / atmosphere --------------------------------------------- */
  --header-scrolled-bg: rgb(var(--navy-950-rgb) / 0.72);
  --header-blur: blur(16px) saturate(160%);
  --cta-bar-bg: rgb(var(--navy-950-rgb) / 0.92);
  --grid-line-ink: rgb(var(--white-rgb) / 0.06);           /* brand grid on navy */
  --grid-size: 64px;
  --glow-accent: rgb(var(--blue-500-rgb) / 0.30);          /* glow orb A (cap 0.35) */
  --glow-support: rgb(var(--blue-400-rgb) / 0.20);         /* glow orb B */
  --glow-sky-soft: rgb(var(--sky-500-rgb) / 0.22);
  --grain-opacity: 0.05;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --topo-ink: rgb(var(--blue-300-rgb) / 0.10);             /* contour lines on navy */
  --topo-paper: rgb(var(--shadow-rgb) / 0.08);             /* contour lines on light */
  --topo-accent-band: rgb(var(--blue-300-rgb) / 0.10);
  --frame-fallback: linear-gradient(145deg, var(--mist-2), var(--white) 55%, var(--mist-2)); /* image slot before/without image */
  --skeleton-block: var(--line);
  --skeleton-strong: var(--navy-800);
  --card-shine: rgb(var(--blue-300-rgb) / 0.22);
  --sheen: linear-gradient(105deg, transparent 35%, rgb(var(--white-rgb) / 0.28) 50%, transparent 65%);
  --cursor-ring: rgb(var(--sky-500-rgb) / 0.8);

  /* H. Motion ------------------------------------------------------------ */
  --dur-1: 120ms;             /* press feedback */
  --dur-2: 200ms;             /* color changes, small fades */
  --dur-3: 320ms;             /* button lift, arrows, card lift */
  --dur-4: 520ms;             /* underline draw, menu, glows */
  --dur-instant: var(--dur-1);
  --dur-fast: var(--dur-2);
  --dur-base: var(--dur-3);
  --dur-slow: var(--dur-4);
  --dur-sheen: 900ms;         /* button sheen sweep */
  --dur-reveal: 900ms;        /* scroll reveals */
  --dur-hero: 1200ms;         /* hero entrance */
  --dur-rule: 1100ms;         /* hairlines drawing */
  --dur-rotate: 1400ms;       /* hero rotating word dwell */
  --dur-float: 9s;            /* ambient float loop */
  --dur-drift: 26s;           /* ambient glow / topo drift */
  --dur-marquee: 52s;         /* marquee row 1 */
  --dur-marquee-alt: 68s;     /* marquee row 2 (reverse) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: var(--ease-out-expo);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-reveal: var(--ease-out-expo);
  --stagger: 80ms;            /* between siblings in a reveal group (JS caps at 8) */
  --stagger-hero: 100ms;      /* between hero items / words */
  --reveal-distance: 32px;    /* translate for up/down/left/right reveals */
  --reveal-scale: 0.94;       /* start scale for "scale" and "zoom" reveals */
  --reveal-blur: 8px;         /* start blur for word-mask headings */
  --float-distance: 12px;     /* ambient float amplitude */
  --hover-lift: 4px;          /* card lift */
  --btn-lift: 2px;            /* button lift */
  --arrow-nudge: 4px;         /* button arrow nudge */
  --tilt-max: 6deg;           /* pointer tilt on cards (desktop) */
  --magnetic-max: 6;          /* px, read by main.js */
  --parallax-max: 28;         /* px, read by main.js */
}

/* I. Responsive overrides ------------------------------------------------ */
@media (min-width: 768px)  { :root { --pad-x: 32px; } }
@media (min-width: 1024px) { :root { --pad-x: 48px; --header-h: 72px; --header-h-tall: 80px; --fs-wordmark: var(--fs-wordmark-lg); } }
/* Mobile: shorter, smaller moves */
@media (max-width: 767.98px) {
  :root { --dur-reveal: 650ms; --dur-hero: 950ms; --reveal-distance: 20px; --stagger: 55ms; --stagger-hero: 75ms; --dur-marquee: 34s; --dur-marquee-alt: 46s; }
}

/* C. Semantic surfaces: components use ONLY these ----------------------- */
/* Class names: .theme-paper = mist (v2 .surface-mist), .theme-sunken = white
   (v2 .surface-white), .theme-ink = navy gradient (v2 .surface-navy),
   .theme-ink-2 = flat navy-900 band (v2 .surface-navy-2), .theme-accent =
   the CTA band (navy with a brighter sky glow). The v2 names are aliases. */
:root,
.theme-paper, .surface-mist,
.theme-sunken, .surface-white {
  --bg: var(--mist);
  --bg-fill: var(--mist);
  --bg-raised: var(--white);
  --bg-sunken: var(--mist-2);
  --bg-soft: var(--mist-2);
  --fg: var(--ink);
  --fg-muted: var(--slate);
  --fg-subtle: var(--slate);
  --accent-text: var(--blue-700);
  --accent-italic: var(--blue-700);
  --signal: var(--blue-600);
  --support: var(--emerald-600);
  --rule: var(--line);
  --rule-strong: var(--ink);
  --field-bg: var(--white);
  --field-border: var(--field-light);
  --focus: var(--blue-600);
  --error-text: var(--red-600);
  --badge-bg: var(--mist-2);
  --badge-fg: var(--ink);
  --badge-border: transparent;
  --btn-primary-bg: var(--blue-600);
  --btn-primary-bg-hover: var(--blue-700);
  --btn-primary-fg: var(--white);
  --btn-luxe-bg: var(--navy-950);
  --btn-luxe-fg: var(--white);
  --btn-secondary-border: var(--field-light);
  --btn-wipe-bg: var(--mist-2);
  --btn-wipe-fg: var(--ink);
  --eyebrow-line: var(--blue-700);
  --topo: var(--topo-paper);
  --icon-chip-bg: var(--mist-2);
  --icon-chip-fg: var(--blue-700);
  --card-bg: var(--white);
  --card-border: var(--line);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-float);
  --numeral: var(--blue-700);
  color-scheme: light;
}
.theme-sunken, .surface-white { --bg: var(--white); --bg-fill: var(--white); --bg-raised: var(--mist); --card-bg: var(--mist); }
.theme-ink, .surface-navy,
.theme-ink-2, .surface-navy-2,
.theme-accent {
  --bg: var(--navy-950);
  --bg-fill: var(--navy-950) var(--gradient-navy);
  --bg-raised: var(--navy-800);
  --bg-sunken: var(--navy-900);
  --bg-soft: rgb(var(--white-rgb) / 0.04);
  --fg: var(--white);
  --fg-muted: var(--steel);
  --fg-subtle: var(--slate-300);
  --accent-text: var(--sky-400);
  --accent-italic: var(--blue-300);
  --signal: var(--sky-500);
  --support: var(--sky-400);
  --rule: var(--line-navy);
  --rule-strong: rgb(var(--white-rgb) / 0.28);
  --field-bg: var(--navy-900);
  --field-border: var(--field-navy);
  --focus: var(--blue-300);
  --error-text: var(--rose-400);
  --badge-bg: rgb(var(--white-rgb) / 0.06);
  --badge-fg: var(--blue-300);
  --badge-border: rgb(var(--white-rgb) / 0.10);
  --btn-primary-bg: var(--blue-600);
  --btn-primary-bg-hover: var(--blue-700);
  --btn-primary-fg: var(--white);
  --btn-luxe-bg: var(--white);
  --btn-luxe-fg: var(--navy-950);
  --btn-secondary-border: var(--field-navy);
  --btn-wipe-bg: rgb(var(--white-rgb) / 0.06);
  --btn-wipe-fg: var(--white);
  --eyebrow-line: var(--hairline-gold);
  --topo: var(--topo-ink);
  --icon-chip-bg: rgb(var(--white-rgb) / 0.06);
  --icon-chip-fg: var(--sky-400);
  --card-bg: var(--navy-900);
  --card-border: transparent;
  --card-shadow: var(--shadow-navy);
  --card-shadow-hover: var(--shadow-navy);
  --numeral: var(--sky-400);
  color-scheme: dark;
}
.theme-ink-2, .surface-navy-2 { --bg-fill: var(--navy-900); --bg: var(--navy-900); --card-bg: var(--navy-950); }
.theme-accent { --bg-fill: var(--navy-950) var(--gradient-navy-cta); --topo: var(--topo-accent-band); }