/* ============================================================
   GLASSGRID — MASTER DESIGN TOKEN SYSTEM
   VERSION: 1.0.0
   
   ⚠️  ARCHITECTURE RULE:
   ALL visual changes MUST happen through these tokens only.
   NEVER add styles directly to components.
   NEVER modify layout from this file.
   Themes override these variables — they never add new ones.
   ============================================================ */

:root {
  /* ─────────────────────────────────────────
     PRIMITIVE TOKENS  (Raw values — do not 
     use directly in components)
  ───────────────────────────────────────── */

  /* Color Primitives */
  --primitive-black-900: #050508;
  --primitive-black-800: #0a0a12;
  --primitive-black-700: #0f0f1a;
  --primitive-black-600: #141420;
  --primitive-black-500: #1a1a2e;

  --primitive-white-100: #ffffff;
  --primitive-white-200: rgba(255, 255, 255, 0.95);
  --primitive-white-300: rgba(255, 255, 255, 0.85);
  --primitive-white-400: rgba(255, 255, 255, 0.70);
  --primitive-white-500: rgba(255, 255, 255, 0.50);
  --primitive-white-600: rgba(255, 255, 255, 0.30);
  --primitive-white-700: rgba(255, 255, 255, 0.15);
  --primitive-white-800: rgba(255, 255, 255, 0.08);
  --primitive-white-900: rgba(255, 255, 255, 0.04);

  --primitive-purple-400: #a855f7;
  --primitive-purple-500: #9333ea;
  --primitive-purple-600: #7e22ce;
  --primitive-blue-400: #60a5fa;
  --primitive-blue-500: #3b82f6;
  --primitive-blue-600: #2563eb;
  --primitive-pink-400: #f472b6;
  --primitive-pink-500: #ec4899;
  --primitive-teal-400: #2dd4bf;
  --primitive-green-400: #4ade80;
  --primitive-green-500: #22c55e;
  --primitive-red-400: #f87171;
  --primitive-red-500: #ef4444;
  --primitive-amber-400: #fbbf24;
  --primitive-amber-500: #f59e0b;

  /* Spacing Scale */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Typography Scale */
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   17px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  30px;
  --font-size-3xl:  38px;

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

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.8;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;

  /* Radius Scale */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Blur Scale */
  --blur-xs:  4px;
  --blur-sm:  8px;
  --blur-md:  16px;
  --blur-lg:  24px;
  --blur-xl:  40px;
  --blur-2xl: 64px;

  /* Z-index Scale */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* Duration Scale */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* Easing */
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:        cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-elastic:   cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ─────────────────────────────────────────
     SEMANTIC TOKENS  (Use these in components)
     These are aliased from primitives.
     Themes override ONLY semantic tokens.
  ───────────────────────────────────────── */

  /* Backgrounds */
  --color-bg-base:        var(--primitive-black-800);
  --color-bg-surface:     var(--primitive-black-600);
  --color-bg-elevated:    var(--primitive-black-500);
  --color-bg-overlay:     rgba(10, 10, 18, 0.85);
  --color-bg-scrim:       rgba(0, 0, 0, 0.7);

  /* Glass Surfaces */
  --color-glass-fill:     rgba(255, 255, 255, 0.06);
  --color-glass-fill-md:  rgba(255, 255, 255, 0.09);
  --color-glass-fill-lg:  rgba(255, 255, 255, 0.12);
  --color-glass-border:   rgba(255, 255, 255, 0.12);
  --color-glass-border-md:rgba(255, 255, 255, 0.20);
  --color-glass-highlight:rgba(255, 255, 255, 0.08);
  --glass-blur:           var(--blur-lg);
  --glass-blur-sm:        var(--blur-md);
  --glass-saturation:     180%;

  /* Brand / Accent */
  --color-accent-primary:   var(--primitive-purple-400);
  --color-accent-secondary: var(--primitive-blue-400);
  --color-accent-tertiary:  var(--primitive-pink-400);
  --color-accent-gradient:  linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
  --color-accent-gradient-full: linear-gradient(135deg, var(--primitive-purple-500), var(--primitive-blue-500), var(--primitive-pink-500));

  /* Text */
  --color-text-primary:   var(--primitive-white-200);
  --color-text-secondary: var(--primitive-white-400);
  --color-text-tertiary:  var(--primitive-white-500);
  --color-text-muted:     var(--primitive-white-600);
  --color-text-inverse:   var(--primitive-black-800);
  --color-text-accent:    var(--color-accent-primary);
  --color-text-link:      var(--color-accent-secondary);

  /* Interactive */
  --color-interactive-default:  var(--color-glass-fill);
  --color-interactive-hover:    var(--color-glass-fill-md);
  --color-interactive-active:   var(--color-glass-fill-lg);
  --color-interactive-focus:    var(--color-accent-primary);

  /* Status */
  --color-success:      var(--primitive-green-400);
  --color-error:        var(--primitive-red-400);
  --color-warning:      var(--primitive-amber-400);
  --color-info:         var(--primitive-blue-400);

  /* Engagement (Likes, Comments) */
  --color-like-default:  var(--primitive-white-500);
  --color-like-active:   var(--primitive-red-400);
  --color-comment:       var(--primitive-blue-400);
  --color-share:         var(--primitive-teal-400);
  --color-save-default:  var(--primitive-white-500);
  --color-save-active:   var(--primitive-amber-400);

  /* Borders */
  --color-border-subtle:  var(--color-glass-border);
  --color-border-default: var(--color-glass-border-md);
  --color-border-strong:  rgba(255, 255, 255, 0.30);
  --color-border-accent:  var(--color-accent-primary);

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(168, 85, 247, 0.25);
  --shadow-glow-accent: 0 0 30px rgba(168, 85, 247, 0.4);

  /* Component Specific */
  --navbar-height:        56px;
  --navbar-blur:          var(--blur-xl);
  --navbar-bg:            rgba(10, 10, 18, 0.8);
  --bottombar-height:     64px;
  --story-ring-gradient:  var(--color-accent-gradient-full);
  --avatar-border-color:  var(--color-glass-border-md);
  --post-radius:          var(--radius-xl);
  --card-radius:          var(--radius-lg);
  --input-radius:         var(--radius-md);
  --button-radius:        var(--radius-full);
  --badge-radius:         var(--radius-full);

  /* Typography — Semantic */
  --font-family-base:    'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-display: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  --font-family-mono:    'JetBrains Mono', 'SF Mono', monospace;

  --text-display:        var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-tight) var(--font-family-display);
  --text-heading:        var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-tight) var(--font-family-base);
  --text-subheading:     var(--font-weight-semibold) var(--font-size-md)/var(--line-height-tight) var(--font-family-base);
  --text-body:           var(--font-weight-normal) var(--font-size-base)/var(--line-height-normal) var(--font-family-base);
  --text-caption:        var(--font-weight-normal) var(--font-size-sm)/var(--line-height-normal) var(--font-family-base);
  --text-micro:          var(--font-weight-medium) var(--font-size-xs)/var(--line-height-tight) var(--font-family-base);

  /* Layout */
  --page-max-width:      480px;
  --page-padding:        var(--space-4);
  --content-gap:         var(--space-3);
  --section-gap:         var(--space-6);
}