/**
 * tokens.css
 * ----------
 * Single source of truth for every color, spacing, radius, and font used
 * across the app. Change the LOOK of Smart BG by editing values here first —
 * glass.css and layout.css consume these variables rather than hardcoding
 * colors, so re-theming the whole app is mostly a one-file edit.
 */

:root {
  /* ---- Base surface (the dark checkerboard workspace behind the canvas) ---- */
  --surface-void: #0a0a0c;
  --surface-app: #111114;
  --surface-app-alt: #16161a;

  /* ---- Glass panel system (Figma-like translucent chrome) ---- */
  --glass-bg: rgba(24, 24, 28, 0.72);
  --glass-bg-strong: rgba(20, 20, 24, 0.88);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* ---- Accent (matches your existing Create BG green identity) ---- */
  --accent: #34d17f;
  --accent-strong: #29b56b;
  --accent-soft: rgba(52, 209, 127, 0.14);
  --accent-contrast: #05130b;

  /* ---- Text ---- */
  --text-primary: #f2f2f3;
  --text-secondary: #a8a8ad;
  --text-tertiary: #6c6c72;
  --text-on-accent: #05130b;

  /* ---- Danger (preset delete) ---- */
  --danger: #e5484d;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Typography ----
   * Display/label face: a geometric grotesk for headers and buttons.
   * Data face: a monospace for numeric readouts (dimensions, slider values) —
   * gives the panel a "studio instrument" feel rather than a generic form. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;

  /* ---- Layout dimensions ---- */
  --header-height: 56px;
  --sidebar-width: 240px;
  --controls-width: 300px;
  --postfx-bar-height: 64px;
}