/*
 * ════════════════════════════════════════════════════════════
 *  WAVE DIGITAL — design tokens
 *  v2.0 · Mosaic identity, slab type, spectrum palette
 * ════════════════════════════════════════════════════════════
 */

:root {
  /* ── SPECTRUM PALETTE (dal logo, sx → dx) ───────────── */
  --c-cobalt: #1E3A8A;
  --c-blue:   #2563EB;
  --c-sky:    #0EA5E9;
  --c-cyan:   #06B6D4;
  --c-teal:   #14B8A6;
  --c-lime:   #84CC16;
  --c-amber:  #FACC15;
  --c-orange: #F97316;
  --c-rose:   #F43F5E;
  --c-violet: #A855F7;

  --c-cobalt-soft: oklch(38% 0.13 264 / 0.14);
  --c-blue-soft:   oklch(55% 0.20 260 / 0.14);
  --c-orange-soft: oklch(72% 0.18 50  / 0.16);
  --c-violet-soft: oklch(65% 0.22 305 / 0.14);

  /* ── INK & PAPER (LIGHT, default) · pure neutral greys ─ */
  --bg:        #FAFAFA;            /* near-white page */
  --bg-2:      #EFEFF0;            /* alt section grey */
  --bg-elev:   #FFFFFF;            /* card elevated */
  --bg-elev-2: #FFFFFF;
  --bg-inverse:#0E0E10;            /* neutral near-black */

  --ink:    #141416;              /* near-black, hueless */
  --ink-2:  #38383C;
  --ink-3:  #6B6B71;
  --ink-4:  #9A9AA1;
  --ink-on-color: #FFFFFF;
  --ink-on-paper: #141416;

  /* elegant colored "feature" section (used sparingly) */
  --bg-feature:     var(--c-cobalt);
  --ink-on-feature: #FAFAFA;

  --rule:        rgba(20, 20, 22, 0.08);
  --rule-2:      rgba(20, 20, 22, 0.16);
  --rule-strong: rgba(20, 20, 22, 0.30);

  /* ── BRAND ROLES ────────────────────────────────────── */
  --accent:        var(--c-blue);
  --accent-deep:   var(--c-cobalt);
  --accent-warm:   var(--c-orange);
  --accent-soft:   var(--c-blue-soft);
  --accent-ink:    #FFFFFF;
  --accent-glow:   oklch(60% 0.22 260 / 0.45);

  /* status */
  --positive: var(--c-lime);
  --warning:  var(--c-amber);
  --negative: var(--c-rose);
  --info:     var(--c-sky);

  /* ── TYPOGRAPHY ─────────────────────────────────────── */
  --font-display: 'Roboto Slab', 'Zilla Slab', ui-serif, Georgia, serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* fluid scale */
  --fs-display: clamp(4.5rem, 12vw, 11rem);
  --fs-hero:    clamp(3.25rem, 8vw, 7.5rem);
  --fs-h1:      clamp(2.5rem, 5.5vw, 5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 2.4vw, 2rem);
  --fs-h4:      1.125rem;
  --fs-lede:    clamp(1.125rem, 1.6vw, 1.4rem);
  --fs-body-lg: 1.1875rem;
  --fs-body:    1rem;
  --fs-14:      0.875rem;
  --fs-13:      0.8125rem;
  --fs-12:      0.75rem;
  --fs-11:      0.6875rem;

  /* letter-spacing */
  --ls-tightest: -0.045em;
  --ls-tight:    -0.025em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;

  --lh-tight: 0.94;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* ── SPACING (4-based) ──────────────────────────────── */
  --s-0:  0;
  --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:  1.75rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  /* page rhythm */
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --container: 1400px;

  /* ── RADII ──────────────────────────────────────────── */
  --r-0:    0px;
  --r-2:    2px;
  --r-4:    4px;
  --r-6:    6px;
  --r-8:    8px;
  --r-12:   12px;
  --r-16:   16px;
  --r-24:   24px;
  --r-full: 999px;

  /* ── BORDER ─────────────────────────────────────────── */
  --border-w: 1px;
  --border-strong: 1.5px;

  /* ── SHADOWS ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(20,20,22,.06);
  --shadow-sm: 0 2px 8px rgba(20,20,22,.08);
  --shadow-md: 0 8px 24px rgba(20,20,22,.10);
  --shadow-lg: 0 20px 60px rgba(20,20,22,.16);
  --shadow-xl: 0 30px 80px rgba(20,20,22,.22);
  --shadow-cell: 0 0 0 1px rgba(20,20,22,.06), 0 6px 18px rgba(20,20,22,.06);
  --shadow-glow: 0 12px 40px var(--accent-glow);

  /* ── MOTION ─────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
  --dur-5: 800ms;
  --dur-6: 1200ms;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap:   cubic-bezier(.7, -.2, .2, 1.4);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);

  /* ── Z-INDEX ────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-cursor:  9999;
}

/* ── DARK THEME · pure neutral ───────────────────────── */
[data-theme="dark"] {
  --bg:        #0E0E10;
  --bg-2:      #141416;
  --bg-elev:   #1A1A1D;
  --bg-elev-2: #242428;
  --bg-inverse:#FAFAFA;

  --ink:   #F2F2F3;
  --ink-2: #C9C9CE;
  --ink-3: #8C8C93;
  --ink-4: #5A5A60;
  --ink-on-paper: #F2F2F3;

  --bg-feature:     var(--c-cobalt);
  --ink-on-feature: #FAFAFA;

  --rule:        rgba(255, 255, 255, 0.08);
  --rule-2:      rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.28);

  --accent:      var(--c-sky);
  --accent-deep: var(--c-cyan);
  --accent-warm: var(--c-amber);
  --accent-glow: oklch(80% 0.16 220 / 0.4);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  --shadow-cell: 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.3);
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--c-amber); color: #141416; }

/* ── SKIP LINK · keyboard a11y ───────────────────────── */
.w-skip {
  position: fixed; top: 0; left: 0; z-index: 9999;
  transform: translateY(-140%);
  background: var(--ink); color: var(--bg);
  padding: 12px 20px; border-radius: 0 0 var(--r-8) 0;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-14);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.w-skip:focus { transform: translateY(0); outline: 2px solid var(--c-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ .w-skip { transition: none; } }

/* ── BASE TEXT UTILITIES ─────────────────────────────── */
.t-display, .t-hero, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); font-weight: 800; }
.t-hero    { font-size: var(--fs-hero);    line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); font-weight: 800; }
.t-h1      { font-size: var(--fs-h1);      letter-spacing: var(--ls-tight); }
.t-h2      { font-size: var(--fs-h2); }
.t-h3      { font-size: var(--fs-h3); }
.t-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

.t-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-2); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin: 0; }
.t-caption { font-size: var(--fs-13); color: var(--ink-3); line-height: 1.4; }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-block;
}

.t-mono { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--ink-2); }

.text-ink   { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-ink-4 { color: var(--ink-4); }
.text-accent { color: var(--accent); }
.text-warm   { color: var(--accent-warm); }

/* italic accent inside display titles → uses slab italic (Roboto Slab supports it) */
.t-display em, .t-hero em, .t-h1 em, .t-h2 em, .t-h3 em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-warm);
}

/* ── LAYOUT PRIMITIVES ───────────────────────────────── */
.ds-section { padding: var(--section-y) 0; position: relative; }
.ds-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── MOBILE: raise the smallest UI text so nothing renders below 16px ── */
@media (max-width: 640px) {
  :root {
    --fs-11:      1rem;       /* 11 → 16 */
    --fs-12:      1rem;       /* 12 → 16 */
    --fs-13:      1rem;       /* 13 → 16 */
    --fs-14:      1.0625rem;  /* 14 → 17 */
    --fs-body:    1.0625rem;  /* 16 → 17 */
    --fs-body-lg: 1.1875rem;  /* 19 (unchanged) */
    --fs-h4:      1.25rem;    /* keep above body */
  }
}