/* ==========================================================================
   EOTnxt — Design tokens (ported from _ds/eotnxt-design-system.../tokens/*.css)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Brand: vivid blue -------------------------------------------------- */
  --blue-50:  #eef2ff;
  --blue-100: #dbe3fe;
  --blue-200: #b8c7fc;
  --blue-300: #8ea6fa;
  --blue-400: #6b85f9;
  --blue-500: #4a6cf7;
  --blue-600: #3a5ce8;
  --blue-700: #2f49c4;
  --blue-800: #26399b;

  /* --- Brand: deep navy (logo duo-tone dark) ------------------------------ */
  --navy-900: #0c1745;
  --navy-800: #131f57;

  /* --- Ink (near-black neutrals) ----------------------------------------- */
  --ink-950: #060606;
  --ink-900: #0a0a0a;
  --ink-800: #141414;
  --ink-700: #1c1c1c;
  --ink-600: #2a2a2a;

  /* --- Gray ramp --------------------------------------------------------- */
  --gray-900: #111111;
  --gray-800: #2b2b2b;
  --gray-700: #454545;
  --gray-600: #626262;
  --gray-500: #7c7c7c;
  --gray-400: #9a9a9a;
  --gray-300: #c2c1bd;
  --gray-200: #d9d8d4;
  --gray-100: #e6e5e1;

  /* --- Paper (warm light surfaces) --------------------------------------- */
  --paper:      #ececea;
  --paper-card: #f4f3f1;
  --paper-sunk: #e4e3e0;
  --white:      #ffffff;

  /* --- Semantic status ---------------------------------------------------- */
  --success: #17b26a;
  --warning: #f79009;
  --danger:  #f04438;

  /* --- Semantic aliases — default (LIGHT) theme --------------------------- */
  --surface-page:    var(--paper);
  --surface-card:    var(--paper-card);
  --surface-sunk:    var(--paper-sunk);
  --surface-invert:  var(--ink-900);

  --text-strong:  var(--gray-900);
  --text-body:    var(--gray-700);
  --text-muted:   var(--gray-500);
  --text-faint:   var(--gray-400);
  --text-invert:  var(--white);

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-contrast: var(--white);

  --border-subtle: rgba(17,17,17,0.10);
  --border-strong: rgba(17,17,17,0.22);
  --border-dashed: rgba(17,17,17,0.14);

  --guide-line:   rgba(17,17,17,0.07);

  /* --- Fonts --------------------------------------------------------------- */
  --font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --fs-display:  clamp(3.5rem, 7vw, 6.5rem);
  --fs-h1:       clamp(2.75rem, 5vw, 4.5rem);
  --fs-h2:       clamp(2rem, 3.4vw, 3rem);
  --fs-h3:       clamp(1.5rem, 2vw, 2rem);
  --fs-h4:       1.375rem;
  --fs-lead:     clamp(1.25rem, 1.6vw, 1.625rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.9375rem;
  --fs-label:    0.75rem;
  --fs-micro:    0.6875rem;
  --fs-nav:      0.9rem;

  --lh-tight:   0.98;
  --lh-snug:    1.08;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-label:   0.14em;
  --ls-wide:    0.06em;

  /* --- Spacing (4px base) -------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

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

  --border-w:      1px;
  --border-w-thick: 2px;

  --container:      1440px;
  --container-wide: 1680px;
  --gutter:  clamp(1.25rem, 4vw, 5rem);
  --col-gap: 1.5rem;

  /* --- Effects -------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(10,10,10,0.05);
  --shadow-md:  0 8px 24px rgba(10,10,10,0.08);
  --shadow-lg:  0 24px 60px rgba(10,10,10,0.14);
  --shadow-accent: 0 12px 40px rgba(74,108,247,0.28);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.16s;
  --dur-base:   0.28s;
  --dur-slow:   0.5s;
  --dur-marquee: 32s;

  --focus-ring: 0 0 0 3px rgba(74,108,247,0.35);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   DARK theme — apply [data-theme="dark"] on any scope (page or section)
   ========================================================================== */
[data-theme="dark"] {
  --surface-page:    var(--ink-900);
  --surface-card:    var(--ink-800);
  --surface-sunk:    var(--ink-700);
  --surface-invert:  var(--paper);

  --text-strong:  #f5f5f3;
  --text-body:    #b9b9b6;
  --text-muted:   #8a8a87;
  --text-faint:   #6a6a67;
  --text-invert:  var(--ink-900);

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-400);
  --accent-contrast: var(--white);

  --border-subtle: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.22);
  --border-dashed: rgba(255,255,255,0.13);

  --guide-line:   rgba(255,255,255,0.06);
}

/* Grain overlay helper */
.eot-grain { position: relative; }
.eot-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.035;
  mix-blend-mode: multiply;
  pointer-events: none;
}
[data-theme="dark"] .eot-grain::after { mix-blend-mode: screen; opacity: 0.05; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}