/* ============================================================
   RunOrRumble — Design Tokens
   Joyful chaos. Saturday-morning cartoons. Nintendo × WWE × Sesame Street.
   ------------------------------------------------------------
   All color is authored in OKLCH for perceptual consistency and
   easy light/dark theming. Spacing is a 4px base scale. Radii
   lean extra-round (bubbly stickers & speech bubbles). Motion is
   springy and energetic.
   WCAG AA contrast is maintained for all text/surface pairings.
   ============================================================ */

@import url('fonts/fonts.css');

/* ============================================================
   1. PRIMITIVE COLOR RAMPS  (raw, mode-agnostic)
   ============================================================ */
:root {
  /* --- Brand accents (source hexes noted) --- */
  --race-yellow:   oklch(0.872 0.176 96.5);   /* #FFD600 sunshine  */
  --rumble-coral:  oklch(0.665 0.207 13.5);    /* #FF4D6A hot coral */
  --win-green:     oklch(0.701 0.163 153.5);   /* #3DBA6B grass     */
  --coin-blue:     oklch(0.742 0.123 240.5);   /* #4DB8FF sky       */

  /* Accent — darker "ink" variants for text-on-light & pressed states */
  --race-ink:      oklch(0.545 0.115 76);
  --rumble-ink:    oklch(0.520 0.190 16);
  --win-ink:       oklch(0.505 0.130 153);
  --coin-ink:      oklch(0.520 0.130 245);

  /* Accent — soft pastel tints (avatar backgrounds, badges) */
  --race-tint:     oklch(0.955 0.055 96);
  --rumble-tint:   oklch(0.945 0.045 13);
  --win-tint:      oklch(0.952 0.050 153);
  --coin-tint:     oklch(0.955 0.045 240);

  /* Pastel animal-card backgrounds (extra cuteness) */
  --pastel-lemon:  oklch(0.960 0.060 98);
  --pastel-peach:  oklch(0.928 0.055 42);
  --pastel-mint:   oklch(0.945 0.055 160);
  --pastel-sky:    oklch(0.945 0.045 235);
  --pastel-rose:   oklch(0.930 0.048 5);
  --pastel-grape:  oklch(0.930 0.045 305);

  /* Placement medals */
  --medal-gold:    oklch(0.835 0.150 88);
  --medal-silver:  oklch(0.830 0.012 250);
  --medal-bronze:  oklch(0.680 0.090 55);
}

/* ============================================================
   2. LIGHT MODE (default)  —  warm creamy white world
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surface layers: bg -> surface -> surface-2 -> offset */
  --bg:          oklch(0.985 0.012 92);    /* warm creamy white */
  --surface:     oklch(1.000 0 0);         /* pure white cards  */
  --surface-2:   oklch(0.970 0.014 92);    /* nested panels     */
  --offset:      oklch(0.945 0.018 92);    /* wells / inputs    */

  /* Text */
  --fg:          oklch(0.255 0.035 285);   /* deep ink          */
  --fg-2:        oklch(0.430 0.030 285);   /* secondary         */
  --fg-3:        oklch(0.580 0.025 285);   /* muted / captions  */
  --fg-on-accent: oklch(0.225 0.030 285);  /* ink on yellow     */
  --fg-inverse:  oklch(0.985 0.010 285);   /* white-ish on dark */

  /* Borders & lines */
  --border:      oklch(0.895 0.018 92);
  --border-strong: oklch(0.820 0.022 92);

  /* Accent-on-surface defaults (already AA on --bg) */
  --accent:        var(--race-yellow);
  --accent-ink:    var(--race-ink);
  --accent-tint:   var(--race-tint);
  --accent-contrast: var(--fg-on-accent);

  /* Shadows — soft, warm, never harsh */
  --shadow-sm:  0 1px 2px oklch(0.4 0.04 285 / 0.10);
  --shadow-md:  0 4px 12px oklch(0.4 0.04 285 / 0.12);
  --shadow-lg:  0 12px 28px oklch(0.4 0.04 285 / 0.16);
  --shadow-pop: 0 6px 0 oklch(0.4 0.04 285 / 0.14);  /* chunky cartoon drop */

  /* Focus ring (visible, AA) */
  --ring: 0 0 0 4px oklch(0.742 0.123 240.5 / 0.45);
}

/* ============================================================
   3. DARK MODE  —  deep navy-purple night
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          oklch(0.205 0.045 285);   /* deep navy-purple  */
  --surface:     oklch(0.255 0.045 285);
  --surface-2:   oklch(0.300 0.048 285);
  --offset:      oklch(0.345 0.050 285);

  --fg:          oklch(0.945 0.030 300);   /* soft lavender-white */
  --fg-2:        oklch(0.820 0.030 300);
  --fg-3:        oklch(0.680 0.030 300);
  --fg-on-accent: oklch(0.225 0.030 285);  /* ink stays dark on bright yellow */
  --fg-inverse:  oklch(0.255 0.035 285);

  --border:      oklch(0.360 0.045 285);
  --border-strong: oklch(0.460 0.050 285);

  /* Slightly brighter accents read better on dark */
  --race-tint:    oklch(0.355 0.060 96);
  --rumble-tint:  oklch(0.350 0.075 13);
  --win-tint:     oklch(0.350 0.060 153);
  --coin-tint:    oklch(0.360 0.055 240);

  --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-md:  0 4px 14px oklch(0 0 0 / 0.45);
  --shadow-lg:  0 14px 32px oklch(0 0 0 / 0.55);
  --shadow-pop: 0 6px 0 oklch(0 0 0 / 0.45);

  --ring: 0 0 0 4px oklch(0.742 0.123 240.5 / 0.55);
}

/* Dark mode is opt-in via [data-theme="dark"] (see block above).
   Consumers wanting automatic OS-driven dark can set
   data-theme="dark" from a one-line prefers-color-scheme check. */

/* ============================================================
   4. PER-MODE ACCENT THEMING
   Wrap any region in [data-mode="race|rumble|coin"] to retheme
   --accent* to that mode's color.
   ============================================================ */
[data-mode="race"]  { --accent: var(--race-yellow);  --accent-ink: var(--race-ink);   --accent-tint: var(--race-tint);   --accent-contrast: var(--fg-on-accent); }
[data-mode="rumble"]{ --accent: var(--rumble-coral); --accent-ink: var(--rumble-ink); --accent-tint: var(--rumble-tint); --accent-contrast: oklch(1 0 0); }
[data-mode="coin"]  { --accent: var(--coin-blue);    --accent-ink: var(--coin-ink);   --accent-tint: var(--coin-tint);   --accent-contrast: oklch(0.225 0.03 285); }

/* ============================================================
   5. TYPOGRAPHY
   ============================================================ */
:root {
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;

  /* Fluid type scale — clamp(min, fluid, max). 12px → 84px.
     These are font-SIZE tokens (lengths), tagged @kind spacing so the
     compiler treats them as a length scale, not font families.
     Ranges: 2xs 11–12 · xs 12–13 · sm 14–15 · base 16–17 · md 18–20
             lg 22–26 · xl 28–38 · 2xl 36–52 · 3xl 44–72 · hero 52–84 */
  --text-2xs:  clamp(0.69rem, 0.66rem + 0.15vw, 0.75rem);   /* @kind spacing */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem); /* @kind spacing */
  --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem); /* @kind spacing */
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);    /* @kind spacing */
  --text-md:   clamp(1.125rem, 1.06rem + 0.4vw, 1.25rem);   /* @kind spacing */
  --text-lg:   clamp(1.375rem, 1.25rem + 0.7vw, 1.625rem);  /* @kind spacing */
  --text-xl:   clamp(1.75rem, 1.5rem + 1.3vw, 2.375rem);    /* @kind spacing */
  --text-2xl:  clamp(2.25rem, 1.85rem + 2.1vw, 3.25rem);    /* @kind spacing */
  --text-3xl:  clamp(2.75rem, 2.1rem + 3.4vw, 4.5rem);      /* @kind spacing */
  --text-hero: clamp(3.25rem, 2.2rem + 5.2vw, 5.25rem);     /* @kind spacing */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

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

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;  /* Nunito only */

  /* ============================================================
     6. SPACING  —  4px base scale
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ============================================================
     7. RADIUS  —  extra round / bubbly
     ============================================================ */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ============================================================
     8. MOTION  —  bouncy & energetic
     ============================================================ */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --ease-spring-lg: cubic-bezier(0.34, 1.8, 0.5, 1);  /* @kind other */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --ease-snap:    cubic-bezier(0.5, 0, 0.1, 1);       /* @kind other */

  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   220ms;   /* @kind other */
  --dur-slow:   380ms;   /* @kind other */
  --dur-pop:    480ms;   /* @kind other */
  --dur-race:   2600ms;  /* @kind other */
}

/* ============================================================
   9. SEMANTIC ELEMENT DEFAULTS
   Opt-in base styles. Apply .ror-base to a root container (or
   <body>) to inherit the brand's baseline typography & colors.
   ============================================================ */
.ror-base,
.ror-type {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  font-weight: var(--weight-medium);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ror-base { background: var(--bg); }

.ror-type h1, .ror-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.ror-type h2, .ror-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.ror-type h3, .ror-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}
.ror-type h4, .ror-h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}
.ror-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.ror-type p, .ror-p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.ror-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  font-weight: var(--weight-medium);
}
.ror-caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-weight: var(--weight-semibold);
}
.ror-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ror-mono, code, kbd {
  font-family: 'Nunito', ui-monospace, monospace;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}