/* Overlook — design tokens
 *
 * Vanilla CSS custom properties (no build step, no framework). Every visual
 * choice — colours, spacing, typography scale, radius, elevation — lives
 * here. Components and pages consume tokens only; never hard-code hex
 * values or px values in those files.
 *
 * Dark-first, inspired by Linear / Cursor. A light theme overlay is
 * defined at the bottom via [data-theme="light"]; the existing theme.js
 * toggle flips the attribute.
 */

:root {
  /* ----- Palette (raw) -------------------------------------------------- */
  /* Zinc neutrals (dark-first base). */
  --zinc-950: #09090b;
  --zinc-925: #0b0b0f;
  --zinc-900: #0f0f12;
  --zinc-875: #131317;
  --zinc-850: #17171c;
  --zinc-800: #1e1e24;
  --zinc-750: #26262d;
  --zinc-700: #2e2e36;
  --zinc-600: #52525b;
  --zinc-500: #71717a;
  --zinc-400: #a1a1aa;
  --zinc-300: #d4d4d8;
  --zinc-200: #e4e4e7;
  --zinc-100: #f4f4f5;
  --zinc-50:  #fafafa;

  /* Accents — violet → cyan gradient is our signature. */
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --cyan-400:   #22d3ee;
  --cyan-500:   #06b6d4;
  --cyan-600:   #0891b2;

  /* Semantic status. */
  --success-400: #34d399;
  --success-500: #10b981;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --danger-400:  #f87171;
  --danger-500:  #ef4444;

  /* ----- Semantic tokens (what components reference) -------------------- */
  --bg:                 var(--zinc-950);
  --bg-elevated:        var(--zinc-900);
  --bg-elevated-2:      var(--zinc-850);
  --bg-hover:           var(--zinc-875);
  --bg-muted:           var(--zinc-800);
  --surface:            var(--zinc-900);

  --text:               var(--zinc-50);
  --text-muted:         var(--zinc-400);
  --text-faint:         var(--zinc-500);
  --text-on-accent:     #ffffff;

  --border:             var(--zinc-800);
  --border-strong:      var(--zinc-700);
  --border-subtle:      var(--zinc-875);

  --accent:             var(--violet-500);
  --accent-hover:       var(--violet-400);
  --accent-2:           var(--cyan-500);
  --accent-gradient:    linear-gradient(135deg, var(--violet-500) 0%, var(--cyan-500) 100%);
  --accent-glow:        radial-gradient(circle at 50% 0%, rgba(139,92,246,.35), transparent 60%);

  --danger-bg:          rgba(239, 68, 68, 0.12);
  --success-bg:         rgba(16, 185, 129, 0.12);
  --warning-bg:         rgba(245, 158, 11, 0.12);
  --accent-bg:          rgba(139, 92, 246, 0.12);

  /* ----- Typography ----------------------------------------------------- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter Tight', var(--font-sans);
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
                'Cascadia Mono', monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */
  --text-7xl:  4.5rem;     /* 72 */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.1em;

  /* ----- Spacing (8-pt scale with halves) ------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ----- Radius --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ----- Elevation / shadow -------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:      0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.25);

  /* ----- Motion -------------------------------------------------------- */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  120ms;
  --duration:       180ms;
  --duration-slow:  320ms;

  /* ----- Layout -------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --header-height: 64px;
}

/* ----- Light theme overlay -------------------------------------------- */
:root[data-theme="light"] {
  --bg:                 var(--zinc-50);
  --bg-elevated:        #ffffff;
  --bg-elevated-2:      var(--zinc-100);
  --bg-hover:           var(--zinc-100);
  --bg-muted:           var(--zinc-200);
  --surface:            #ffffff;

  --text:               var(--zinc-950);
  --text-muted:         var(--zinc-600);
  --text-faint:         var(--zinc-500);

  --border:             var(--zinc-200);
  --border-strong:      var(--zinc-300);
  --border-subtle:      var(--zinc-100);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow:      0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 10px 30px rgba(0, 0, 0, 0.1),  0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ---------- Legacy var aliases -----------------------------------------
   style.css (the pre-design-system stylesheet still loaded by review /
   property / upload / admin_usage for its component-specific rules)
   defines its own palette under --card, --muted, --warn-bg, etc. We
   load tokens.css AFTER style.css so these aliases win; the legacy
   selectors therefore pick up the token palette for free.
   ---------------------------------------------------------------------- */
:root {
  --card:              var(--surface);
  --card-bg:           var(--surface);
  --muted:             var(--text-muted);
  --accent-dark:       var(--accent-hover);
  --warn:              var(--warning-400);
  --warn-bg:           var(--warning-bg);
  --good:              var(--success-400);
  --good-bg:           var(--success-bg);
  --header-bg:         var(--bg);
  --header-fg:         var(--text);
  --input-bg:          var(--surface);
  --row-alt:           var(--bg-elevated-2);
  --disc-bg:           var(--warning-bg);
  --disc-border:       rgba(245, 158, 11, 0.25);
  --status-bg:         var(--accent-bg);
  --status-border:     rgba(139, 92, 246, 0.25);
  --status-fg:         var(--violet-400);
  --code-bg:           var(--bg-elevated-2);
  --src-tag-bg:        var(--accent-bg);
  --src-tag-fg:        var(--violet-400);
  --src-tag-edit-bg:   var(--warning-bg);
  --src-tag-edit-fg:   var(--warning-400);
  --hover-bg:          var(--bg-hover);
}