/* admin/styles/tokens.css
 * All CSS custom properties — ported verbatim from UI-SPEC "Color" and spacing/typography sections.
 * Source of truth for Phase 1 design tokens. If icon-generator CSS is consulted later,
 * reconcile at that point; these values are canonical for Phase 1.
 */

:root {
  /* =========================================================
   * COLOR PALETTE (60/30/10 rule — see UI-SPEC §Color)
   * ========================================================= */

  /* Dominant — 60% of surfaces */
  --color-bg:           #0d0d0f;   /* page background */
  --color-surface:      #16161a;   /* card / panel base */

  /* Secondary — 30% of surfaces */
  --color-surface-raised: #1e1e24; /* elevated surface: nav bar, footer strip */
  --color-border:         #2a2a35; /* dividers, card outlines */

  /* Accent — 10%, reserved for interactive elements only */
  --color-accent: #7c6fff;         /* violet — primary interactive accent */
  --color-accent-hover: #9585ff;   /* accent + 15% lightness on hover */
  --color-accent-active:#6358d4;   /* accent - 10% lightness on active/press */

  /* Semantic */
  --color-destructive:  #e05252;   /* error / denied states only */
  --color-success:      #3ecf8e;   /* session confirmed indicator only */

  /* Text */
  --color-text-primary:   #f0f0f5; /* headings, button labels */
  --color-text-secondary: #9494a8; /* helper copy, captions */
  --color-text-disabled:  #4a4a5a; /* placeholder, inactive */

  /* Focus ring — matches accent for visual consistency */
  --color-focus:        #7c6fff;   /* 3px outline, 2px offset */

  /* =========================================================
   * SPACING SCALE (multiples of 4, 8-point grid)
   * ========================================================= */
  --space-xs:   4px;   /* icon gaps, inline badge padding */
  --space-sm:   8px;   /* button internal padding add-on, tight rows */
  --space-md:   16px;  /* default element spacing, input padding */
  --space-lg:   24px;  /* card internal padding, section gaps */
  --space-xl:   32px;  /* layout column gaps */
  --space-2xl:  48px;  /* vertical section breaks */
  --space-3xl:  64px;  /* page-level top/bottom padding */

  /* =========================================================
   * TYPOGRAPHY
   * ========================================================= */

  /* Font stacks — system-ui only; zero web font download */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace,
               SFMono-Regular, Menlo, monospace;

  /* Sizes */
  --text-body-size:    14px;
  --text-label-size:   12px;
  --text-heading-size: 20px;

  /* Weights (only 2 declared in Phase 1) */
  --font-weight-regular:  400;
  --font-weight-semibold: 600;

  /* Line heights */
  --text-body-lh:    1.5;
  --text-label-lh:   1.4;
  --text-heading-lh: 1.25;

  /* Tracking */
  --text-heading-tracking: -0.02em;

  /* =========================================================
   * PHASE 2 ADDITIONS
   * ========================================================= */

  /* Display size — Phase 4 only; declared now for forward compatibility */
  --text-display-size: 28px;

  /* Warning — advisory only; slot dimension mismatch in ad create modal */
  --color-warning: #e8a040;
}