/* ================== TOKENS ==================
   Loyi shared design tokens. Imported by:
   - /styles.css (landing)
   - /blog/_astro/*.css (blog, via blog-src/src/styles/tokens.css)
   Edit alongside claude-design/styles.css to keep design-sync clean.
================================================ */
:root {
  /* Accent families */
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;

  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;

  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  /* Dark theme (default) */
  --bg: #07080b;
  --bg-2: #0c0e14;
  --bg-3: #111420;
  --fg: #f6f7f9;
  --fg-2: #b4b8c5;
  --fg-3: #6b7080;
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --accent: var(--sky-400);
  --accent-ink: #06121c;
  --accent-soft: rgba(56,189,248,0.12);
  --grid: rgba(255,255,255,0.04);
  --noise-opacity: 0.035;

  /* Type */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Spacing */
  --radius: 14px;
  --radius-lg: 20px;
}

html[data-theme="light"] {
  --bg: #f7f7f5;
  --bg-2: #ffffff;
  --bg-3: #f1f2f0;
  --fg: #0a0b0d;
  --fg-2: #4a4d57;
  --fg-3: #81858f;
  --border: rgba(10,11,13,0.08);
  --border-2: rgba(10,11,13,0.14);
  --accent-ink: #ffffff;
  --accent-soft: rgba(14,165,233,0.10);
  --grid: rgba(10,11,13,0.04);
  --noise-opacity: 0.05;
}

html[data-accent="sky"] { --accent: var(--sky-400); --accent-ink: #06121c; --accent-soft: rgba(56,189,248,0.12); }
html[data-accent="indigo"] { --accent: var(--indigo-500); --accent-ink: #f5f5ff; --accent-soft: rgba(99,102,241,0.14); }
html[data-accent="rose"] { --accent: var(--rose-500); --accent-ink: #fff5f7; --accent-soft: rgba(244,63,94,0.13); }
html[data-accent="amber"] { --accent: var(--amber-500); --accent-ink: #1a1000; --accent-soft: rgba(245,158,11,0.15); }
html[data-accent="lime"] { --accent: #a3e635; --accent-ink: #0a0b0d; --accent-soft: rgba(163,230,53,0.15); }

/* Font pairings */
html[data-font="modern"]   { --font-sans: 'Inter', sans-serif; --font-display: 'Plus Jakarta Sans', sans-serif; }
html[data-font="geist"]    { --font-sans: 'Geist', sans-serif; --font-display: 'Geist', sans-serif; }
html[data-font="editorial"]{ --font-sans: 'Inter', sans-serif; --font-display: 'Instrument Serif', serif; }