/* =========================================================
   init-S — Design Tokens
   Tech/CLI direction · JetBrains Mono + Inter
   Auto dark/light via prefers-color-scheme + manual override
   ========================================================= */

:root {
  /* Type */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.375rem;  /* 22 */
  --fs-xl:    1.75rem;   /* 28 */
  --fs-2xl:   2.25rem;   /* 36 */
  --fs-3xl:   3rem;      /* 48 */
  --fs-4xl:   4rem;      /* 64 */
  --fs-5xl:   5.5rem;    /* 88 */

  /* Spacing */
  --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;

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Layout */
  --container: 1240px;
  --nav-h: 64px;

  /* Motion */
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Dark theme (default for tech/terminal feel) ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #07101e;     /* deep navy */
  --bg-elev:      #0c1830;     /* cards */
  --bg-elev-2:    #122244;     /* hover / inset */
  --bg-grid:      #0a1628;
  --surface-code: #050b16;     /* terminal interior */

  --line:         #1e2f52;
  --line-strong:  #2b4275;

  --fg:           #e6edf7;
  --fg-mute:      #9aabc7;
  --fg-dim:       #6c7e9e;

  --accent:       #22c55e;     /* terminal green */
  --accent-glow:  #22c55e44;
  --accent-soft:  #16341f;

  --signal-blue:  #60a5fa;
  --signal-amber: #fbbf24;
  --signal-red:   #ef4444;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);

  --grid-line: rgba(34, 197, 94, 0.05);
}

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:           #fbfcfe;
  --bg-elev:      #ffffff;
  --bg-elev-2:    #f1f5f9;
  --bg-grid:      #f7f9fc;
  --surface-code: #0a1628;     /* terminal stays dark in light mode for contrast */

  --line:         #e2e8f0;
  --line-strong:  #cbd5e1;

  --fg:           #0a1628;
  --fg-mute:      #475569;
  --fg-dim:       #64748b;

  --accent:       #16a34a;     /* slightly darker green for AA contrast on white */
  --accent-glow:  #16a34a33;
  --accent-soft:  #dcfce7;

  --signal-blue:  #2563eb;
  --signal-amber: #d97706;
  --signal-red:   #dc2626;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .12), 0 6px 18px rgba(15, 23, 42, .06);

  --grid-line: rgba(10, 22, 40, 0.04);
}

/* ---------- Auto: follow system when no manual override ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:           #fbfcfe;
    --bg-elev:      #ffffff;
    --bg-elev-2:    #f1f5f9;
    --bg-grid:      #f7f9fc;
    --surface-code: #0a1628;
    --line:         #e2e8f0;
    --line-strong:  #cbd5e1;
    --fg:           #0a1628;
    --fg-mute:      #475569;
    --fg-dim:       #64748b;
    --accent:       #16a34a;
    --accent-glow:  #16a34a33;
    --accent-soft:  #dcfce7;
    --signal-blue:  #2563eb;
    --signal-amber: #d97706;
    --signal-red:   #dc2626;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .12), 0 6px 18px rgba(15, 23, 42, .06);
    --grid-line: rgba(10, 22, 40, 0.04);
  }
}