/* =============================================================
   Nunatak Design System — Core Tokens
   Colors, type, spacing, radii, shadows, motion.
   ============================================================= */

/* -------------------------------------------------------------
   TYPE — HK Grotesk (Hanken Design Co.)
   Local files in assets/fonts/. Fallback: Hanken Grotesk (Google).
   ------------------------------------------------------------- */
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("../fonts/HKGrotesk-Thin.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("../fonts/HKGrotesk-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/HKGrotesk-Light.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/HKGrotesk-Regular.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/HKGrotesk-Italic.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/HKGrotesk-Medium.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/HKGrotesk-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/HKGrotesk-Bold.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/HKGrotesk-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/HKGrotesk-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "HK Grotesk"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/HKGrotesk-Black.ttf") format("truetype"); }

:root {
  /* ======================= CORE PALETTE =============================== */
  --nk-anthracite:       #363E48;
  --nk-mint:             #B0CECB;
  --nk-pink:             #FA928C;

  --nk-anthracite-950:   #14181D;
  --nk-anthracite-900:   #1E242C;
  --nk-anthracite-800:   #282F38;
  --nk-anthracite-700:   #363E48;
  --nk-anthracite-600:   #4A535F;
  --nk-anthracite-500:   #64707D;
  --nk-anthracite-400:   #8B95A1;
  --nk-anthracite-300:   #B4BBC4;
  --nk-anthracite-200:   #D5DADF;
  --nk-anthracite-100:   #E8EBEE;
  --nk-anthracite-050:   #F4F5F7;

  --nk-mint-900:  #446664;
  --nk-mint-700:  #6B9692;
  --nk-mint-500:  #8FB6B2;
  --nk-mint-400:  #B0CECB;
  --nk-mint-300:  #C4DBD9;
  --nk-mint-200:  #D9E8E6;
  --nk-mint-100:  #EBF3F2;
  --nk-mint-050:  #F5F9F8;

  --nk-pink-900:  #8F403D;
  --nk-pink-700:  #D06963;
  --nk-pink-500:  #FA928C;
  --nk-pink-400:  #FCAAA5;
  --nk-pink-300:  #FDC3BF;
  --nk-pink-200:  #FEDCD9;
  --nk-pink-100:  #FEEAE8;
  --nk-pink-050:  #FFF5F3;

  --nk-white:     #FFFFFF;
  --nk-paper:     #FAFAFA;
  --nk-fog:       #F4F5F7;
  --nk-line:      #E2E5EA;
  --nk-line-soft: #EDEFF2;

  --nk-success:   #6FB39A;
  --nk-warning:   #E8B457;
  --nk-danger:    #E56B6F;
  --nk-info:      #7A9ABF;

  /* ======================= SEMANTIC TOKENS ============================ */
  --fg-1:          var(--nk-anthracite-900);
  --fg-2:          var(--nk-anthracite-600);
  --fg-3:          var(--nk-anthracite-500);
  --fg-muted:      var(--nk-anthracite-400);
  --fg-inverse:    var(--nk-white);
  --fg-accent:     var(--nk-anthracite-700);
  --fg-on-mint:    var(--nk-anthracite-900);
  --fg-on-dark:    var(--nk-white);

  --bg-canvas:     var(--nk-paper);
  --bg-surface:    var(--nk-white);
  --bg-subtle:     var(--nk-fog);
  --bg-inverse:    var(--nk-anthracite-900);
  --bg-brand:      var(--nk-anthracite-700);
  --bg-accent:     var(--nk-mint-400);
  --bg-accent-soft:var(--nk-mint-100);
  --bg-highlight:  var(--nk-pink-500);
  --bg-highlight-soft: var(--nk-pink-100);

  --border-1:      var(--nk-line);
  --border-2:      var(--nk-line-soft);
  --border-strong: var(--nk-anthracite-300);
  --border-brand:  var(--nk-anthracite-700);
  --border-focus:  var(--nk-mint-700);

  /* ======================= TYPOGRAPHY ================================= */
  --font-sans:    "HK Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fw-thin:       100;
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  4rem;
  --fs-6xl:  5.5rem;
  --fs-hero: 7.5rem;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-base:    1.45;
  --lh-relaxed: 1.6;

  --ls-display:  0.02em;
  --ls-eyebrow:  0.22em;
  --ls-label:    0.08em;
  --ls-body:     0;

  /* ======================= SPACING / RADIUS / SHADOW ================== */
  --sp-0: 0;  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  --sp-8: 4rem; --sp-9: 6rem;  --sp-10: 8rem;

  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20,24,29,0.04), 0 1px 1px rgba(20,24,29,0.03);
  --shadow-2: 0 4px 12px rgba(20,24,29,0.06), 0 1px 2px rgba(20,24,29,0.04);
  --shadow-3: 0 12px 32px rgba(20,24,29,0.10), 0 2px 6px rgba(20,24,29,0.05);
  --shadow-4: 0 28px 60px rgba(20,24,29,0.18);
  --shadow-mint: 0 12px 32px rgba(107,150,146,0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  240ms;
  --dur-slow: 480ms;

  /* ======================= SEMANTIC ALIASES =========================== */
  --accent:      var(--nk-mint-700);    /* #6B9692 — primary interactive accent */
  --accent-s:    var(--nk-mint-500);    /* #8FB6B2 — hover / softer accent */
  --mint:        var(--nk-mint);        /* #B0CECB */
  --mint-soft:   var(--nk-mint-100);    /* #EBF3F2 */
  --anthracite:  var(--nk-anthracite);  /* #363E48 */
  --font-ui:     var(--font-sans);

  --bg:          var(--nk-mint-050);
  --bg-warm:     var(--nk-paper);
  --bg-card:     var(--nk-white);
  --bg-glass:    rgba(255,255,255,0.88);
  --bg-glass-s:  rgba(255,255,255,0.60);
  --fg:          var(--nk-anthracite-900);
  --fg-mid:      var(--nk-anthracite-500);
  --fg-dim:      var(--nk-anthracite-400);
  --line:        var(--nk-line);
  --line-s:      var(--nk-line-soft);
  --nav-h:       64px;
  --red:         var(--nk-danger);
  --ink:         var(--nk-anthracite-950);
  --fg-d:        var(--nk-anthracite-900);
  --fg-mid-d:    var(--nk-anthracite-500);
  --fg-dim-d:    var(--nk-anthracite-400);

  /* Stage video overlay — tints the background video for readability */
  --stage-overlay-from:    rgba(245,249,248,0.72);
  --stage-overlay-mid:     rgba(245,249,248,0.48);
  --stage-overlay-to:      rgba(245,249,248,0.82);
  --stage-overlay-side:    rgba(245,249,248,0.75);
  --stage-overlay-edge:    rgba(245,249,248,0.44);
  --stage-overlay-far:     rgba(245,249,248,0.20);
  --stage-overlay-radial:  rgba(245,249,248,0.30);

  /* Interactive button surfaces */
  --btn-primary-bg:         var(--nk-anthracite);
  --btn-primary-fg:         var(--nk-white);
  --btn-primary-bg-hover:   var(--nk-anthracite-950);
  --btn-secondary-hover-bg: var(--nk-anthracite);
  --btn-secondary-hover-fg: var(--nk-white);

  /* Grid overlay line for patterned backgrounds */
  --grid-line:              rgba(54,62,72,0.04);

  /* Team photo card gradients */
  --team-photo-1: linear-gradient(135deg, #d4e8e6 0%, #bfd8d6 100%);
  --team-photo-2: linear-gradient(135deg, #d8d4e8 0%, #cbbfd8 100%);
  --team-photo-3: linear-gradient(135deg, #d4d8e8 0%, #bfc4d8 100%);
  --team-photo-4: linear-gradient(135deg, #e8e0d4 0%, #d8cfbf 100%);
  --team-initials-color: rgba(54,62,72,0.18);

  /* Finish overlay end-stop */
  --finish-bg-end: rgba(245,249,248,0.96);
}

/* =============================================================
   Dark theme overrides — set data-theme="dark" on <html>
   ============================================================= */
[data-theme="dark"] {
  --bg:          var(--nk-anthracite-950);
  --bg-warm:     var(--nk-anthracite-800);
  --bg-card:     var(--nk-anthracite-800);
  --bg-glass:    rgba(40, 47, 56, 0.88);
  --bg-glass-s:  rgba(40, 47, 56, 0.65);

  --fg:          var(--nk-anthracite-050);
  --fg-mid:      var(--nk-anthracite-300);
  --fg-dim:      var(--nk-anthracite-400);
  --fg-1:        var(--nk-anthracite-050);
  --fg-2:        var(--nk-anthracite-300);
  --fg-3:        var(--nk-anthracite-400);
  --fg-muted:    var(--nk-anthracite-500);

  --line:        rgba(255,255,255,0.08);
  --line-s:      rgba(255,255,255,0.05);

  --accent:      var(--nk-mint-400);
  --accent-s:    var(--nk-mint-300);
  --mint:        var(--nk-mint-400);
  --mint-soft:   rgba(176,206,203,0.10);

  /* In dark mode anthracite is used as a foreground tint → near-white */
  --anthracite:  var(--nk-anthracite-050);

  /* Stage video overlay — darker tint for dark backgrounds */
  --stage-overlay-from:    rgba(10,13,16,0.72);
  --stage-overlay-mid:     rgba(10,13,16,0.40);
  --stage-overlay-to:      rgba(10,13,16,0.82);
  --stage-overlay-side:    rgba(10,13,16,0.75);
  --stage-overlay-edge:    rgba(10,13,16,0.38);
  --stage-overlay-far:     rgba(10,13,16,0.15);
  --stage-overlay-radial:  rgba(10,13,16,0.25);

  /* Dashboard / journey text tokens adapt for dark bg */
  --fg-d:        var(--nk-anthracite-050);
  --fg-mid-d:    var(--nk-anthracite-300);
  --fg-dim-d:    var(--nk-anthracite-500);

  /* Interactive button surfaces — accent-coloured on dark backgrounds */
  --btn-primary-bg:         var(--nk-mint-400);
  --btn-primary-fg:         var(--nk-anthracite-950);
  --btn-primary-bg-hover:   var(--nk-mint-300);
  --btn-secondary-hover-bg: var(--nk-mint-400);
  --btn-secondary-hover-fg: var(--nk-anthracite-950);

  /* Grid overlay line for patterned backgrounds */
  --grid-line:              rgba(255,255,255,0.04);

  /* Team photo card gradients (dark tonal backgrounds) */
  --team-photo-1: linear-gradient(135deg, #1e3a38 0%, #0f2423 100%);
  --team-photo-2: linear-gradient(135deg, #2a1e3a 0%, #180f24 100%);
  --team-photo-3: linear-gradient(135deg, #1e2a3a 0%, #0f1824 100%);
  --team-photo-4: linear-gradient(135deg, #3a2a1e 0%, #241a0f 100%);
  --team-initials-color: rgba(176,206,203,0.25);

  /* Finish overlay end-stop */
  --finish-bg-end: rgba(10,13,16,0.96);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.15);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-4: 0 28px 60px rgba(0,0,0,0.55);
}

/* =============================================================
   Semantic typography utility classes
   ============================================================= */
.nk-display, .nk-h0 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 7vw, var(--fs-hero));
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: var(--fg-1); text-transform: uppercase;
}
.nk-h1 {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(2.25rem, 4.5vw, var(--fs-5xl));
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg-1);
}
.nk-h2 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(1.75rem, 3vw, var(--fs-3xl));
  line-height: var(--lh-snug); color: var(--fg-1);
}
.nk-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xs);
  line-height: 1; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-2);
}
.nk-body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-md); line-height: var(--lh-base); color: var(--fg-1);
}