/* ═══════════════════════════════════════════════════════
   ikosak Blog — Design Token System
   
   Dark developer theme with blue accent + orange CTA.
   Single theme, no multi-theme switching needed.
   
   Usage: <link rel="stylesheet" href="../css/tokens.css">
   or     <link rel="stylesheet" href="css/tokens.css">
   ═══════════════════════════════════════════════════════ */

/* ─── Tier 1: Primitives ─── */

:root {
  /* Layout */
  --max-w: 1080px;
  --max-w-wide: 1280px;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows (adjusted for dark backgrounds) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

  /* ─── Tier 2: Theme Colors ─── */

  /* Base surfaces */
  --bg: #0d1117;
  --bg-raised: #161b22;
  --bg-overlay: #1c2129;
  --bg-inset: #010409;
  --border: #30363d;
  --border-light: #21262d;

  /* Text */
  --text: #e6edf3;
  --text-muted: #8b949e;
  --text-faint: #6e7681;

  /* Accent: blue */
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --accent-muted: rgba(56,139,253,0.15);
  --accent-subtle: rgba(56,139,253,0.1);

  /* CTA: orange */
  --cta: #f0883e;
  --cta-hover: #f5a623;
  --cta-muted: rgba(240,136,62,0.15);

  /* Semantic */
  --success: #3fb950;
  --success-muted: rgba(63,185,80,0.15);
  --warning: #d29922;
  --warning-muted: rgba(210,153,34,0.15);
  --error: #f85149;
  --error-muted: rgba(248,81,73,0.15);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ─── Tier 3: Component Tokens ─── */

  /* Tags */
  --tag-blue-bg: rgba(56,139,253,0.15);
  --tag-blue-color: #58a6ff;
  --tag-green-bg: rgba(63,185,80,0.15);
  --tag-green-color: #3fb950;
  --tag-amber-bg: rgba(210,153,34,0.15);
  --tag-amber-color: #d29922;
  --tag-purple-bg: rgba(188,140,255,0.15);
  --tag-purple-color: #bc8cff;
  --tag-red-bg: rgba(248,81,73,0.15);
  --tag-red-color: #f85149;

  /* Code blocks */
  --code-bg: #161b22;
  --code-border: #30363d;
  --code-text: #e6edf3;
  --code-comment: #8b949e;
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-function: #d2a8ff;
  --code-number: #79c0ff;
  --code-operator: #ff7b72;
  --code-variable: #ffa657;
  --code-class: #7ee787;
}