/* ============================================
   FlowStash — Design Tokens
   Cinematic dark UI · Obsidian-inspired
   Deep black · Typographic focus · Minimal
   ============================================ */

:root {
  /* ── Backgrounds ──
     Near-pure black base with very subtle warm tint
     for depth perception without grey wash */
  --bg-primary: #050507;
  --bg-secondary: #0c0c10;
  --bg-tertiary: #131318;
  --bg-elevated: #18181f;
  --bg-surface: #1c1c24;
  --bg-overlay: rgba(5, 5, 7, 0.92);

  /* ── Borders ──
     Ultra-subtle so structure is felt, not seen */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.10);
  --border-active: rgba(255, 255, 255, 0.16);

  /* ── Text ──
     High-contrast primaries, restrained secondaries
     for cinematic readability */
  --text-primary: #ededf0;
  --text-secondary: #75758a;
  --text-muted: #45455a;
  --text-ghost: #2e2e3e;
  --text-inverse: #050507;

  /* ── Accent (warm ember) ──
     Restrained glow — accent draws the eye,
     but never screams */
  --accent: #e8612d;
  --accent-hover: #f07a4a;
  --accent-muted: rgba(232, 97, 45, 0.12);
  --accent-glow: rgba(232, 97, 45, 0.06);
  --accent-glow-strong: rgba(232, 97, 45, 0.14);

  /* ── Semantic ── */
  --success: #2dd4a0;
  --success-muted: rgba(45, 212, 160, 0.10);
  --warning: #f0b429;
  --warning-muted: rgba(240, 180, 41, 0.10);
  --error: #ef6b6b;
  --error-muted: rgba(239, 107, 107, 0.10);

  /* ── Typography ──
     Inter for clarity, tight tracking for headlines,
     JetBrains for code blocks */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.75rem;    /* 44px */
  --text-5xl: 3.5rem;     /* 56px */
  --text-6xl: 4.75rem;    /* 76px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.12em;

  /* ── Spacing ──
     Generous white space for cinematic breathing room */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */
  --space-48: 12rem;    /* 192px */

  /* ── Radius ── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* ── Shadows ──
     Deep, soft shadows for floating elements */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --shadow-glow-strong: 0 0 48px var(--accent-glow-strong);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.02);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);

  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-cinematic: 900ms;

  /* ── Z-index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 500;
  --z-modal: 1000;
  --z-toast: 1500;

  /* ── Layout ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1120px;
  --container-2xl: 1320px;

  --nav-height: 56px;
  --nav-height-mobile: 64px;

  --gradient-primary: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  --gradient-glow: radial-gradient(circle at center, var(--accent-glow-strong) 0%, transparent 70%);
}