/* ============================================================
   HeroCMS Design System — tokens
   The single source of truth for the HeroCMS visual language
   (fonts → colors → typography → spacing → radius → shadows → motion → base).
   Consumers link THIS file only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- Colors ------------------------------------------------ */
:root {
  /* Brand: Ember */
  --ember-50:#fff7ed; --ember-100:#ffedd5; --ember-200:#fed7aa; --ember-300:#fdba74;
  --ember-400:#fb923c; --ember-500:#f97316; --ember-600:#ea580c; --ember-700:#c2410c;
  --ember-800:#9a3412; --ember-900:#7c2d12; --ember-950:#431407;

  /* Ink: warm-neutral grayscale */
  --ink-0:#ffffff; --ink-50:#f7f6f4; --ink-100:#efedea; --ink-200:#e2dfda; --ink-300:#cbc7c0;
  --ink-400:#a39e95; --ink-500:#78736b; --ink-600:#57534c; --ink-700:#403d38;
  --ink-800:#292723; --ink-900:#1b1a17; --ink-950:#121110;

  --green-50:#f0fdf4; --green-100:#dcfce7; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-500:#eab308; --amber-600:#ca8a04; --amber-700:#a16207;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;

  /* Semantic aliases — light (default) */
  --bg:var(--ink-50); --surface:var(--ink-0); --surface-2:var(--ink-50); --surface-3:var(--ink-100); --surface-inset:var(--ink-100);
  --border:var(--ink-200); --border-strong:var(--ink-300); --border-subtle:var(--ink-100);
  --text:var(--ink-900); --text-muted:var(--ink-600); --text-subtle:var(--ink-500); --text-invert:var(--ink-0);
  --primary:var(--ember-600); --primary-hover:var(--ember-700); --primary-active:var(--ember-800);
  --primary-fg:#ffffff; --primary-soft:var(--ember-50); --primary-soft-fg:var(--ember-700); --ring:var(--ember-500);
  --success:var(--green-600); --success-bg:var(--green-50); --success-fg:var(--green-700);
  --warning:var(--amber-600); --warning-bg:var(--amber-50); --warning-fg:var(--amber-700);
  --danger:var(--red-600); --danger-bg:var(--red-50); --danger-fg:var(--red-700);
  --info:var(--blue-600); --info-bg:var(--blue-50); --info-fg:var(--blue-700);
  --selection-bg:var(--ember-200);
}
[data-theme="dark"] {
  --bg:var(--ink-950); --surface:var(--ink-900); --surface-2:var(--ink-800); --surface-3:#34312c; --surface-inset:#0c0b0a;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --border-subtle:rgba(255,255,255,.06);
  --text:var(--ink-50); --text-muted:var(--ink-400); --text-subtle:var(--ink-500); --text-invert:var(--ink-950);
  --primary:var(--ember-500); --primary-hover:var(--ember-400); --primary-active:var(--ember-600);
  --primary-fg:#1b1a17; --primary-soft:rgba(234,88,12,.14); --primary-soft-fg:var(--ember-300); --ring:var(--ember-500);
  --success:var(--green-500); --success-bg:rgba(34,197,94,.12); --success-fg:#4ade80;
  --warning:var(--amber-500); --warning-bg:rgba(234,179,8,.12); --warning-fg:#facc15;
  --danger:var(--red-500); --danger-bg:rgba(239,68,68,.12); --danger-fg:#f87171;
  --info:var(--blue-500); --info-bg:rgba(59,130,246,.12); --info-fg:#60a5fa;
  --selection-bg:rgba(234,88,12,.35);
}

/* ---- Typography ------------------------------------------- */
:root {
  --font-serif:'Newsreader','Georgia','Times New Roman',serif;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,'Menlo',monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.8125rem; --text-base:0.9375rem; --text-md:1rem;
  --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:4rem; --text-6xl:5.25rem;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tighter:-0.03em; --tracking-tight:-0.015em; --tracking-normal:0em; --tracking-wide:0.02em; --tracking-mono:0.04em; --tracking-caps:0.08em;
  --font-display:var(--font-serif); --font-heading:var(--font-sans); --font-body:var(--font-sans); --font-ui:var(--font-sans); --font-label:var(--font-mono);
}

/* ---- Spacing ---------------------------------------------- */
:root {
  --space-0:0; --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; --space-32:8rem;
  --control-sm:1.75rem; --control-md:2.25rem; --control-lg:2.75rem;
  --container:72rem; --container-sm:48rem; --sidebar:15rem; --gutter:var(--space-6);
}

/* ---- Radius ----------------------------------------------- */
:root {
  --radius-none:0; --radius-xs:3px; --radius-sm:5px; --radius-md:7px; --radius-lg:10px; --radius-xl:14px; --radius-2xl:20px; --radius-full:9999px;
}

/* ---- Shadows / elevation ---------------------------------- */
:root {
  --shadow-xs:0 1px 2px rgba(18,17,16,.06);
  --shadow-sm:0 1px 2px rgba(18,17,16,.06),0 1px 3px rgba(18,17,16,.08);
  --shadow-md:0 2px 4px rgba(18,17,16,.06),0 4px 12px rgba(18,17,16,.08);
  --shadow-lg:0 4px 8px rgba(18,17,16,.06),0 12px 28px rgba(18,17,16,.12);
  --shadow-xl:0 8px 16px rgba(18,17,16,.08),0 24px 56px rgba(18,17,16,.16);
  --ring-width:3px;
  --ring-shadow:0 0 0 var(--ring-width) color-mix(in srgb, var(--ring) 35%, transparent);
  --shadow-inset:inset 0 0 0 1px var(--border);
}
[data-theme="dark"] {
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 4px 8px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.6);
  --shadow-xl:0 8px 16px rgba(0,0,0,.55),0 24px 56px rgba(0,0,0,.7);
}

/* ---- Motion ----------------------------------------------- */
:root {
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in:cubic-bezier(0.4,0,1,1);
  --duration-instant:80ms; --duration-fast:140ms; --duration-base:200ms; --duration-slow:320ms;
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
}

/* ---- Base element defaults -------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
::selection { background:var(--selection-bg); }
body {
  margin:0; font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal);
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--font-display); font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); color:var(--text); }
h4,h5,h6 { font-family:var(--font-heading); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); line-height:var(--leading-snug); }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
code,kbd,samp,pre { font-family:var(--font-mono); font-size:0.92em; }
.eyebrow { font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); }