/* ============================================================
   AIXIA · Design System tokens — V7 (Sep 2024)
   Colors, type, spacing. Black + white + Scandinavian Blue,
   with Lila and Rosa as accent. Inter everywhere.
   ============================================================ */

:root {
  /* ── Brand colors ─────────────────────────────────────────── */

  /* Primary — black + white do most of the work */
  --aixia-black:        #000000;
  --aixia-white:        #ffffff;

  /* Complement — Scandinavian Blue */
  --aixia-blue:         #78A0B3;
  --aixia-blue-rgb:     120 160 179;

  /* Accent — used sparingly. Max one accent per component. */
  --aixia-lila:         #56529F;
  --aixia-lila-rgb:     86 82 159;
  --aixia-rosa:         #E84BD1;
  --aixia-rosa-rgb:     232 75 209;

  /* Neutrals — derived greys for body copy, dividers, surfaces.
     Kept tight to avoid drifting away from the black/white core. */
  --aixia-ink:          #0a0a0a;   /* near-black for body */
  --aixia-ink-2:        #1a1a1a;
  --aixia-grey-900:     #2b2b2b;
  --aixia-grey-700:     #545454;   /* secondary copy */
  --aixia-grey-500:     #8a8a8a;   /* meta / footer text */
  --aixia-grey-300:     #c8c8c8;   /* dividers */
  --aixia-grey-200:     #e2e2e2;   /* hairlines */
  --aixia-grey-100:     #f1f0ee;   /* warm-paper bg */
  --aixia-grey-50:      #f8f7f5;

  /* ── Semantic surfaces ───────────────────────────────────── */
  --bg:                 var(--aixia-white);
  --bg-paper:           var(--aixia-grey-100);
  --bg-inverse:         var(--aixia-black);

  --fg-1:               var(--aixia-ink);   /* primary text */
  --fg-2:               var(--aixia-grey-700); /* secondary */
  --fg-3:               var(--aixia-grey-500); /* meta / labels */
  --fg-inverse:         var(--aixia-white);

  --rule:               var(--aixia-grey-200);
  --rule-strong:        var(--aixia-black);

  --accent:             var(--aixia-blue);
  --accent-2:           var(--aixia-lila);
  --accent-3:           var(--aixia-rosa);

  /* ── Typography ──────────────────────────────────────────── */
  /* Default font is Inter. Helvetica is kept in the stack as a
     fallback for environments that already have it licensed. */
  --font-sans:
    "Inter", "Helvetica Neue", "Helvetica", "Arial",
    system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-mono:
    "IBM Plex Mono", "JetBrains Mono", "SF Mono", Menlo,
    Consolas, monospace;

  /* Type scale — tight, editorial, lots of whitespace.
     Tuned for 16:9 slide work AND web product UI. */
  --fs-display:         88px;   /* hero / title slide */
  --fs-h1:              64px;
  --fs-h2:              44px;
  --fs-h3:              28px;
  --fs-h4:              20px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-meta:            11px;   /* eyebrows, footer crumbs */

  --lh-tight:           0.96;
  --lh-snug:            1.12;
  --lh-normal:          1.45;
  --lh-loose:           1.6;

  --tracking-eyebrow:   0.14em;  /* ALL-CAPS labels */
  --tracking-meta:      0.10em;
  --tracking-tight:     -0.02em; /* big headlines */
  --tracking-normal:    0;

  /* Weights — brand specifies Regular, Bold, Oblique only.
     Headlines use Regular (per manual), pre-headlines use Bold. */
  --fw-regular:         400;
  --fw-medium:          500;   /* product UI only — not slides */
  --fw-bold:            700;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-0:               0;
  --sp-1:               4px;
  --sp-2:               8px;
  --sp-3:               12px;
  --sp-4:               16px;
  --sp-5:               24px;
  --sp-6:               32px;
  --sp-7:               48px;
  --sp-8:               64px;
  --sp-9:               96px;
  --sp-10:              128px;

  /* ── Radii ───────────────────────────────────────────────── */
  /* Logo is round; we lean modest-but-real. No pill UIs. */
  --radius-0:           0;
  --radius-sm:          2px;
  --radius-md:          6px;
  --radius-lg:          12px;
  --radius-xl:          24px;
  --radius-pill:        999px;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-thin:        1px solid var(--rule);
  --border-strong:      1px solid var(--rule-strong);
  --border-hair:        0.5px solid var(--rule);

  /* ── Shadows ─────────────────────────────────────────────── */
  /* Restrained. Engineering-led, not Material. */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-3: 0 24px 48px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.04);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard:      cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:           120ms;
  --dur-base:           200ms;
  --dur-slow:           400ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-content:        1200px;
  --slide-w:            1920px;
  --slide-h:            1080px;
  --slide-margin:       96px;

  /* ── Footer crumb (slides) ───────────────────────────────── */
  --footer-fs:          12px;
  --footer-tracking:    0.18em;
}

/* ============================================================
   Semantic element styles — drop this CSS in and the basic
   typographic hierarchy works. Components override locally.
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-weight: var(--fw-regular);
}

/* Headings — Regular weight per brand manual. Tight tracking
   on display sizes makes them read as editorial, not corporate. */
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow / pre-headline — Inter Bold, ALL CAPS, wide tracking. */
.eyebrow {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Meta — footer crumbs, captions, fine print */
.meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

p { margin: 0; max-width: 60ch; }
p + p { margin-top: var(--sp-4); }

small, .fine {
  font-size: var(--fs-body-sm);
  font-style: italic;     /* per brand: oblique for fine print */
  color: var(--fg-2);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

hr { border: 0; border-top: var(--border-thin); margin: var(--sp-6) 0; }

/* ============================================================
   Numbered pillar — the brand's signature list pattern.
   Use instead of plain bullets whenever there are 2–6 items.
   ============================================================ */
.pillar {
  display: flex;
  gap: var(--sp-5);
  align-items: baseline;
}
.pillar__num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  min-width: 2.4ch;
  color: var(--fg-1);
}
.pillar__num::after { content: ""; }

/* ============================================================
   Slide footer crumb pattern — "07 / 10 · CASE · KÄRCHER"
   ============================================================ */
.slide-footer {
  font-size: var(--footer-fs);
  letter-spacing: var(--footer-tracking);
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  gap: 1.2em;
  align-items: center;
}
.slide-footer__sep::before { content: "·"; padding: 0 0.6em; }