/* tokens.css — RideLvL design system tokens.
 * Source: https://ridelvl.com (Framer site), captured 2026-06-16.
 * Brand colors corrected 2026-06-17 from canonical PNGs supplied by design team
 * (sampled from logo-stacked.png / logo-wordmark.png — see docs/design-system.md §4).
 * Single source of truth — never hardcode values in base.css/components.css.
 */
:root {
  /* === BRAND COLORS — sampled from canonical PNG assets === */
  --color-primary:           #2898FC; /* RideLvL sky blue — logo mark, links, focus */
  --color-primary-hover:     #1985F0;
  --color-primary-active:    #1670D0;
  --color-primary-soft:      #E6F2FE; /* tint for hover surfaces, info bg */
  --color-primary-deep:      #103054; /* deep navy — used in the stacked-lockup
                                         wordmark ("RIDELVL" + 3 dots). Pair with
                                         --color-primary for brand typography on
                                         white surfaces. NOT a logo-mark color. */

  --color-accent:            #EF7D4C; /* "Join the beta" CTA coral */
  --color-accent-hover:      #DC6B3D;

  /* === NEUTRALS — paired to brand, slate ramp === */
  --color-bg:                #FFFFFF;
  --color-surface:           #F8FAFC;
  --color-surface-elevated:  #FFFFFF;
  --color-border:            #E2E8F0;
  --color-border-strong:     #CBD5E1;

  --color-text:              #0F172A;
  --color-text-muted:        #475569;
  --color-text-subtle:       #94A3B8;
  --color-text-inverse:      #FFFFFF;

  /* === SEMANTIC — minimal === */
  --color-error:             #DC2626;
  --color-error-bg:          #FEF2F2;
  --color-success:           #16A34A;
  --color-success-bg:        #ECFDF5;

  /* === TYPOGRAPHY === */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — base 16px, modular */
  --fs-display: 3rem;      /* 48px */
  --fs-h1:      2.25rem;   /* 36px */
  --fs-h2:      1.5rem;    /* 24px */
  --fs-h3:      1.25rem;   /* 20px */
  --fs-body:    1rem;      /* 16px */
  --fs-small:   0.875rem;  /* 14px */
  --fs-xs:      0.75rem;   /* 12px */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* === SPACING — 4px base === */
  --sp-0: 0;
  --sp-1: 0.25rem;  /* 4  */
  --sp-2: 0.5rem;   /* 8  */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */

  /* === RADII === */
  --r-xs:   2px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* === SHADOWS === */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(40, 152, 252, 0.35); /* --color-primary @ 35% */

  /* === MOTION === */
  --t-fast:  120ms;
  --t-base:  180ms;
  --t-slow:  260ms;
  --easing:  cubic-bezier(0.2, 0.8, 0.2, 1);

  /* === LAYOUT === */
  --container-narrow: 32rem;  /* auth pages, focused content */
  --container-wide:   72rem;  /* dashboard, marketing-style */
}