/* ============================================================
   Saadat.Online — Tokens v2
   Terminal-but-professional. Keep Exo 2, dark navy, single teal.
   ============================================================ */

:root {
  /* --- Type --- */
  --font-sans: "Exo 2", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;

  /* --- Type scale --- */
  --fs-xs:    0.6875rem;  /* 11 — mono caps */
  --fs-sm:    0.8125rem;  /* 13 */
  --fs-base:  0.9375rem;  /* 15 */
  --fs-lg:    1.125rem;   /* 18 */
  --fs-xl:    1.375rem;   /* 22 */
  --fs-2xl:   1.75rem;    /* 28 */
  --fs-3xl:   2.5rem;     /* 40 */
  --fs-4xl:   3.5rem;     /* 56 */
  --fs-5xl:   5rem;       /* 80 */
  --fs-6xl:   7rem;       /* 112 */

  --lh-tight: 1.0;
  --lh-snug:  1.15;
  --lh-norm:  1.55;
  --tracking-mono: 0.08em;
  --tracking-tight: -0.02em;

  /* --- Spacing --- */
  --s-1:  4px; --s-2:  8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 144px;

  /* --- Radius — flat. Terminals don't have rounded corners. --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  --d-fast: 120ms;
  --d-base: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Single accent: Teal-cyan, kept from current site --- */
  --teal-light: oklch(0.86 0.12 175);
  --teal:       oklch(0.78 0.13 178);   /* base — same as #5eead4-ish */
  --teal-deep:  oklch(0.62 0.13 188);
  --teal-ink:   oklch(0.40 0.10 195);

  /* --- Spot color (rare, warning-light only) — warm amber, not red --- */
  --amber:      oklch(0.78 0.14 65);
  --amber-deep: oklch(0.62 0.15 55);

  /* Warning/positive — only for system messaging */
  --positive: oklch(0.78 0.14 165);
  --critical: oklch(0.65 0.18 25);
}

/* ============================================================
   DARK — home base. Tinted near-black with a hint of teal-blue
   (borrowed move: bg-isn't-pure-black). Pale celadon text
   instead of pure white = less harsh on the eye.
   ============================================================ */
:root,
[data-theme="dark"] {
  --bg:           oklch(0.16 0.020 215);   /* deep tinted near-black, teal undertone */
  --bg-deep:     oklch(0.13 0.018 215);
  --bg-raised:   oklch(0.20 0.022 215);
  --surface:     oklch(0.18 0.020 215);
  --surface-2:   oklch(0.22 0.022 215);

  --text:        oklch(0.92 0.014 195);   /* pale celadon-leaning */
  --text-muted:  oklch(0.72 0.018 200);
  --text-dim:    oklch(0.52 0.018 210);
  --text-faint:  oklch(0.36 0.020 215);

  --rule:        oklch(0.28 0.022 210);
  --rule-bright: oklch(0.42 0.030 200);

  --accent:      var(--teal);
  --accent-soft: oklch(0.30 0.06 195);
  --on-accent:   oklch(0.12 0.02 215);

  --spot:        var(--amber);            /* warm amber for rare warning-light moments */

  --grid-line:   oklch(0.78 0.13 178 / 0.06);

  --shadow-md:   0 1px 0 oklch(1 0 0 / 0.04) inset, 0 8px 24px oklch(0 0 0 / 0.4);
}

/* ============================================================
   LIGHT — "Graph Paper". Warm green-leaning cream, deep
   forest-ink text (subtle nod to Sevastolink's #0C290C),
   the same teal accent darkened so it carries on the paper.
   The light theme has personality on its own — not just
   inverted dark.
   ============================================================ */
[data-theme="light"] {
  --bg:           oklch(0.965 0.014 110);   /* warm cream, slight green-yellow lean */
  --bg-deep:     oklch(0.935 0.016 110);
  --bg-raised:   oklch(0.985 0.010 105);
  --surface:     oklch(0.965 0.014 110);
  --surface-2:   oklch(0.935 0.016 110);

  --text:        oklch(0.22 0.030 165);     /* deep forest ink — hint of green */
  --text-muted:  oklch(0.42 0.025 170);
  --text-dim:    oklch(0.55 0.020 175);
  --text-faint:  oklch(0.72 0.014 175);

  --rule:        oklch(0.85 0.014 165);     /* celadon-grey rules */
  --rule-bright: oklch(0.68 0.020 175);

  --accent:      var(--teal-deep);
  --accent-soft: oklch(0.92 0.04 195);
  --on-accent:   oklch(0.99 0.005 105);     /* warm white on accent */

  --spot:        var(--amber-deep);

  --grid-line:   oklch(0.40 0.10 175 / 0.08);

  --shadow-md:   0 1px 0 oklch(0 0 0 / 0.04) inset, 0 8px 24px oklch(0.20 0.02 175 / 0.10);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:           oklch(0.965 0.014 110);
    --bg-deep:     oklch(0.935 0.016 110);
    --bg-raised:   oklch(0.985 0.010 105);
    --surface:     oklch(0.965 0.014 110);
    --surface-2:   oklch(0.935 0.016 110);
    --text:        oklch(0.22 0.030 165);
    --text-muted:  oklch(0.42 0.025 170);
    --text-dim:    oklch(0.55 0.020 175);
    --text-faint:  oklch(0.72 0.014 175);
    --rule:        oklch(0.85 0.014 165);
    --rule-bright: oklch(0.68 0.020 175);
    --accent:      var(--teal-deep);
    --accent-soft: oklch(0.92 0.04 195);
    --on-accent:   oklch(0.99 0.005 105);
    --spot:        var(--amber-deep);
    --grid-line:   oklch(0.40 0.10 175 / 0.08);
  }
}