/* ==========================================================================
   Be Motion — Colors & Type
   Visual foundations. Import this file as the single source of truth.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------
   Geist (Vercel · Hubert Jocham, 2024) — modern geometric sans, full
   weight range 100–900 + italics + Latin Extended (accents complets pour
   le français). Used for both display and body — one family, two roles.

   Geist Mono — for code, project codes, microcopy with rhythm.
   Geist Pixel — bitmap accent. Used sparingly for stamps, labels,
   timecode-style decoration. NOT for running text.
   ------------------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Geist+Pixel&display=swap");

/* ---- Tokens ------------------------------------------------------------ */

:root {
  /* Font stacks */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-pixel:   "Geist Pixel", "Geist Mono", monospace;

  /* Core brand colors (from colours.svg) */
  --color-white:     #ffffff;
  --color-bone:      #f5f3f0;  /* Warm off-white — light backgrounds */
  --color-ink:       #1a1b19;  /* Near-black — primary text on light */
  --color-red:       #bb272c;  /* Brand red — deep, film-emulsion red */
  --color-orange:    #d06633;  /* Brand orange — the "between" color */
  --color-ember:     #d47134;  /* Mid-gradient stop */
  --color-amber:     #e7a73b;  /* Warm gold — gradient top */

  /* Tonal neutrals (derived from ink → bone, warm-leaning) */
  --color-ink-90:    #2a2b28;
  --color-ink-70:    #4a4b47;
  --color-ink-50:    #767671;
  --color-ink-30:    #aeaea7;
  --color-ink-15:    #d5d3ce;
  --color-ink-08:    #e6e4df;

  /* Signature gradient (sunset — the visual heartbeat of the brand) */
  --gradient-sunset: linear-gradient(90deg, #e7a73b 0%, #d47134 40%, #bb272c 100%);
  --gradient-sunset-diag: linear-gradient(135deg, #e7a73b 0%, #d47134 45%, #bb272c 100%);
  --gradient-sunset-radial: radial-gradient(circle at 30% 20%, #e7a73b 0%, #d47134 40%, #bb272c 100%);
  --gradient-ember-dark: linear-gradient(135deg, #d06633 0%, #bb272c 55%, #1a1b19 100%);

  /* Semantic — foreground / background */
  --fg-1: var(--color-ink);
  --fg-2: var(--color-ink-70);
  --fg-3: var(--color-ink-50);
  --fg-on-dark: var(--color-bone);
  --fg-on-dark-2: rgba(255,255,255,0.72);
  --fg-brand: var(--color-red);
  --fg-accent: var(--color-orange);

  --bg-1: var(--color-bone);
  --bg-2: var(--color-white);
  --bg-dark: var(--color-ink);
  --bg-brand: var(--color-red);
  --bg-accent: var(--color-orange);

  /* Borders */
  --border-subtle: rgba(26, 27, 25, 0.08);
  --border-default: rgba(26, 27, 25, 0.14);
  --border-strong: rgba(26, 27, 25, 0.28);
  --border-on-dark: rgba(255, 255, 255, 0.18);

  /* Spacing (4pt base) */
  --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;

  /* Radii — restrained; sharp dominates */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadows — soft, warm-tinted, filmic */
  --shadow-1: 0 1px 2px rgba(26, 27, 25, 0.06), 0 1px 1px rgba(26, 27, 25, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 27, 25, 0.08), 0 1px 2px rgba(26, 27, 25, 0.04);
  --shadow-3: 0 12px 32px rgba(26, 27, 25, 0.12), 0 2px 6px rgba(26, 27, 25, 0.06);
  --shadow-warm: 0 12px 32px rgba(187, 39, 44, 0.18);

  /* Transitions — cinematic, never snappy */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-cine: 820ms;

  /* Type scale (desktop). Geist sits well with tighter sizes than Arca
     because of its lower x-height-to-cap ratio — display sizes don't
     need to be as huge to read as "display". */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 88px;
  --text-6xl: 128px;

  /* Tracking — Geist asks for the OPPOSITE of Arca: tight at display,
     normal at body. The wide-tracking move now belongs to Geist Mono
     eyebrows and small-caps moments. */
  --tracking-tightest: -0.04em;  /* Hero display */
  --tracking-tight: -0.02em;     /* H1, H2 */
  --tracking-snug: -0.01em;      /* H3 */
  --tracking-normal: 0;          /* Body */
  --tracking-wide: 0.06em;
  --tracking-mono: 0.14em;       /* Geist Mono eyebrows */
  --tracking-xwide: 0.22em;      /* All-caps labels in Mono */

  --leading-tight: 1.02;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

/* ---- Base / semantic elements ----------------------------------------- */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "ss03"; /* Geist alt forms — softer "a" + open digit */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HEADLINES — Geist is set in MIXED CASE now (no more all-caps default).
   The wordmark stays uppercase via .wordmark only. */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin: 0;
}

/* Eyebrow — set in Geist Mono. This is the new identity move replacing
   the old Arca-Majora-uppercase eyebrow. */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Italic for emphasis. Geist Italic carries the "movement" of Be Motion. */
em, .em {
  font-style: italic;
  font-weight: inherit;
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  font-weight: 300;
  letter-spacing: var(--tracking-snug);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

/* Pixel — Geist Pixel for stamps, timecode, file metadata, footer notes.
   Maximum size: 18px. Don't run paragraphs in this. */
.pixel {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.72; }

::selection {
  background: var(--color-orange);
  color: var(--color-white);
}

/* Wordmark utility — recreates the "BE MOTION" lockup in Geist.
   Geist asks for tighter tracking than Arca did; this is set to
   match the SVG logo's optical spacing. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}