/* ============================================================
   Motoloop website — design tokens (self-contained)
   Lifted verbatim from the app's canonical token files:
   docs/tokens/{colors,typography,spacing}.css → constants/colors.ts.
   The app is night-mode only: near-black canvas, layered graphite
   surfaces, a hot "moto red" primary and an amber "loop orange"
   accent. Keep this file in sync with the app palette.
   (Fonts are loaded via the <link> in index.html.)
   ============================================================ */

:root {
  /* ---- Base surfaces (darkest → lightest) ---- */
  --bg: #0A0A0A;            /* app canvas */
  --surface-1: #161616;     /* default card / sheet */
  --surface-2: #1E1E1E;     /* raised card, segmented active */
  --surface-3: #242424;     /* hover / pressed elevation */
  --border: #2C2C2C;        /* hairline divider + card stroke */
  --tabbar: #111111;        /* bottom tab bar */
  --map-bg: #121212;        /* route-thumb backdrop */

  /* ---- Brand ---- */
  --red: #FF3B30;           /* primary — CTAs, active tab, route line */
  --red-dark: #CC2F26;      /* pressed primary */
  --orange: #FF9500;        /* accent — hangouts, secondary CTA */
  --green: #32D74B;         /* UI status — live, "riding now", go, the wave gesture */
  --green-wave: #2FD257;
  --cool: #5EC8FF;          /* tertiary route accent (events) */

  /* Signature red→orange brand gradient (wordmark "loop", accents) */
  --grad-brand: linear-gradient(100deg, #FF3B30 0%, #FF9500 100%);

  /* ---- Text ---- */
  --text: #FFFFFF;
  --text-secondary: #8E8E93;
  --text-tertiary: #6A6A70;
  --text-quaternary: #48484A;

  /* ---- Status ---- */
  --success: var(--green);
  --warning: #FF9F0A;
  --error: #FF453A;

  /* ---- Map ---- */
  --route-line: #FF3B30;

  /* ---- Avatar tint pairs (deterministic from seed) ---- */
  --tint-coral-bg: #FF6B5E;   --tint-coral-fg: #C8362B;
  --tint-amber-bg: #FFB23E;   --tint-amber-fg: #E07A00;
  --tint-sky-bg:   #5EC8FF;   --tint-sky-fg:   #2A7AC8;
  --tint-violet-bg:#9B8CFF;   --tint-violet-fg:#5B47D6;
  --tint-green-bg: #54E08A;   --tint-green-fg: #1F9E55;
  --tint-pink-bg:  #FF7EC2;   --tint-pink-fg:  #C8418A;
  --tint-teal-bg:  #7FD8D2;   --tint-teal-fg:  #2E9088;
  --tint-gold-bg:  #FFD15E;   --tint-gold-fg:  #D69A1F;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--red);
  --color-primary-pressed: var(--red-dark);
  --color-accent: var(--orange);
  --surface-canvas: var(--bg);
  --surface-card: var(--surface-1);
  --surface-raised: var(--surface-2);
  --surface-tabbar: var(--tabbar);
  --text-strong: var(--text);
  --text-muted: var(--text-secondary);
  --text-faint: var(--text-tertiary);
  --color-wave: var(--green);
  --stroke-hairline: var(--border);

  /* Tinted fills — brand colors at low alpha (chips, soft buttons) */
  --fill-red-soft: rgba(255, 59, 48, 0.10);
  --fill-red-stroke: rgba(255, 59, 48, 0.33);
  --fill-orange-soft: rgba(255, 149, 0, 0.15);
  --fill-orange-stroke: rgba(255, 149, 0, 0.30);

  /* Translucent chrome over imagery / maps */
  --scrim: rgba(10, 10, 10, 0.82);

  /* ============================================================
     Typography (from docs/tokens/typography.css)
     ============================================================ */
  --font-display: 'Archivo', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.4;

  --ls-label: 1.5px;
  --ls-mono: 0.14em;
  --ls-mono-wide: 0.18em;
  --ls-tag: 0.8px;
  --ls-tight: 0.2px;
  --ls-wordmark: -0.3px;

  /* ============================================================
     Spacing, radius, border, elevation, motion (from docs/tokens/spacing.css)
     ============================================================ */
  --space-1: 2px;  --space-2: 4px;  --space-3: 6px;  --space-4: 8px;
  --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px;
  --space-9: 18px; --space-10: 24px; --space-12: 28px; --space-16: 32px;
  --gutter: var(--space-9);
  --section-gap: var(--space-12);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  --border-hairline: 0.5px;
  --border-thin: 1px;
  --border-thick: 2px;

  --shadow-thumb: 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.50);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --press-opacity: 0.85;
  --press-opacity-btn: 0.8;
  --disabled-opacity: 0.4;
}