/* ==========================================================================
   Infobrandz design tokens as CSS custom properties.
   Generated from tokens.json. Edit tokens.json first, then regenerate or edit both.
   Usage: <link rel="stylesheet" href="fonts/fonts.css"> then this file.
   Light is the default (the website). Dark: add data-theme="dark" to <html>.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colour */
  --purple: #5028ff;
  --purple-text: #5028ff;
  --lime: #d4ff00;
  --on-purple: #ffffff;
  --on-lime: #000000;
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --card: #ffffff;
  --ink: #000000;
  --ink-soft: #212121;
  --ink-muted: rgba(0, 0, 0, 0.8);
  --hairline: #000000;
  --scrim: rgba(0, 0, 0, 0.8);
  --stage: #ececec;
  --chart-mark: #5028ff;
  --chart-muted: #8c8c99;
  --chart-grid: #e8e8ec;
  --chart-mark-on-purple: #d4ff00;
  --chart-muted-on-purple: #b9aeff;
  --chart-grid-on-purple: rgba(255, 255, 255, 0.25);
  --field-ink: #0b0b0f;
  --field-offwhite: #fbfbf7;
  --lime-tint: #f8ffdc;
  --purple-tint: #8c73ff;
  --grad-purple: linear-gradient(135deg, #5028ff, #8c73ff);
  --grad-lime: linear-gradient(135deg, #d4ff00, #f8ffdc);

  /* Type families */
  --font-display: "General Sans", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-label: "Albert Sans", "Instrument Sans", system-ui, sans-serif;

  /* Type sizes (web, then video) */
  --fs-hero: 100px;
  --fs-h2: 64px;
  --fs-h2-sm: 42px;
  --fs-h3: 28px;
  --fs-lead: 24px;
  --fs-body: 18px;
  --fs-label: 16px;
  --fs-v-hero: 150px;
  --fs-v-title: 132px;
  --fs-v-caption: 60px;
  --fs-v-card-title: 54px;
  --fs-v-body: 40px;
  --fs-v-label: 36px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --radius-section: 100px;

  /* Shadow */
  --shadow-card: 0px 4px 42.6px 0px rgba(0, 0, 0, 0.1);
  --shadow-hairline: inset 0 0 0 0.8px #000000;
  --shadow-float: 0px 24px 60px 0px rgba(0, 0, 0, 0.35);

  /* Video geometry */
  --frame-portrait: 1080px 1920px;
  --frame-landscape: 1920px 1080px;
  --safe-top: 100px;
  --safe-bottom: 1650px;
  --safe-side: 64px;
  --safe-right-lower: 120px;
  --safe-landscape: 5%;
  --split-line-portrait: 960px;
  --caption-y-portrait: 1380px;
  --caption-y-portrait-panel: 790px;
  --split-line-landscape: 960px;
  --caption-y-landscape: 930px;
  --caption-y-landscape-half: 930px;
  --presenter-frame-landscape: 760px 860px;
  --video-overlap: 100px;
  --card-width-portrait: 760px;
  --card-width-landscape: 600px;
  --face-zone-portrait: 300px 160px 780px 820px;
  --face-zone-landscape: 640px 120px 1280px 760px;
  --float-scale-portrait: 1.7;
  --float-scale-landscape: 1.6;
  --line-weight: 4px;
  --shade-portrait: 1250px;
  --player-bar-y: 1040px;

  /* Motion timing */
  --t-word: 0.16s;
  --t-enter: 0.45s;
  --t-exit: 0.3s;
  --t-layout: 0.55s;
  --t-pill: 0.35s;
  --t-stretch-step: 0.12s;
  --t-stretch-hold: 0.25s;
  --t-stretch-rest: 0.7s;
  --t-sticker-loop: 1.333s;
  --t-sfx-gap: 0.35s;
  --t-chart-grow: 0.6s;
  --t-chart-stagger: 0.08s;
  --t-count: 0.8s;
  --t-flicker: 0.333s;
  --t-float-in: 0.5s;
  --t-float-idle: 3s;
  --t-settle: 0.45s;
  --t-wipe: 0.4s;
  --t-iris: 0.55s;
  --t-morph: 0.6s;
  --t-tick-run: 0.035s;
}

[data-theme="dark"] {
  color-scheme: dark;
  --purple-text: #9a85ff;
  --surface: #000000;
  --surface-alt: #1d1d1d;
  --card: #1d1d1d;
  --ink: #ffffff;
  --ink-soft: #f2f2f2;
  --ink-muted: rgba(255, 255, 255, 0.8);
  --hairline: #ffffff;
  --stage: #141414;
  --chart-mark: #9a85ff;
  --chart-muted: #6e6e7a;
  --chart-grid: #2b2b2b;
  --shadow-hairline: inset 0 0 0 0.8px #ffffff;
}

/* Type style helpers (one class per type token) */
.t-hero { font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.01; font-weight: 500; letter-spacing: -0.04em; text-transform: uppercase; }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; }
.t-h2-sm { font-family: var(--font-display); font-size: var(--fs-h2-sm); line-height: 1; font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; }
.t-h3 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; }
.t-lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.2; font-weight: 400; letter-spacing: 0.15px; }
.t-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.25; font-weight: 400; letter-spacing: 0.17px; }
.t-label { font-family: var(--font-label); font-size: var(--fs-label); line-height: 1; font-weight: 400; letter-spacing: 0.15px; }
.t-v-hero { font-family: var(--font-display); font-size: var(--fs-v-hero); line-height: 0.95; font-weight: 500; letter-spacing: -0.04em; text-transform: uppercase; }
.t-v-title { font-family: var(--font-display); font-size: var(--fs-v-title); line-height: 0.98; font-weight: 500; letter-spacing: -0.04em; text-transform: uppercase; }
.t-v-caption { font-family: var(--font-body); font-size: var(--fs-v-caption); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.t-v-card-title { font-family: var(--font-body); font-size: var(--fs-v-card-title); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; }
.t-v-body { font-family: var(--font-body); font-size: var(--fs-v-body); line-height: 1.25; font-weight: 400; letter-spacing: 0.01em; }
.t-v-label { font-family: var(--font-label); font-size: var(--fs-v-label); line-height: 1; font-weight: 400; letter-spacing: 0.01em; }