/* ISKRA Design System v1.0 · canonical tokens · 2026-08-03 */
:root{
  color-scheme:light dark;

  /* Brand spectrum: energy without generic AI-neon */
  --iskra-orange:#ff5e36;
  --iskra-yellow:#ffd83d;
  --iskra-mint:#57d19b;
  --iskra-blue:#4c88f4;
  --iskra-violet:#8566ed;
  --iskra-pink:#f0719c;

  /* Light surfaces */
  --iskra-bg:#f4f1e9;
  --iskra-surface:#fffdf7;
  --iskra-surface-soft:#eaece6;
  --iskra-ink:#102019;
  --iskra-muted:#68736c;
  --iskra-line:#d8ddd6;
  --iskra-danger:#c74735;
  --iskra-warning:#b17415;
  --iskra-success:#298963;

  /* Typography */
  --iskra-font-display:Inter,ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
  --iskra-font-body:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;
  --iskra-font-reading:Georgia,"Times New Roman",serif;
  --iskra-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --iskra-weight-regular:500;
  --iskra-weight-strong:820;
  --iskra-weight-black:950;
  --iskra-track-display:-.065em;
  --iskra-track-heading:-.042em;

  /* Fluid type */
  --iskra-type-hero:clamp(3.35rem,8.5vw,7rem);
  --iskra-type-display:clamp(2.45rem,5.5vw,4.5rem);
  --iskra-type-h1:clamp(2rem,4vw,3.55rem);
  --iskra-type-h2:clamp(1.55rem,2.5vw,2.25rem);
  --iskra-type-h3:1.25rem;
  --iskra-type-body-lg:clamp(1.05rem,1.7vw,1.35rem);
  --iskra-type-body:1rem;
  --iskra-type-small:.82rem;
  --iskra-type-micro:.69rem;

  /* 4px spacing base */
  --iskra-space-1:.25rem;
  --iskra-space-2:.5rem;
  --iskra-space-3:.75rem;
  --iskra-space-4:1rem;
  --iskra-space-5:1.5rem;
  --iskra-space-6:2rem;
  --iskra-space-7:3rem;
  --iskra-space-8:4rem;
  --iskra-space-9:6rem;
  --iskra-space-10:8rem;

  /* Shape */
  --iskra-radius-xs:.5rem;
  --iskra-radius-sm:.75rem;
  --iskra-radius-md:1rem;
  --iskra-radius-lg:1.5rem;
  --iskra-radius-xl:2rem;
  --iskra-radius-round:999px;
  --iskra-border:1px solid var(--iskra-line);
  --iskra-shadow-sm:0 6px 24px rgba(18,31,23,.06);
  --iskra-shadow-md:0 18px 55px rgba(18,31,23,.10);
  --iskra-shadow-lg:0 28px 90px rgba(18,31,23,.16);

  /* Layout */
  --iskra-container:1200px;
  --iskra-reading:720px;
  --iskra-gutter:max(1rem,calc((100vw - var(--iskra-container))/2));
  --iskra-control:44px;

  /* Motion: quick response, slow magic */
  --iskra-fast:120ms;
  --iskra-base:220ms;
  --iskra-magic:520ms;
  --iskra-ease:cubic-bezier(.2,.8,.2,1);
  --iskra-ease-pop:cubic-bezier(.2,1.4,.4,1);

  /* Backward-compatible aliases for existing project artifacts */
  --bg:var(--iskra-bg);
  --paper:var(--iskra-surface);
  --ink:var(--iskra-ink);
  --muted:var(--iskra-muted);
  --line:var(--iskra-line);
  --soft:var(--iskra-surface-soft);
  --orange:var(--iskra-orange);
  --yellow:var(--iskra-yellow);
  --mint:var(--iskra-mint);
  --blue:var(--iskra-blue);
  --violet:var(--iskra-violet);
  --pink:var(--iskra-pink);
  --danger:var(--iskra-danger);
  --red:var(--iskra-danger);
  --shadow:var(--iskra-shadow-lg);
  --r:var(--iskra-radius-lg);
  --font:var(--iskra-font-body);
  --sans:var(--iskra-font-body);
  --serif:var(--iskra-font-reading);
  --mono:var(--iskra-font-mono);
}

html.dark{
  --iskra-bg:#0e1511;
  --iskra-surface:#18221d;
  --iskra-surface-soft:#202c26;
  --iskra-ink:#f5f6ef;
  --iskra-muted:#a5afa8;
  --iskra-line:#344139;
  --iskra-danger:#ff806d;
  --iskra-warning:#ffd06a;
  --iskra-success:#70deb0;
  --iskra-shadow-sm:0 8px 26px rgba(0,0,0,.20);
  --iskra-shadow-md:0 20px 60px rgba(0,0,0,.32);
  --iskra-shadow-lg:0 32px 100px rgba(0,0,0,.44);
}

/* Developmental surfaces: one identity, different cognitive load */
[data-surface="mini"]{
  --iskra-control:56px;
  --iskra-type-body:1.1rem;
  --iskra-type-small:.95rem;
  --iskra-radius-md:1.25rem;
  --iskra-radius-lg:1.75rem;
}
[data-surface="studio"]{--iskra-control:48px}
[data-surface="creator"]{
  --iskra-control:42px;
  --iskra-type-body:.95rem;
  --iskra-type-small:.78rem;
  --iskra-radius-md:.85rem;
  --iskra-radius-lg:1.2rem;
}

@media(prefers-reduced-motion:reduce){
  :root{--iskra-fast:1ms;--iskra-base:1ms;--iskra-magic:1ms}
}