/*
 * Zeno design tokens (shared with ZenoTunnel) — v1.0
 * Source of truth: brand/styleguide.md (mirrored in brand/tokens.json).
 * Fonts: self-hosted via fonts.css (no third-party requests).
 * Theming: light by default; dark follows prefers-color-scheme unless the
 * page sets <html data-theme="light"> or <html data-theme="dark">.
 * Components should only consume the SEMANTIC tokens (--zt-bg, --zt-text,
 * --zt-primary ...), never the raw scale, so dark mode works for free.
 */

:root {
  /* ---------- Raw palette: Tunnel Blue ---------- */
  --zt-blue-50:  #EFF5FF;
  --zt-blue-100: #DCE8FE;
  --zt-blue-200: #BCD3FD;
  --zt-blue-300: #8EB5FB;
  --zt-blue-400: #5A8FF6;
  --zt-blue-500: #2F6BEF;
  --zt-blue-600: #1A52D9; /* brand primary */
  --zt-blue-700: #1642B0;
  --zt-blue-800: #17388C;
  --zt-blue-900: #172F6B;
  --zt-blue-950: #0D1B40;

  /* ---------- Raw palette: Ink & whites ---------- */
  --zt-white:     #FFFFFF;
  --zt-snow:      #F6F8FC; /* off-white 1: page sections */
  --zt-mist:      #EDF1F8; /* off-white 2: wells, code bg (light) */
  --zt-line:      #DDE4EF; /* borders */
  --zt-ink-300:   #A3B1CC;
  --zt-ink-500:   #5B6782; /* secondary text */
  --zt-ink-700:   #3D4A66;
  --zt-ink-900:   #0B1530; /* primary text */
  --zt-night:     #0A1226; /* dark page bg */
  --zt-night-2:   #111C36; /* dark surface */
  --zt-night-3:   #1A2747; /* dark raised / borders */

  /* ---------- Raw palette: Accent — Stream Cyan (use sparingly) ---------- */
  --zt-cyan-300: #67E0F2;
  --zt-cyan-500: #19C3E6;
  --zt-cyan-700: #0E7490; /* the only cyan allowed as text on white */

  /* ---------- Raw palette: semantic hues ---------- */
  --zt-green-700: #15803D;  --zt-green-400: #4ADE80;  --zt-green-50: #ECFDF3;
  --zt-amber-700: #B45309;  --zt-amber-400: #FBBF24;  --zt-amber-50: #FFF8EB;
  --zt-red-700:   #B91C1C;  --zt-red-400:   #F87171;  --zt-red-50:   #FEF2F2;

  /* ---------- Semantic tokens: LIGHT (default) ---------- */
  --zt-bg:              var(--zt-white);
  --zt-bg-subtle:       var(--zt-snow);
  --zt-bg-muted:        var(--zt-mist);
  --zt-bg-inverse:      var(--zt-blue-950);
  --zt-surface:         var(--zt-white);
  --zt-surface-raised:  var(--zt-white);
  --zt-border:          var(--zt-line);
  --zt-border-strong:   #C4CFE0;

  --zt-text:            var(--zt-ink-900);
  --zt-text-secondary:  var(--zt-ink-500);
  --zt-text-inverse:    var(--zt-white);
  --zt-text-link:       var(--zt-blue-600);

  --zt-primary:         var(--zt-blue-600);
  --zt-primary-hover:   var(--zt-blue-700);
  --zt-primary-active:  var(--zt-blue-800);
  --zt-on-primary:      var(--zt-white);
  --zt-primary-soft:    var(--zt-blue-50);
  --zt-on-primary-soft: var(--zt-blue-800);

  --zt-accent:          var(--zt-cyan-500);
  --zt-accent-text:     var(--zt-cyan-700);
  --zt-on-accent:       var(--zt-ink-900);

  --zt-success:         var(--zt-green-700);
  --zt-success-soft:    var(--zt-green-50);
  --zt-warning:         var(--zt-amber-700);
  --zt-warning-soft:    var(--zt-amber-50);
  --zt-danger:          var(--zt-red-700);
  --zt-danger-soft:     var(--zt-red-50);
  --zt-info:            var(--zt-blue-600);
  --zt-info-soft:       var(--zt-blue-50);

  --zt-code-bg:         var(--zt-blue-950);
  --zt-code-text:       #E8EEF9;
  --zt-code-comment:    #8796B5;
  --zt-code-keyword:    var(--zt-blue-300);
  --zt-code-string:     var(--zt-cyan-300);
  --zt-code-number:     #FCD581;
  --zt-inline-code-bg:  var(--zt-mist);

  --zt-focus-ring:      0 0 0 3px rgba(26, 82, 217, 0.35);

  /* ---------- Typography ---------- */
  --zt-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zt-font-text:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zt-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale: 1.250 (major third), base 16px */
  --zt-text-xs:   0.75rem;   /* 12 */
  --zt-text-sm:   0.875rem;  /* 14 */
  --zt-text-base: 1rem;      /* 16 */
  --zt-text-lg:   1.125rem;  /* 18 */
  --zt-text-xl:   1.25rem;   /* 20 */
  --zt-text-2xl:  1.5625rem; /* 25 */
  --zt-text-3xl:  1.953rem;  /* 31 */
  --zt-text-4xl:  2.441rem;  /* 39 */
  --zt-text-5xl:  3.052rem;  /* 49 */
  --zt-text-6xl:  3.815rem;  /* 61 */
  --zt-text-display: clamp(2.441rem, 1.6rem + 3.6vw, 4.5rem);

  --zt-leading-tight: 1.1;
  --zt-leading-snug:  1.3;
  --zt-leading-body:  1.6;
  --zt-tracking-display: -0.025em;
  --zt-tracking-eyebrow:  0.12em;

  --zt-weight-regular:  400;
  --zt-weight-medium:   500;
  --zt-weight-semibold: 600;
  --zt-weight-bold:     700;
  --zt-weight-extrabold:800;

  /* ---------- Spacing (4px base) ---------- */
  --zt-space-0:  0;
  --zt-space-1:  0.25rem; /* 4 */
  --zt-space-2:  0.5rem;  /* 8 */
  --zt-space-3:  0.75rem; /* 12 */
  --zt-space-4:  1rem;    /* 16 */
  --zt-space-5:  1.5rem;  /* 24 */
  --zt-space-6:  2rem;    /* 32 */
  --zt-space-7:  3rem;    /* 48 */
  --zt-space-8:  4rem;    /* 64 */
  --zt-space-9:  6rem;    /* 96 */
  --zt-space-10: 8rem;    /* 128 */

  --zt-container: 72rem;      /* 1152 */
  --zt-container-text: 42rem; /* 672 reading width */
  --zt-gutter: 1rem;          /* phone side gutter */

  /* ---------- Radius ---------- */
  --zt-radius-sm:   6px;
  --zt-radius-md:   10px;
  --zt-radius-lg:   16px;
  --zt-radius-xl:   24px;
  --zt-radius-pill: 999px;

  /* ---------- Shadows (minimal, blue-tinted) ---------- */
  --zt-shadow-none: none;
  --zt-shadow-sm: 0 1px 2px rgba(11, 21, 48, 0.06);
  --zt-shadow-md: 0 1px 2px rgba(11, 21, 48, 0.05), 0 6px 20px -6px rgba(23, 56, 140, 0.14);
  --zt-shadow-lg: 0 2px 4px rgba(11, 21, 48, 0.05), 0 24px 48px -16px rgba(23, 56, 140, 0.22);

  /* ---------- Motion ---------- */
  --zt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --zt-duration-fast: 120ms;
  --zt-duration: 200ms;

  /* ---------- Icons ---------- */
  --zt-icon-stroke: 1.5;
  --zt-icon-sm: 16px;
  --zt-icon-md: 20px;
  --zt-icon-lg: 24px;

  color-scheme: light;
}

/* ---------- Semantic tokens: DARK ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zt-bg:              var(--zt-night);
    --zt-bg-subtle:       #0D1730;
    --zt-bg-muted:        var(--zt-night-2);
    --zt-bg-inverse:      var(--zt-white);
    --zt-surface:         var(--zt-night-2);
    --zt-surface-raised:  var(--zt-night-3);
    --zt-border:          var(--zt-night-3);
    --zt-border-strong:   #2A3A60;

    --zt-text:            #E8EEF9;
    --zt-text-secondary:  var(--zt-ink-300);
    --zt-text-inverse:    var(--zt-ink-900);
    --zt-text-link:       #7EA9FA;

    --zt-primary:         var(--zt-blue-400);
    --zt-primary-hover:   var(--zt-blue-300);
    --zt-primary-active:  var(--zt-blue-200);
    --zt-on-primary:      var(--zt-night);
    --zt-primary-soft:    rgba(90, 143, 246, 0.14);
    --zt-on-primary-soft: var(--zt-blue-200);

    --zt-accent:          var(--zt-cyan-500);
    --zt-accent-text:     var(--zt-cyan-300);
    --zt-on-accent:       var(--zt-night);

    --zt-success:         var(--zt-green-400);
    --zt-success-soft:    rgba(74, 222, 128, 0.12);
    --zt-warning:         var(--zt-amber-400);
    --zt-warning-soft:    rgba(251, 191, 36, 0.12);
    --zt-danger:          var(--zt-red-400);
    --zt-danger-soft:     rgba(248, 113, 113, 0.12);
    --zt-info:            #7EA9FA;
    --zt-info-soft:       rgba(126, 169, 250, 0.12);

    --zt-code-bg:         #060C1C;
    --zt-inline-code-bg:  var(--zt-night-3);

    --zt-focus-ring:      0 0 0 3px rgba(126, 169, 250, 0.45);
    --zt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --zt-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --zt-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --zt-bg:              var(--zt-night);
  --zt-bg-subtle:       #0D1730;
  --zt-bg-muted:        var(--zt-night-2);
  --zt-bg-inverse:      var(--zt-white);
  --zt-surface:         var(--zt-night-2);
  --zt-surface-raised:  var(--zt-night-3);
  --zt-border:          var(--zt-night-3);
  --zt-border-strong:   #2A3A60;

  --zt-text:            #E8EEF9;
  --zt-text-secondary:  var(--zt-ink-300);
  --zt-text-inverse:    var(--zt-ink-900);
  --zt-text-link:       #7EA9FA;

  --zt-primary:         var(--zt-blue-400);
  --zt-primary-hover:   var(--zt-blue-300);
  --zt-primary-active:  var(--zt-blue-200);
  --zt-on-primary:      var(--zt-night);
  --zt-primary-soft:    rgba(90, 143, 246, 0.14);
  --zt-on-primary-soft: var(--zt-blue-200);

  --zt-accent:          var(--zt-cyan-500);
  --zt-accent-text:     var(--zt-cyan-300);
  --zt-on-accent:       var(--zt-night);

  --zt-success:         var(--zt-green-400);
  --zt-success-soft:    rgba(74, 222, 128, 0.12);
  --zt-warning:         var(--zt-amber-400);
  --zt-warning-soft:    rgba(251, 191, 36, 0.12);
  --zt-danger:          var(--zt-red-400);
  --zt-danger-soft:     rgba(248, 113, 113, 0.12);
  --zt-info:            #7EA9FA;
  --zt-info-soft:       rgba(126, 169, 250, 0.12);

  --zt-code-bg:         #060C1C;
  --zt-inline-code-bg:  var(--zt-night-3);

  --zt-focus-ring:      0 0 0 3px rgba(126, 169, 250, 0.45);
  --zt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --zt-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --zt-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }