/* ============================================================
   CAMBR — Colour & Type
   v1.1 · May 2026
   Source of truth: reference/Cambr_Design_Tokens_v1.1.docx
   Tokens are split by SURFACE: marketing (cream) vs product
   (dark primary / light secondary). The brand accent and tier
   colours are mode-independent and appear identically in all
   three surfaces.
   ============================================================ */

/* ---------- Webfonts ----------
   UI: Inter throughout (system fallback to SF Pro on iOS, Roboto on Android).
   Wordmark: Nunito — chosen for its single-storey 'a', open 'C', and rounded
   shoulders. Matches the mockup wordmark; Inter would read too sharp for the
   brand mark itself. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Nunito:wght@600;700;800&display=swap");

:root {
  /* ============ BRAND — mode independent ============ */
  --brand-rosso: #D40000;          /* Rosso Corsa — wordmark period, primary CTA, active state */
  --tier-s: #C084FC;               /* S-tier violet (apex roads) */
  --tier-a: #22C55E;               /* A-tier green */
  --tier-c: #EAB308;               /* C-tier amber */

  /* Tier fills at 15% — consistent badge treatment across both modes */
  --tier-s-fill: rgba(192, 132, 252, 0.15);
  --tier-a-fill: rgba(34, 197, 94, 0.15);
  --tier-c-fill: rgba(234, 179, 8, 0.15);

  /* ============ MARKETING SURFACE — cream, photography-forward ============
     Landing page, App Store icon, IG tiles, sharing cards, onboarding splash. */
  --marketing-bg:               #F2EAD8;   /* warm cream */
  --marketing-surface-raised:   #EAE0CC;   /* subtle differentiation on cream */
  --marketing-text-primary:     #141414;
  --marketing-text-secondary:   #6B6B6B;

  /* ============ PRODUCT — DARK MODE (primary app experience) ============ */
  --bg:               #141414;
  --bg-map:           #0A0A0A;
  --surface:          #1E1E1E;
  --surface-raised:   #272727;
  --border:           #2E2E2E;
  --text-primary:     #F5F5F5;
  --text-secondary:   #8A8A8A;
  --road-unscored:    #1E1E1E;

  /* ============ TYPE — base scale ============ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Wordmark only — never use for body or UI text */
  --font-wordmark: "Nunito", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sizes (pulled directly from the docx type table) */
  --fs-wordmark:        16px;   /* contextual, varies */
  --fs-road-name:       18px;
  --fs-score:           36px;
  --fs-mode-pill:       11px;   /* uppercase */
  --fs-tier-badge:      11px;   /* uppercase */
  --fs-button:          14px;
  --fs-signal-label:    12px;
  --fs-signal-score:    12px;
  --fs-meta:            13px;   /* location, length, kilometres */

  /* Weights */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Line height */
  --lh-tight:    1.1; /* @kind font */
  --lh-snug:     1.25; /* @kind font */
  --lh-normal:   1.5; /* @kind font */

  /* Tight wordmark letter-spacing per the docx */
  --ls-wordmark: -0.02em;
  --ls-uppercase: 0.06em;
}

/* ============================================================
   PRODUCT — LIGHT MODE (secondary)
   Toggle via [data-theme="light"] on the root or any subtree.
   ============================================================ */
[data-theme="light"] {
  /* Warm, cream-tinted daytime surface — never clinical white.
     Cards are white with a soft warm-grey border; the map carries a cream tint. */
  --bg:               #EFE9DB;
  --bg-map:           #E9E1CF;
  --surface:          #FBF8F1;
  --surface-raised:   #FFFFFF;
  --border:           #E1D8C5;
  --text-primary:     #141414;
  --text-secondary:   #6E6658;
  --road-unscored:    #CFC8B8;
}

/* ============================================================
   MARKETING SURFACE
   Scope the cream system to a subtree via [data-surface="marketing"].
   Use only on the landing page, App Store icon mockups, sharing
   cards, onboarding splash. NEVER inside the app.
   ============================================================ */
[data-surface="marketing"] {
  --bg:               var(--marketing-bg);
  --surface:          var(--marketing-bg);
  --surface-raised:   var(--marketing-surface-raised);
  --text-primary:     var(--marketing-text-primary);
  --text-secondary:   var(--marketing-text-secondary);
  --border:           rgba(20, 20, 20, 0.10);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these as opinionated defaults; override sizes where
   the design table mandates a different value.
   ============================================================ */

.cambr-base, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Wordmark ----
   ALWAYS rendered as "Cambr." with the trailing period in Rosso Corsa.
   The period replaces the visual position of the dropped 'e'.
   Uses Nunito — not Inter — for its rounded humanist character. */
.cambr-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wordmark);
  color: var(--text-primary);
  line-height: 1;
}
[data-surface="marketing"] .cambr-wordmark { color: var(--marketing-text-primary); }
.cambr-wordmark .dot { color: var(--brand-rosso); }

/* ---- Marketing display headlines (photography-forward) ---- */
.cambr-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--marketing-text-primary);
  text-wrap: balance;
}

.cambr-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-rosso);
}

/* ---- Product type ---- */
.cambr-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.cambr-road-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-road-name);
  line-height: 1.2;
  color: var(--text-primary);
}

.cambr-score {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-score);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.cambr-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.cambr-signal-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-signal-label);
  color: var(--text-secondary);
}

.cambr-signal-value {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-signal-score);
  color: var(--text-primary);
}

/* Mode pill / uppercase microcopy */
.cambr-mode-pill,
.cambr-uppercase {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-mode-pill);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
}

.cambr-tier-badge {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-tier-badge);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
}

.cambr-button-text {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  letter-spacing: 0.01em;
}