/* =============================================================
   ZennAI Design System — Foundations
   Three directions. Each direction is a self-contained token set.
   Apply [data-direction="a|b|c"] on the root to swap.
   ============================================================= */

/* ---------- Webfonts (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,700&family=Instrument+Serif:ital@0;1&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* =============================================================
   GLOBAL — applies to all directions unless overridden
   ============================================================= */
:root {
  /* Spacing — 8pt-ish, tighter at the small end */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;
  --space-12: 256px;

  /* Border radii — generally very tight across all directions; ZennAI is editorial */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Easings */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Durations */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --dur-marquee: 32s;

  /* Z-index */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Default direction = A */
  --bg: #ffffff;
  --bg-elev: #f4f4f4;
  --fg: #0a0a0a;
  --fg-muted: #6b6b6b;
  --fg-faint: #b6b6b6;
  --border: #e6e6e6;
  --border-strong: #0a0a0a;
  --accent: #ff2d00;
  --accent-fg: #ffffff;
  --tape: #0a0a0a;
  --tape-fg: #ffffff;

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-display: "Geist", system-ui, sans-serif;
  --font-serif: "Bodoni Moda", serif;
  --font-italic: "Instrument Serif", serif;
}

/* =============================================================
   DIRECTION A — "OFF-RECORD"
   Off-White inspired editorial brutalism.
   White/black/signal-red. Industrial labels. "QUOTATION" aesthetic.
   ============================================================= */
[data-direction="a"] {
  /* Surfaces */
  --bg: #ffffff;
  --bg-elev: #f2f2f2;
  --bg-inverse: #0a0a0a;

  /* Foreground */
  --fg: #0a0a0a;
  --fg-on-inverse: #ffffff;
  --fg-muted: #6b6b6b;
  --fg-faint: #b6b6b6;

  /* Borders */
  --border: #e6e6e6;
  --border-strong: #0a0a0a;
  --border-hairline: #d0d0d0;

  /* Accents */
  --accent: #ff2d00;          /* signal red */
  --accent-fg: #ffffff;
  --tape: #0a0a0a;            /* "industrial tape" */
  --tape-fg: #ffffff;
  --hazard-a: #ffd400;        /* hazard yellow */
  --hazard-b: #0a0a0a;

  /* Type families */
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-display: "Geist", system-ui, sans-serif;
  --font-italic: "Instrument Serif", serif;

  /* Type scale — display lives huge & all-caps */
  --type-display-xl: 800 clamp(72px, 14vw, 220px)/0.86 var(--font-display);
  --type-display-lg: 800 clamp(56px, 9vw, 144px)/0.88 var(--font-display);
  --type-display-md: 700 clamp(40px, 6vw, 88px)/0.92 var(--font-display);
  --type-h1: 700 56px/1.0 var(--font-display);
  --type-h2: 700 36px/1.05 var(--font-display);
  --type-h3: 600 22px/1.2 var(--font-sans);
  --type-body-lg: 400 18px/1.5 var(--font-sans);
  --type-body: 400 15px/1.55 var(--font-sans);
  --type-body-sm: 400 13px/1.5 var(--font-sans);
  --type-mono: 500 12px/1.3 var(--font-mono);
  --type-mono-sm: 500 10px/1.2 var(--font-mono);
  --type-label: 600 11px/1 var(--font-mono);
  --type-italic: italic 400 32px/1.05 var(--font-italic);

  --type-tracking-caps: 0.04em;
  --type-tracking-mono: 0.06em;

  /* Shadows — minimal */
  --shadow-card: 0 1px 0 var(--border);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.12);

  /* Radii — square as possible */
  --radius-base: 0px;
  --radius-card: 0px;
  --radius-button: 0px;
}

/* =============================================================
   DIRECTION B — "VOGUE.AI"
   Magazine de mode éditorial. Big serif. Warm off-white.
   Generous white space. Drop caps. Folio numbers.
   ============================================================= */
[data-direction="b"] {
  --bg: #faf7f2;
  --bg-elev: #f2ede4;
  --bg-inverse: #14110d;

  --fg: #14110d;
  --fg-on-inverse: #faf7f2;
  --fg-muted: #5a534a;
  --fg-faint: #b3aa9e;

  --border: #e6dfd2;
  --border-strong: #14110d;
  --border-hairline: #d8d0c2;

  --accent: #c44a3a;          /* terracotta red */
  --accent-fg: #faf7f2;
  --tape: #14110d;
  --tape-fg: #faf7f2;

  /* Type families */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-display: "Bodoni Moda", serif;
  --font-italic: "Instrument Serif", serif;

  --type-display-xl: 400 clamp(80px, 16vw, 260px)/0.86 var(--font-display);
  --type-display-lg: 400 clamp(56px, 10vw, 160px)/0.9 var(--font-display);
  --type-display-md: 400 clamp(36px, 6.5vw, 96px)/0.96 var(--font-display);
  --type-h1: 400 64px/1.0 var(--font-display);
  --type-h2: 400 40px/1.05 var(--font-display);
  --type-h3: 500 22px/1.25 var(--font-sans);
  --type-body-lg: 400 19px/1.55 var(--font-sans);
  --type-body: 400 15px/1.6 var(--font-sans);
  --type-body-sm: 400 13px/1.5 var(--font-sans);
  --type-mono: 500 12px/1.3 var(--font-mono);
  --type-mono-sm: 500 10px/1.2 var(--font-mono);
  --type-label: 500 11px/1 var(--font-mono);
  --type-italic: italic 400 36px/1.05 var(--font-italic);

  --type-tracking-caps: 0.12em;
  --type-tracking-mono: 0.06em;

  --shadow-card: 0 1px 0 var(--border);
  --shadow-pop: 0 24px 48px rgba(20, 17, 13, 0.12);

  --radius-base: 2px;
  --radius-card: 2px;
  --radius-button: 999px;
}

/* =============================================================
   DIRECTION C — "ATELIER · NUIT"
   Dark atelier. Espresso background, warm cream foreground,
   vivid cinnabar orange accent. Confident, dramatic, refined.
   ============================================================= */
[data-direction="c"] {
  --bg: #1c140a;
  --bg-elev: #2a1f12;
  --bg-inverse: #f6ead0;

  --fg: #f3e5c4;
  --fg-on-inverse: #1c140a;
  --fg-muted: #b69a73;
  --fg-faint: #6b5439;

  --border: #3a2c1a;
  --border-strong: #f3e5c4;
  --border-hairline: #3a2c1a;

  --accent: #ff5722;          /* vivid cinnabar orange */
  --accent-fg: #1c140a;
  --tape: #f3e5c4;
  --tape-fg: #1c140a;

  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-italic: "Bricolage Grotesque", system-ui, sans-serif;

  --type-display-xl: 500 clamp(72px, 12vw, 180px)/0.92 var(--font-display);
  --type-display-lg: 500 clamp(48px, 8vw, 120px)/0.95 var(--font-display);
  --type-display-md: 500 clamp(36px, 5.5vw, 72px)/1.0 var(--font-display);
  --type-h1: 500 48px/1.02 var(--font-display);
  --type-h2: 500 32px/1.1 var(--font-display);
  --type-h3: 500 20px/1.3 var(--font-sans);
  --type-body-lg: 400 18px/1.55 var(--font-sans);
  --type-body: 400 15px/1.6 var(--font-sans);
  --type-body-sm: 400 13px/1.5 var(--font-sans);
  --type-mono: 500 12px/1.3 var(--font-mono);
  --type-mono-sm: 500 10px/1.2 var(--font-mono);
  --type-label: 500 11px/1 var(--font-mono);
  --type-italic: 500 36px/1.1 var(--font-italic);

  --type-tracking-caps: 0.06em;
  --type-tracking-mono: 0.08em;

  --shadow-card: 0 1px 0 var(--border);
  --shadow-pop: 0 16px 40px rgba(26, 24, 20, 0.12);

  --radius-base: 4px;
  --radius-card: 4px;
  --radius-button: 4px;
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS — usable directly in markup
   ============================================================= */
.zai-reset, .zai-reset * { box-sizing: border-box; }

.zai-h1 { font: var(--type-display-md); letter-spacing: -0.02em; color: var(--fg); margin: 0; }
.zai-h2 { font: var(--type-h1); letter-spacing: -0.015em; color: var(--fg); margin: 0; }
.zai-h3 { font: var(--type-h2); letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.zai-h4 { font: var(--type-h3); color: var(--fg); margin: 0; }
.zai-body-lg { font: var(--type-body-lg); color: var(--fg); margin: 0; }
.zai-body { font: var(--type-body); color: var(--fg); margin: 0; }
.zai-body-sm { font: var(--type-body-sm); color: var(--fg-muted); margin: 0; }
.zai-mono { font: var(--type-mono); color: var(--fg); letter-spacing: var(--type-tracking-mono); text-transform: uppercase; }
.zai-label { font: var(--type-label); color: var(--fg-muted); letter-spacing: var(--type-tracking-mono); text-transform: uppercase; }
.zai-italic { font: var(--type-italic); color: var(--fg); }
.zai-caps { text-transform: uppercase; letter-spacing: var(--type-tracking-caps); }