/* =============================================================================
   BLEIKEN CMS — DESIGN TOKENS
   Single source of truth for design primitives.
   Loaded first on both frontend and admin. Editable via /admin/design (Phase 4).
   -----------------------------------------------------------------------------
   Architecture:
     PRIMITIVES  (this file)  →  raw scales that never change contextually
     SEMANTIC    (style.css, admin.css, personal.css)  →  role-based aliases
     COMPONENTS  (rest of each stylesheet)  →  reference semantic tokens only
============================================================================= */

:root {
  /* ─── NEUTRALS (Zinc scale) ─────────────────────────────────────────────── */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-150: #ececee;   /* not standard — keep for personal.css compat */
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-850: #1c1c1f;   /* not standard — keep for personal.css compat */
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Cool grays for admin surface / borders (Tailwind cool-gray) */
  --slate-50:  #f9fafb;
  --slate-100: #f4f6fb;
  --slate-200: #e5e7eb;
  --slate-300: #d1d5db;
  --slate-400: #9ca3af;
  --slate-500: #6b7280;
  --slate-600: #4b5563;
  --slate-700: #374151;
  --slate-800: #1f2937;
  --slate-900: #111827;
  --slate-950: #0f1623;   /* admin sidebar bg */

  /* GitHub-style dark grays used by admin dark mode */
  --gh-bg:      #0d1117;
  --gh-surface: #161b22;
  --gh-elev:    #1c2128;
  --gh-border:  #30363d;
  --gh-border2: #484f58;
  --gh-text:    #e6edf3;
  --gh-text-2:  #c9d1d9;
  --gh-text-3:  #8b949e;
  --gh-text-4:  #6e7681;
  --gh-sidebar: #090d14;

  /* ─── BRAND: BLUE (admin) ───────────────────────────────────────────────── */
  --blue-50:  #e8f0fe;
  --blue-400: #60a5fa;
  --blue-500: #2563eb;   /* personal --pb-primary */
  --blue-600: #1d4ed8;   /* personal --pb-primary-hover */
  --blue-700: #0052cc;   /* admin --primary-dark */
  --blue-primary: #0066ff;  /* admin --primary */
  --blue-dark-hover: #1a2d5a;  /* admin dark primary-light */

  /* ─── BRAND: INDIGO (site) ──────────────────────────────────────────────── */
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;   /* site --color-primary (light) */
  --indigo-600: #4f46e5;   /* site --color-primary-hover */

  /* ─── BRAND: VIOLET ─────────────────────────────────────────────────────── */
  --violet-300: #c4b5fd;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;

  /* ─── SEMANTIC PALETTE ──────────────────────────────────────────────────── */
  --green-500: #10b981;   --green-100: #d1fae5;
  --amber-500: #f59e0b;   --amber-100: #fef3c7;
  --red-500:   #ef4444;   --red-100:   #fee2e2;
  --cyan-500:  #06b6d4;   --cyan-100:  #cffafe;
  --teal-500:  #14b8a6;
  --purple-500: #a855f7;

  /* ─── SPACING SCALE (rem) ───────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ─── RADII ─────────────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 999px;

  /* Legacy admin radii (smaller scale) */
  --radius-admin-sm:  8px;
  --radius-admin-md:  12px;
  --radius-admin-lg:  16px;

  /* ─── TYPOGRAPHY ────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Fira Mono', Consolas, monospace;

  --text-xs:     0.8125rem;
  --text-sm:     0.9375rem;
  --text-body:   1.0625rem;
  --text-h3:     clamp(1.3rem, 2vw, 1.75rem);
  --text-h2:     clamp(1.6rem, 3vw, 2.5rem);
  --text-h1:     clamp(2rem, 4.5vw, 3.5rem);
  --text-display: clamp(2.5rem, 6vw, 5.5rem);

  --leading-tight: 1.04;
  --leading-snug:  1.25;
  --leading-body:  1.7;

  /* ─── SHADOWS (light-mode base — dark override in each :root context) ───── */
  --shadow-xs:  0 1px 2px rgba(10, 10, 20, .05);
  --shadow-sm:  0 1px 3px rgba(10, 10, 20, .08), 0 1px 2px rgba(10, 10, 20, .04);
  --shadow-md:  0 4px 12px rgba(10, 10, 20, .08), 0 2px 4px rgba(10, 10, 20, .04);
  --shadow-lg:  0 12px 28px rgba(10, 10, 20, .12), 0 4px 8px rgba(10, 10, 20, .06);
  --shadow-xl:  0 24px 56px rgba(10, 10, 20, .16), 0 8px 16px rgba(10, 10, 20, .08);
  --shadow-2xl: 0 40px 96px rgba(10, 10, 20, .22), 0 16px 32px rgba(10, 10, 20, .10);
  --shadow-glow: 0 8px 40px rgba(99, 102, 241, .35), 0 2px 12px rgba(139, 92, 246, .25);

  /* Admin-specific shadows (softer) */
  --shadow-admin-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-admin:    0 4px 16px rgba(0,0,0,.08);
  --shadow-admin-lg: 0 10px 40px rgba(0,0,0,.12);

  /* Personal page shadows (heavier for dark bg) */
  --shadow-pb-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-pb-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-pb-lg: 0 8px 32px rgba(0,0,0,.6);

  /* ─── MOTION ────────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.16s;
  --dur:         0.28s;
  --dur-slow:    0.5s;
  --transition:  0.18s ease;

  /* ─── LAYOUT ────────────────────────────────────────────────────────────── */
  --header-height-site:  72px;
  --header-height-admin: 64px;
  --container-max:       1200px;
  --container-narrow:    760px;
  --sidebar-width:       260px;

  /* ─── Z-INDEX ───────────────────────────────────────────────────────────── */
  --z-header:     100;
  --z-dropdown:   110;
  --z-mobile-nav: 200;
  --z-overlay:    300;
  --z-toast:      400;
}