/* ==========================================================================
   Design Tokens — Offmind POC
   All CSS custom properties used across the application.
   ========================================================================== */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --primary:       #6C5CE7;
  --primary-light:  #A29BFE;
  --primary-dark:   #4A3CB8;
  --accent:        #FF6B6B;
  --accent-light:   #FFEAA7;

  /* ── Surface & Background ─────────────────────────────────────────────── */
  --bg:            #F8F7FF;
  --surface:       #FFFFFF;
  --surface-hover: #F0EEFF;
  --border:        #E8E5F0;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:          #2D2B3D;
  --text-muted:    #8E8BA3;
  --text-light:    #B8B5C9;

  /* ── Semantic Colors ──────────────────────────────────────────────────── */
  --success:       #00B894;
  --success-light: #E8FBF5;
  --warning:       #FDCB6E;
  --warning-light: #FFF8E7;
  --error:         #E17055;
  --error-light:   #FDF0ED;
  --info:          #74B9FF;

  /* ── Tier Colors (harvest tiers) ──────────────────────────────────────── */
  --tier1:         #C8E6C9;
  --tier2:         #81C784;
  --tier3:         #4DB6AC;
  --tier4:         #7E57C2;
  --tier5:         #FFD54F;

  /* ── Typography — Font Family ─────────────────────────────────────────── */
  --font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Oxygen, Ubuntu, sans-serif;

  /* ── Typography — Font Sizes ──────────────────────────────────────────── */
  --fs-display:    48px;
  --fs-h1:         28px;
  --fs-h2:         22px;
  --fs-h3:         18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-tiny:       12px;

  /* ── Typography — Font Weights ────────────────────────────────────────── */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ── Typography — Line Heights ────────────────────────────────────────── */
  --lh-tight:      1.2;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-xs:      4px;
  --space-sm:      8px;
  --space-md:      12px;
  --space-base:    16px;
  --space-lg:      20px;
  --space-xl:      24px;
  --space-2xl:     32px;
  --space-3xl:     48px;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-full:   9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(108, 92, 231, 0.06),
                   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:     0 4px 12px rgba(108, 92, 231, 0.08),
                   0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:     0 8px 24px rgba(108, 92, 231, 0.12),
                   0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-harvest: 0 0 20px rgba(108, 92, 231, 0.25),
                   0 0 40px rgba(108, 92, 231, 0.10);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}