@font-face {
  font-family: 'Chikn_Font_Fredoka';
  src: url('/assets/ui/Chikn_Font_Fredoka.woff2') format('woff2'),
       url('/assets/ui/Chikn_Font_Fredoka.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --rr-soil-900: #2b1c17;
  --rr-soil-700: #513529;
  --rr-cream-100: #fff8df;
  --rr-cream-200: #f7e9bd;
  --rr-hay-300: #f2cf72;
  --rr-leaf-500: #5f9f55;
  --rr-sky-400: #79bce8;
  --rr-rift-500: #8b69d9;
  --rr-rift-600: #7351c5;
  --rr-danger-500: #c64d47;
  --rr-white: #ffffff;
  --rr-focus: var(--rr-hay-300);
  --rr-surface: var(--rr-cream-100);
  --rr-surface-raised: var(--rr-white);
  --rr-text: var(--rr-soil-900);
  --rr-accent: var(--rr-rift-500);

  /* --- Dark game skin ---------------------------------------------------
     The cozy-farm surfaces above are cream, but every dialog the game actually
     ships is dark wood. Wave 3 stalled because there was no token describing
     that, so 20+ stylesheets kept their own hex. These name what is on screen.
     See docs/DESIGN_SYSTEM.md for the hex -> token mapping. */
  --rr-panel-900: #140f0a;
  --rr-panel-800: #2a231e;
  --rr-panel-700: #40352c;
  --rr-panel-600: #4a4038;
  --rr-border-strong: #5c4b3e;
  --rr-border-soft: #4a3b32;

  /* Text ramp on dark surfaces, brightest to faintest. */
  --rr-text-on-dark: #ffffff;
  --rr-text-dim: #e0e0e0;
  --rr-text-muted: #cccccc;
  --rr-text-subtle: #aaaaaa;
  --rr-text-faint: #888888;

  /* Status. --rr-danger-500 above stays the cozy-farm red; these are the
     darker UI variants the dialogs already use. */
  --rr-success-500: #66bb6a;
  --rr-success-700: #2e7d32;
  --rr-warning-500: #f0ad4e;
  --rr-danger-600: #c0392b;

  /* The bright gold used for headings, values and focus emphasis. Distinct
     from --rr-hay-300, which is the softer cozy-farm hay. */
  --rr-gold-400: #ffd400;
  --rr-gold-200: #ffe58a;

  /* Cool slate ramp: stat readouts, PvP panels and secondary metadata sit on a
     cooler grey than the wood chrome. */
  --rr-slate-100: #dde2e8;
  --rr-slate-200: #cfd6dd;
  --rr-slate-300: #b0b8c8;
  --rr-slate-400: #9098a8;
  --rr-slate-600: #7f8c8d;
  --rr-slate-800: #40454b;

  --rr-success-400: #4caf50;
  --rr-success-900: #1b5e20;
  --rr-danger-300: #ff6b6b;

  /* Podium medals carry meaning, so they are named rather than folded into the
     neutral ramp even though silver sits close to --rr-text-muted. */
  --rr-medal-gold: #ffd400;
  --rr-medal-silver: #c0c0c0;
  --rr-medal-bronze: #cd7f32;

  --rr-space-1: 4px;
  --rr-space-2: 8px;
  --rr-space-3: 12px;
  --rr-space-4: 16px;
  --rr-space-6: 24px;
  --rr-radius-sm: 8px;
  --rr-radius-md: 14px;
  --rr-radius-lg: 22px;
  --rr-radius-pill: 999px;
  --rr-shadow-card: 0 12px 34px rgb(43 28 23 / 32%);
  --rr-touch-min: 48px;
  --rr-type-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  --rr-type-body: clamp(0.95rem, 0.9rem + 0.3vw, 1.12rem);
  --rr-type-title: clamp(1.4rem, 1.1rem + 1.5vw, 2.35rem);
  --rr-motion-fast: 120ms;
  --rr-motion-base: 220ms;
  --font-family-display: 'Chikn_Font_Fredoka', system-ui, sans-serif;
  --font-family-body: 'Chikn_Font_Fredoka', system-ui, sans-serif;
  --font-ui: var(--font-family-body);
}