/* ═══════════════════════════════════════════════════════════════════
   SOKO — Design Tokens
   -------------------------------------------------------------------
   Navy-tinted dark palette. NOT flat gray — every surface has a cool
   blue undertone that reads "designed" instead of "default dark mode."

   Depth hierarchy (6 layers):
     bg-0 → bg-1 → surface-1 → surface-2 → surface-3 → elevated
   each slightly lighter + slightly bluer.

   Primary accents are GRADIENTS (sky → indigo), not flat colors.
   Shadows are TINTED with the source element's hue, not pure black.
   Background has a fixed ambient glow behind all content.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces (deepest → brightest) ───────────────────────────── */
  --bg-0:          #0a0f1c;   /* body base: deep navy-black */
  --bg-1:          #0f1524;   /* page background layer 2 */
  --surface-1:     #151c2e;   /* standard card */
  --surface-2:     #1c2540;   /* elevated card, modal */
  --surface-3:     #243050;   /* hover states */
  --surface-glass: rgba(21, 28, 46, 0.72);  /* for glass cards w/ blur */

  /* Tinted for inputs and subtle panels */
  --input-bg:      #0b1120;
  --input-bg-hov:  #111a2d;

  /* ── Borders ──────────────────────────────────────────────────── */
  /* Blue-purple tint — NOT rgba(255,255,255,X). This is the single
     biggest "cheap dark mode vs designed dark mode" tell. */
  --border-subtle: rgba(129, 140, 248, 0.08);
  --border:        rgba(129, 140, 248, 0.14);
  --border-strong: rgba(129, 140, 248, 0.24);
  --border-focus:  rgba(56, 189, 248, 0.55);

  /* ── Text ─────────────────────────────────────────────────────── */
  --text:          #f1f5f9;   /* primary */
  --text-soft:     #cbd5e1;   /* secondary */
  --text-muted:    #94a3b8;   /* captions, labels */
  --text-dim:      #64748b;   /* placeholders, disabled */
  --text-onaccent: #ffffff;

  /* ── Accents ──────────────────────────────────────────────────── */
  --accent:        #38bdf8;   /* sky-400 */
  --accent-2:      #818cf8;   /* indigo-400 */
  --accent-hi:     #7dd3fc;   /* sky-300 — for links/hover */
  --accent-lo:     #0369a1;   /* sky-700 — gradient dark end */

  --accent-grad:       linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --accent-grad-hover: linear-gradient(135deg, #7dd3fc 0%, #a5b4fc 100%);
  --accent-grad-deep:  linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);

  /* ── Semantic colors ──────────────────────────────────────────── */
  --success:       #34d399;
  --success-lo:    rgba(52, 211, 153, 0.12);
  --success-grad:  linear-gradient(135deg, #34d399 0%, #10b981 100%);

  --warning:       #fbbf24;   /* "safety yellow" — construction feel */
  --warning-lo:    rgba(251, 191, 36, 0.12);
  --warning-grad:  linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);

  --danger:        #fb7185;   /* softer rose, not harsh red */
  --danger-lo:     rgba(251, 113, 133, 0.12);
  --danger-grad:   linear-gradient(135deg, #fb7185 0%, #e11d48 100%);

  --info:          #a5b4fc;
  --info-lo:       rgba(165, 180, 252, 0.10);

  /* ── Shadows (tinted, not black) ───────────────────────────────── */
  --sh-sm:     0 1px 2px 0 rgba(10, 15, 28, 0.5);
  --sh-md:     0 4px 12px -2px rgba(10, 15, 28, 0.55),
               0 2px 4px -1px rgba(10, 15, 28, 0.35);
  --sh-lg:     0 12px 32px -8px rgba(10, 15, 28, 0.6),
               0 4px 8px -2px rgba(10, 15, 28, 0.3);
  --sh-xl:     0 24px 64px -12px rgba(10, 15, 28, 0.7);
  --sh-glow-sky:    0 8px 32px -8px rgba(56, 189, 248, 0.45);
  --sh-glow-indigo: 0 8px 32px -8px rgba(129, 140, 248, 0.45);
  --sh-glow-amber:  0 8px 32px -8px rgba(251, 191, 36, 0.35);
  --sh-glow-rose:   0 8px 32px -8px rgba(251, 113, 133, 0.40);
  --sh-glow-emerald:0 8px 32px -8px rgba(52, 211, 153, 0.40);

  /* ── Radii ────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* ── Typography ───────────────────────────────────────────────── */
  /* FiraGO first (best Georgian rendering), Inter for Latin, system fallback */
  --font: "FiraGO", "Inter", "BPG Nino Mtavruli", "Segoe UI",
          system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, monospace;

  --f-xs:   11px;
  --f-sm:   12px;
  --f-base: 14px;
  --f-md:   15px;
  --f-lg:   17px;
  --f-xl:   20px;
  --f-2xl:  24px;
  --f-3xl:  32px;
  --f-4xl:  40px;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xbold:    800;

  /* ── Motion ───────────────────────────────────────────────────── */
  --t-fast:   120ms;
  --t-med:    200ms;
  --t-slow:   320ms;
  --easing:   cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ── z-index ──────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  300;
  --z-modal-bg: 900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE DEFAULTS — applied to every page that loads this file
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--f-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Ambient background glow ─────────────────────────────────────────
   Fixed-position radial gradients BEHIND everything. This is the other
   biggest "designed" tell — the page feels atmospheric, not flat.
   Top-right: sky-indigo glow. Bottom-left: rose warm glow. Both subtle. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1200px 700px at 85% -10%,  rgba(56, 189, 248, 0.08), transparent 60%),
    radial-gradient(ellipse 900px 600px  at 15% 110%,  rgba(129, 140, 248, 0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px  at 50% 50%,   rgba(251, 113, 133, 0.025), transparent 70%);
}

/* Subtle grid texture (optional, very low opacity) */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(129, 140, 248, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 140, 248, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 80%);
}

/* ── Scrollbar (slim, tinted) ───────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--accent); background-clip: padding-box; }

/* ── Text elements ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--f-3xl); }
h2 { font-size: var(--f-2xl); }
h3 { font-size: var(--f-xl); }
h4 { font-size: var(--f-lg); }
h5 { font-size: var(--f-md); }
h6 { font-size: var(--f-base); }

p { margin: 0; color: var(--text-soft); }

a {
  color: var(--accent-hi);
  text-decoration: none;
  transition: color var(--t-fast) var(--easing);
}
a:hover { color: var(--accent); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--accent-hi);
  border: 1px solid var(--border-subtle);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--s-4) 0;
}

::selection { background: rgba(56, 189, 248, 0.35); color: var(--text); }

/* ── Focus ring (unified across app) ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Animation primitives ──────────────────────────────────────── */
@keyframes soko-fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes soko-slide-up      { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes soko-slide-in-right{ from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes soko-pulse-glow    { 0%,100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); } }
@keyframes soko-spin          { to { transform: rotate(360deg); } }

.soko-anim-fade  { animation: soko-fade-in  var(--t-med) var(--easing) both; }
.soko-anim-up    { animation: soko-slide-up var(--t-slow) var(--easing) both; }
.soko-anim-right { animation: soko-slide-in-right var(--t-slow) var(--easing) both; }