/* Akku design tokens — shared across all DS cards · v2 */

/* ====== Fonts — variable, self-hosted ====== */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Georama';
  src: url('assets/fonts/Georama/Georama-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Georama';
  src: url('assets/fonts/Georama/Georama-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 150%;
  font-style: italic;
  font-display: swap;
}

:root{
  /* ====== Type system ====== */
  --font-display: 'Georama', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — balanced-expressive. Consumed by components via aliases. */
  --text-xs:   12px;   /* meta, labels */
  --text-sm:   13px;   /* secondary UI */
  --text-base: 15px;   /* body default */
  --text-md:   17px;   /* lede, emphasis */
  --text-lg:   20px;   /* section titles */
  --text-xl:   26px;   /* heading */
  --text-2xl:  34px;   /* large heading */
  --text-3xl:  48px;   /* display M */
  --text-4xl:  64px;   /* display L */
  --text-5xl:  88px;   /* hero */

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.14em;

  --leading-display: 1.02;
  --leading-heading: 1.1;
  --leading-body:    1.55;
  --leading-ui:      1.4;

  /* ====== Spacing — 4px base, exponential at the top ====== */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 128px;

  /* ====== Radii ====== */
  --radius-xs:  4px;   /* pills inside compact UI, checkboxes */
  --radius-sm:  6px;   /* inputs, chips */
  --radius-md:  10px;  /* buttons, small cards */
  --radius-lg:  14px;  /* cards, panels */
  --radius-xl:  20px;  /* surfaces, modals */
  --radius-2xl: 28px;  /* hero cards */
  --radius-full: 999px;

  /* ====== Elevation — iris-tinted, cool-direction shadows ====== */
  --shadow-xs: 0 1px 1px -0.5px rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 2px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 10px -4px rgba(15, 23, 42, 0.10), 0 8px 16px -8px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 24px -12px rgba(15, 23, 42, 0.14), 0 20px 40px -20px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 24px 48px -24px rgba(15, 23, 42, 0.20), 0 40px 80px -40px rgba(15, 23, 42, 0.10);
  --shadow-iris: 0 12px 28px -14px rgba(45, 17, 150, 0.35), 0 4px 10px -6px rgba(45, 17, 150, 0.22);
  --shadow-coral: 0 12px 28px -14px rgba(136, 53, 24, 0.30), 0 4px 10px -6px rgba(136, 53, 24, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(15, 23, 42, 0.04);

  /* ====== Motion ====== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* iris — PRIMARY */
  --iris-50:#F2E7FF; --iris-100:#E2CFFF; --iris-200:#CBAFFF; --iris-300:#B590FE; --iris-400:#9E70FE;
  --iris-500:#8D58FE; --iris-600:#7345E2; --iris-700:#4926B5; --iris-800:#2F1298; --iris-900:#230D75; --iris-950:#02001A;
  /* coral — SECONDARY */
  --coral-50:#FFF3EE; --coral-100:#FFE1D4; --coral-200:#FFC3A8; --coral-300:#FFA37C; --coral-400:#FF925F;
  --coral-500:#FF7F50; --coral-600:#E36238; --coral-700:#B54924; --coral-800:#883518; --coral-900:#5F2410; --coral-950:#321208;
  /* teal — ACCENT */
  --teal-50:#E6FCFB; --teal-100:#C5F7F5; --teal-200:#8CEFEB; --teal-300:#50E2DD; --teal-400:#1FCEC9;
  --teal-500:#0ABAB5; --teal-600:#089A96; --teal-700:#087873; --teal-800:#085C59; --teal-900:#084846; --teal-950:#022825;

  /* Tailwind-backed state */
  --color-success:#16A34A; --color-success-surface:#F0FDF4; --on-success:#fff;
  --color-warning:#F59E0B; --color-warning-surface:#FFFBEB; --on-warning:#451A03;
  --color-danger:#DC2626;  --color-danger-surface:#FEF2F2;  --on-danger:#fff;
  --color-info:#2563EB;    --color-info-surface:#EFF6FF;    --on-info:#fff;

  /* Neutrals (Tailwind slate) */
  --bg:#FBFAFE; --bg-elev:#ffffff;
  --ink:#0F172A; --ink-muted:#475569; --ink-subtle:#64748B;
  --rule:#E2E8F0;

  /* ====== ROLE ALIASES — components consume these ====== */
  --color-primary:        var(--iris-500);
  --color-primary-fg:     #ffffff;
  --color-primary-hover:  var(--iris-600);
  --color-primary-muted:  var(--iris-100);
  --color-primary-subtle: var(--iris-50);
  --color-primary-strong: var(--iris-800);

  --color-secondary:        var(--coral-500);
  --color-secondary-fg:     var(--coral-950);
  --color-secondary-hover:  var(--coral-600);
  --color-secondary-muted:  var(--coral-100);
  --color-secondary-subtle: var(--coral-50);
  --color-secondary-strong: var(--coral-800);

  --color-accent:        var(--teal-500);
  --color-accent-fg:     var(--teal-950);
  --color-accent-hover:  var(--teal-600);
  --color-accent-muted:  var(--teal-100);
  --color-accent-subtle: var(--teal-50);
  --color-accent-strong: var(--teal-800);

  --color-surface:      var(--bg);
  --color-surface-elev: var(--bg-elev);
  --color-ink:          var(--ink);
  --color-ink-muted:    var(--ink-muted);
  --color-ink-subtle:   var(--ink-subtle);
  --color-rule:         var(--rule);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-sans);
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  font-feature-settings: 'cv11','ss01','ss03';
}
.mono,.m{font-family: var(--font-mono); font-feature-settings: normal}
.wrap{max-width:1240px;margin:0 auto;padding:56px 40px 80px}
.ds-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:0.02em;
  color:var(--ink-muted); text-decoration:none;
  padding:6px 10px 6px 8px; border-radius:999px;
  border:1px solid var(--rule); background:var(--bg-elev);
  margin-bottom:24px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ds-back:hover{color:var(--iris-700); border-color:var(--iris-300); background:var(--iris-50)}
.ds-back .arr{font-size:14px; line-height:1}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ink-muted)}
h1{
  font-family: var(--font-display);
  font-size:clamp(34px,4.2vw,48px);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  margin:14px 0 12px;
  font-weight:600;
}
.lede{font-size:16px;color:var(--ink-muted);max-width:64ch;margin:0}
.hero{padding-bottom:36px;border-bottom:1px solid var(--rule);margin-bottom:48px}
.src{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink);background:#F1F5F9;padding:2px 6px;border-radius:4px}

/* Ramp */
.ramp{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.swatch{
  aspect-ratio:1/1.35;border-radius:10px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04);
}
.swatch .anchor{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,0.15)}
.swatch .anchor.dark{background:#0F172A;box-shadow:0 0 0 2px rgba(255,255,255,0.7)}
.swatch-meta{margin-top:8px;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-muted);letter-spacing:0.02em}
.swatch-meta .step{color:var(--ink);font-weight:500}

/* Role hero card */
.role-hero{
  display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;
  padding:28px;border:1px solid var(--rule);border-radius:16px;background:var(--bg-elev);margin-bottom:32px
}
.role-hero .big{height:140px;border-radius:12px;display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:500;font-size:13px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.role-hero h3{margin:0 0 4px;font-size:26px;letter-spacing:-0.02em;font-weight:600}
.role-hero .hex{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-muted)}
.role-hero p{margin:10px 0 0;color:var(--ink-muted);font-size:14px;max-width:60ch}
.role-hero .role-tag{display:inline-block;margin-top:12px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* Demos */
.demos{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.demo{border-radius:14px;padding:22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--rule);background:var(--bg-elev)}
.demo h4{margin:0 0 6px;font-size:15px;font-weight:600}
.demo p{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.55}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500}

/* Section helper */
section{margin-top:48px}
.sec-head{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:baseline;margin-bottom:18px}
.sec-title{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:0}
.sec-desc{color:var(--ink-muted);max-width:68ch;margin:0;font-size:14px}

/* CSS snippet */
pre.css-out{background:#0F172A;color:#E2CFFF;padding:22px;border-radius:14px;overflow-x:auto;font-size:12px;line-height:1.65;margin:0;font-family:'JetBrains Mono',monospace}

@media (max-width: 900px){
  .wrap{padding:32px 20px 60px}
  .demos{grid-template-columns:1fr}
  .role-hero,.sec-head{grid-template-columns:1fr;gap:12px}
}

/* ─── Site-wide navigation header ─────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 28px;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 0 var(--rule);
}
.site-header-left { display: flex; align-items: center; gap: 16px; }
.site-back {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-muted);
  text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.site-back svg { width: 14px; height: 14px; flex-shrink: 0; }
.site-back:hover { color: var(--iris-600); }
.site-hdiv { width: 1px; height: 16px; background: var(--rule); }
.site-logo img { height: 22px; display: block; }
.site-tool {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--teal-700);
  background: var(--teal-50); border: 1px solid var(--teal-100);
  border-radius: 100px; padding: 5px 12px;
  text-decoration: none; transition: background var(--dur-fast) var(--ease-out);
}
.site-tool svg { width: 12px; height: 12px; }
.site-tool:hover { background: var(--teal-100); }