/* Design tokens transcribed verbatim from design_handoff_notes_vps/README.md
   ("Design Tokens" section). This is the single source of truth for every
   color/spacing/type value in the redesign — screens consume these vars,
   never a hardcoded hex/px. */

:root {
  /* Surfaces (dark/gray) */
  --surface-0: #08090a;   /* outermost background */
  --surface-code: #0a0b0c; /* code block / thumb background */
  --surface-sidebar: #0c0d0e;
  --surface-list: #0e0f10; /* list column / overlay card */
  --surface-frame: #111213; /* app frame */
  --surface-input: #17181a; /* input bg (gradient from #15152a in source; flat fallback) */
  --surface-input-grad-start: #15152a;
  --surface-input-grad-end: #17181a;
  --surface-ai-bar: #191b1d; /* AI pending bar / queue card */
  --surface-selected: #212325; /* selected row */

  /* Borders */
  --border-row: #1e2022;
  --border-main: #232629;
  --border-button: #2b2f33;
  --border-accent: #3a4045;

  /* Text */
  --text-primary: #e6e8ea;
  --text-content-start: #e4e4fa; /* gradient start used for editor body text */
  --text-content-end: #e6e8ea;
  --text-secondary: #c6cacd;
  --text-soft: #a2a7ab;
  --text-soft-2: #93989d;
  --text-dim: #868b90;
  --text-dim-2: #747a7f;
  --text-meta: #666c71;

  /* Accent (neon) */
  --accent: #46e5d5;       /* primary buttons, AI badge, progress, status dot, FAB, toast */
  --accent-text-on: #05131a; /* text color when placed ON accent */
  --accent-border-dim: #2f8f8c;
  --danger: #ff6fb5;        /* quota fill when >90% */

  /* Tag colors */
  --tag-srt: #46e5d5;
  --tag-d1d: #ff6fb5;
  --tag-ads: #ffc857;
  --tag-infra: #8b8cff;
  --tag-idea: #b6f24a;
  --tag-finance: #5fd3ff;

  /* Diff (AI activity queue cards) */
  --diff-add-bg: #132218;
  --diff-add-text: #8ef2ae;
  --diff-add-sign: #4e9c6e;
  --diff-del-bg: #22161a;
  --diff-del-text: #ff9ec0;
  --diff-del-sign: #a05c78;

  /* Badges */
  --badge-ai-border: #2f8f8c;
  --badge-ai-text: var(--accent);
  --badge-me-border-start: #45457a;
  --badge-me-border-end: #4a5157;
  --badge-me-text: var(--text-soft);

  /* Typography */
  --font-ui: 'Sarabun', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-13-5: 13.5px;
  --fs-14: 14px;
  --fs-14-5: 14.5px;
  --fs-15-5: 15.5px;
  --fs-16-5: 16.5px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-29: 29px;

  --lh-content: 1.8;
  --lh-card: 1.575;   /* 1.55–1.6 */
  --lh-heading: 1.3;  /* 1.25–1.35 */

  /* Spacing scale */
  --sp-2: 2px; --sp-5: 5px; --sp-6: 6px; --sp-7: 7px; --sp-8: 8px; --sp-9: 9px;
  --sp-10: 10px; --sp-11: 11px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px;
  --sp-18: 18px; --sp-22: 22px; --sp-24: 24px; --sp-26: 26px; --sp-34: 34px;

  /* Radius */
  --r-badge: 4px;
  --r-button: 6px;    /* 5–6 */
  --r-input: 7px;     /* 7–8 */
  --r-card: 9px;      /* 9–10 */
  --r-overlay: 12px;
  --r-mobile-frame: 26px;
  --r-pill: 999px;    /* chips / switches */

  /* Shadow */
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-toast: 0 8px 26px rgba(0, 0, 0, 0.5);

  /* Fixed widths */
  --w-sidebar: 230px;
  --w-list: 330px;
  --w-side-panel: 318px; /* AI activity / settings right column, 300-318 */
  --w-editor-content: 660px; /* 660-720 */
  --w-file-card-min: 190px;
  --w-mobile: 390px;

  /* Switch (rules toggles) */
  --switch-w: 34px;
  --switch-h: 19px;
}