/* olly-ui/tokens.css — Olly design tokens (spec §2.5, LIGHT theme from styles.css)
 *
 * Source of truth: the claude.ai/design project (synced via /design-sync).
 * This file is the repo-side export; ALL Olly UI (dashboard, canvas, chat,
 * email templates) consumes these variables — never ad-hoc values.
 *
 * Groups: Colors / Tints / Lines / Spacing / Radius / Type / Elevation
 */

:root {
  /* -- Colors ------------------------------------------------------------ */
  --olly-bg:         #fafafa;
  --olly-surface:    #ffffff;
  --olly-ink:        #1a1a1a;
  --olly-muted:      #666666;
  --olly-muted-2:    #888888;
  --olly-faint:      #aaaaaa;
  --olly-primary:    #1a1a1a;
  --olly-on-primary: #ffffff;
  --olly-good:       #059669;
  --olly-warn:       #d97706;
  --olly-bad:        #e53e3e;
  --olly-info:       #0284c7;
  --olly-purple:     #7c3aed;
  --olly-pink:       #db2777;

  /* -- Tints (fills behind status content) -------------------------------- */
  --olly-tint-info:   #e8f4fd;
  --olly-tint-good:   #ecfdf5;
  --olly-tint-warn:   #fef3c7;
  --olly-tint-purple: #f3e8ff;

  /* -- Lines --------------------------------------------------------------*/
  --olly-line:   #f0f0f0;
  --olly-line-2: #e8e8e8;
  --olly-line-3: #e0e0e0;

  /* -- Spacing ------------------------------------------------------------*/
  --olly-sp-1: 4px;
  --olly-sp-2: 8px;
  --olly-sp-3: 12px;
  --olly-sp-4: 16px;
  --olly-sp-5: 20px;
  --olly-sp-6: 24px;

  /* -- Radius -------------------------------------------------------------*/
  --olly-r-sm:   10px;
  --olly-r-md:   12px;
  --olly-r-pill: 20px;

  /* -- Type (Inter; Material Icons Outlined for glyphs) --------------------*/
  --olly-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --olly-fs-2xs: 0.7rem;
  --olly-fs-xs:  0.75rem;
  --olly-fs-sm:  0.8rem;
  --olly-fs-md:  0.875rem;
  --olly-fs-lg:  1.125rem;
  --olly-fs-xl:  1.75rem;
  --olly-fw-regular:  400;
  --olly-fw-medium:   500;
  --olly-fw-semibold: 600;
  --olly-fw-bold:     700;

  /* -- Elevation ----------------------------------------------------------*/
  --olly-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --olly-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.10);
  --olly-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.16);
}