/* ============================================================
   Peer Glass Studio — Design Tokens
   A single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Brand / accent ---- */
  --accent: #2f6df6;
  --accent-strong: #1e54d6;
  --accent-soft: #e8f0ff;
  --accent-glow: rgba(47, 109, 246, 0.35);

  --glass-tint: #7fb4d6;
  --frame-tone: #c9a978;
  --frame-tone-dark: #9c7d4f;

  /* ---- Neutral surfaces (light) ---- */
  --bg: #eef1f6;
  --bg-grid: #e3e8f0;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eef2f8;
  --line: #dde3ee;
  --line-strong: #c6cee0;

  /* ---- Text ---- */
  --ink: #1a2233;
  --ink-2: #44506a;
  --ink-3: #7d8aa6;
  --ink-on-accent: #ffffff;

  /* ---- Status ---- */
  --ok: #1ca672;
  --warn: #e0a52a;
  --danger: #e2453d;

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-1: 0 1px 2px rgba(20, 30, 55, 0.06), 0 1px 3px rgba(20, 30, 55, 0.08);
  --sh-2: 0 4px 14px rgba(20, 30, 55, 0.10);
  --sh-3: 0 14px 40px rgba(20, 30, 55, 0.16);
  --sh-pop: 0 18px 50px rgba(20, 30, 55, 0.26);

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 44px;

  /* ---- Type ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 27px;

  /* ---- Layout metrics ---- */
  --topbar-h: 56px;
  --rail-w: 60px;
  --panel-left-w: 264px;
  --panel-right-w: 304px;
  --statusbar-h: 30px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.14s;
  --t-med: 0.26s;
  --t-slow: 0.42s;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg: #0e1320;
  --bg-grid: #161d2e;
  --surface: #161c2b;
  --surface-2: #1b2233;
  --surface-3: #212a3e;
  --line: #2a3346;
  --line-strong: #38445c;

  --ink: #eef2fb;
  --ink-2: #b3bdd2;
  --ink-3: #7886a3;

  --accent-soft: #16233f;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --sh-3: 0 16px 44px rgba(0, 0, 0, 0.55);
  --sh-pop: 0 22px 60px rgba(0, 0, 0, 0.65);
}