/* DESIGN TOKENS - WORKMACHINE v1 */
/* Source: marketing_branding/strategy/DESIGN_TOKEN_BASELINE.md */

:root {
  /* 1.1 Surface Colors (Dark Mode Default) */
  --surface-bg:           #0f172a;   /* slate-900 */
  --surface-panel:        rgba(30, 41, 59, 0.5); /* slate-800/50 */
  --surface-elevated:     #1e293b;   /* slate-800 */
  --surface-overlay:      rgba(0, 0, 0, 0.6);

  /* 1.2 Text Colors */
  --text-primary:         #f1f5f9;   /* slate-100 */
  --text-secondary:       #94a3b8;   /* slate-400 */
  --text-muted:           #64748b;   /* slate-500 */
  --text-inverse:         #0f172a;

  /* 1.3 Border Colors */
  --border-default:       rgba(51, 65, 85, 0.5);  /* slate-700/50 */
  --border-strong:        #475569;   /* slate-600 */
  --border-focus:         #3b82f6;   /* blue-500 */

  /* 1.4 Accent Colors */
  --accent-primary:       #3b82f6;   /* blue-500 */
  --accent-primary-hover: #2563eb;   /* blue-600 */
  --accent-success:       #10b981;   /* emerald-500 */
  --accent-warning:       #f59e0b;   /* amber-500 */
  --accent-danger:        #f43f5e;   /* rose-500 */
  --accent-info:          #06b6d4;   /* cyan-500 */

  /* 2. Typography */
  --font-sans:            'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:            'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-xs:              0.75rem;
  --text-sm:              0.875rem;
  --text-base:            1rem;
  --text-lg:              1.125rem;
  --text-xl:              1.5rem;
  --text-2xl:             2rem;
  --text-3xl:             3rem;      /* Added for Hero */
  --text-4xl:             4rem;      /* Added for Hero */

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

  --leading-tight:        1.25;
  --leading-normal:       1.5;
  --leading-relaxed:      1.75;

  /* 3. Spacing */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.25rem;
  --space-6:              1.5rem;
  --space-8:              2rem;
  --space-10:             2.5rem;
  --space-12:             3rem;
  --space-16:             4rem;
  --space-20:             5rem;
  --space-24:             6rem;

  /* 4. Layout */
  --radius-sm:            0.25rem;
  --radius-md:            0.5rem;
  --radius-lg:            0.75rem;
  --radius-full:          9999px;

  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-glow:          0 0 15px rgba(59, 130, 246, 0.3); /* Custom glow */

  /* 5. Components */
  --nav-height:           70px;
  --max-width:            1200px;
}

/* Light Mode: removed — no toggle exists yet. Re-add when theme switcher is built.
   Note: accent-primary must stay #3b82f6 (blue-500) in both modes for brand consistency. */