/**
 * Roboyouth design system — one product, not a page-by-page patch kit.
 *
 * Layer 1: tokens (color, type, space, radius, elevation, motion, icon)
 * Layer 2: primitives (.ry-btn, .ry-label, .ry-rule, .ry-chip, .ry-meter, .ry-tile)
 *
 * Every surface (path, lesson, class, leaderboard, account, sim shell)
 * imports this file. Hue and gradients carry mood; type, weight and space
 * still carry hierarchy. Coral + teal are the brand — never Duo lime.
 */
:root {
  /* ——— Color ——————————————————————————————————————————————————
     Coral upper / energy / primary CTAs. Teal lower / path / secondary. */
  --ry-cream: #FFF8F4;
  --ry-canvas: #FFF8F4;
  --ry-canvas-deep: #f3e6df;
  --ry-surface: #FFF8F4;
  --ry-surface-2: #fff1ea;
  --ry-surface-3: #f0e2da;

  --ry-ink: #1A2330;
  --ry-ink-soft: #2a3544;
  --ry-muted: #5a6674;
  --ry-faint: #7a8694;

  --ry-line: #9dced4;
  --ry-line-cool: #9ad4ec;
  --ry-line-strong: #6eb8c2;

  --ry-coral: #FC5B62;
  --ry-coral-dark: #e0444c;
  --ry-coral-deep: #b12b32;
  --ry-coral-soft: #ffd4d6;

  --ry-teal: #3FA4B3;
  --ry-teal-bright: #2EB7C9;
  --ry-teal-dark: #2d8593;
  --ry-teal-deep: #1f6a76;
  --ry-teal-soft: #c5eef3;

  /* Legacy "go" token — teal, never Duo lime #58cc02 / #3dcc14. */
  --ry-green: var(--ry-teal);
  --ry-green-dark: var(--ry-teal-dark);
  --ry-green-deep: var(--ry-teal-deep);
  --ry-green-soft: var(--ry-teal-soft);

  --ry-blue: #1cb0f6;
  --ry-blue-dark: #0d8ad0;
  --ry-blue-soft: #c4eeff;

  --ry-violet: #9b5cff;
  --ry-violet-dark: #7435e0;
  --ry-violet-soft: #eadbff;

  --ry-red: #ff4b4b;
  --ry-red-dark: #e02e2e;
  --ry-red-soft: #ffd2d4;

  --ry-amber: #ffc400;
  --ry-amber-dark: #d9a000;
  --ry-amber-soft: #fff0a8;

  --ry-orange: #ff8a00;
  --ry-orange-dark: #d96f00;

  --ry-pink: #ff3d7f;
  --ry-pink-dark: #d61f62;
  --ry-pink-soft: #ffd2e4;

  --ry-lime: #b6f000;
  --ry-lime-dark: #8bc200;

  --ry-disabled: #b8c8cc;
  --ry-disabled-edge: #93a8b0;
  --ry-disabled-ink: #ffffff;
  --ry-locked: #c5d4d8;
  --ry-locked-edge: #93a8ae;
  --ry-locked-ink: #4a6066;

  /* Section tones — coral/teal pairs (legacy names kept for data-tone). */
  --ry-tone-pink: var(--ry-coral);
  --ry-tone-pink-edge: var(--ry-coral-deep);
  --ry-tone-pink-end: var(--ry-teal);
  --ry-tone-blue: var(--ry-teal);
  --ry-tone-blue-edge: var(--ry-teal-deep);
  --ry-tone-blue-end: var(--ry-coral);
  --ry-tone-green: var(--ry-teal);
  --ry-tone-green-edge: var(--ry-teal-deep);
  --ry-tone-green-end: var(--ry-coral);
  --ry-tone-purple: var(--ry-coral);
  --ry-tone-purple-edge: var(--ry-coral-deep);
  --ry-tone-purple-end: var(--ry-teal);
  --ry-tone-teal: var(--ry-teal);
  --ry-tone-teal-edge: var(--ry-teal-dark);
  --ry-tone-teal-end: var(--ry-coral);
  --ry-tone-amber: var(--ry-coral);
  --ry-tone-amber-edge: var(--ry-coral-deep);
  --ry-tone-amber-end: var(--ry-teal);

  /* Path chapter palettes — same two hues, remapped from the old rainbow set. */
  --ry-mint: #3FA4B3;
  --ry-mint-dark: #1f6a76;
  --ry-tone-coral-gold: var(--ry-coral);
  --ry-tone-coral-gold-edge: var(--ry-coral-deep);
  --ry-tone-coral-gold-end: var(--ry-teal);
  --ry-tone-teal-violet: var(--ry-teal);
  --ry-tone-teal-violet-edge: var(--ry-teal-deep);
  --ry-tone-teal-violet-end: var(--ry-coral);
  --ry-tone-sunset: var(--ry-coral);
  --ry-tone-sunset-edge: var(--ry-coral-deep);
  --ry-tone-sunset-mid: var(--ry-teal);
  --ry-tone-sunset-end: var(--ry-teal);
  --ry-tone-mint-sky: var(--ry-teal);
  --ry-tone-mint-sky-edge: var(--ry-teal-deep);
  --ry-tone-mint-sky-end: var(--ry-coral);
  --ry-tone-berry: var(--ry-coral);
  --ry-tone-berry-edge: var(--ry-coral-deep);
  --ry-tone-berry-end: var(--ry-teal);
  --ry-tone-lagoon: var(--ry-teal);
  --ry-tone-lagoon-edge: var(--ry-teal-deep);
  --ry-tone-lagoon-end: var(--ry-coral);
  --ry-tone-reef: var(--ry-coral);
  --ry-tone-reef-edge: var(--ry-coral-deep);
  --ry-tone-reef-end: var(--ry-teal);
  --ry-tone-dusk: var(--ry-teal);
  --ry-tone-dusk-edge: var(--ry-teal-deep);
  --ry-tone-dusk-end: var(--ry-coral);

  /* Sky field — brand hues pulled 40% toward white (airy, not neon). */
  --ry-sky-coral: color-mix(in srgb, #FC5B62 60%, #ffffff);
  --ry-sky-teal: color-mix(in srgb, #3FA4B3 60%, #ffffff);

  /* Sky + hero washes — coral and teal only. */
  --ry-sky:
    radial-gradient(120% 70% at 8% -8%, color-mix(in srgb, var(--ry-sky-coral) 40%, transparent), transparent 46%),
    radial-gradient(90% 58% at 100% 8%, color-mix(in srgb, var(--ry-sky-teal) 36%, transparent), transparent 48%),
    radial-gradient(80% 50% at 78% 108%, color-mix(in srgb, var(--ry-sky-teal) 34%, transparent), transparent 52%),
    radial-gradient(58% 42% at 12% 88%, color-mix(in srgb, var(--ry-sky-coral) 18%, transparent), transparent 50%),
    var(--ry-sky-teal);
  --ry-grad-cta: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%);
  --ry-grad-banner: linear-gradient(135deg, var(--tone, var(--ry-coral)) 0%, var(--tone-end, var(--ry-teal)) 100%);
  --ry-grad-hero-lime: linear-gradient(145deg, #FC5B62 0%, #3FA4B3 100%);
  --ry-grad-hero-dusk: linear-gradient(145deg, #3FA4B3 0%, #1f6a76 48%, #FC5B62 100%);
  --ry-grad-hero-gold: linear-gradient(145deg, #ffe066 0%, #ffc400 46%, #ff8a00 100%);
  --ry-grad-hero-berry: linear-gradient(145deg, #FC5B62 0%, #3FA4B3 100%);

  /* Room skies / heroes — coral + teal, no extra brand hues. */
  --ry-sky-class:
    radial-gradient(120% 70% at 6% -10%, color-mix(in srgb, var(--ry-sky-coral) 50%, transparent), transparent 46%),
    radial-gradient(80% 52% at 100% 0%, color-mix(in srgb, var(--ry-sky-coral) 22%, transparent), transparent 44%),
    radial-gradient(70% 45% at 86% 108%, color-mix(in srgb, var(--ry-sky-teal) 18%, transparent), transparent 50%),
    color-mix(in srgb, color-mix(in srgb, #FC5B62 18%, #3FA4B3) 60%, #ffffff);
  --ry-sky-league:
    radial-gradient(120% 70% at 8% -8%, color-mix(in srgb, var(--ry-sky-teal) 48%, transparent), transparent 46%),
    radial-gradient(90% 58% at 100% 8%, color-mix(in srgb, var(--ry-sky-teal) 28%, transparent), transparent 48%),
    radial-gradient(70% 45% at 10% 108%, color-mix(in srgb, var(--ry-sky-coral) 16%, transparent), transparent 50%),
    color-mix(in srgb, color-mix(in srgb, #3FA4B3 72%, #FC5B62) 60%, #ffffff);
  --ry-sky-account:
    radial-gradient(110% 65% at 0% -8%, color-mix(in srgb, var(--ry-sky-coral) 36%, transparent), transparent 46%),
    radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--ry-sky-teal) 34%, transparent), transparent 46%),
    radial-gradient(60% 40% at 52% 110%, color-mix(in srgb, var(--ry-sky-teal) 16%, transparent), transparent 48%),
    color-mix(in srgb, color-mix(in srgb, #FC5B62 16%, #3FA4B3) 60%, #ffffff);
  --ry-grad-hero-class: linear-gradient(145deg, #FC5B62 0%, #3FA4B3 100%);
  --ry-grad-hero-league: linear-gradient(145deg, #1f6a76 0%, #3FA4B3 100%);
  --ry-grad-hero-account: linear-gradient(145deg, #FC5B62 0%, #3FA4B3 100%);
  --ry-class-edge: var(--ry-coral-deep);
  --ry-league-edge: var(--ry-teal-deep);

  /* ——— Space — 8px rhythm, one half step ——————————————————————— */
  --ry-space-half: 4px;
  --ry-space-1: 8px;
  --ry-space-1-5: 12px;
  --ry-space-2: 16px;
  --ry-space-3: 24px;
  --ry-space-4: 32px;
  --ry-space-5: 40px;
  --ry-space-6: 48px;
  --ry-gutter: 16px;
  --ry-touch: 44px;
  --ry-column: 1120px;

  /* ——— Type — Nunito throughout, hierarchy by weight and size ——— */
  --ry-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ry-fs-display: clamp(1.75rem, 5.4vw, 2.375rem);
  --ry-fs-title: 1.375rem;
  --ry-fs-heading: 1.125rem;
  --ry-fs-body: 1rem;
  --ry-fs-instruction: 1rem;
  --ry-fs-small: 0.875rem;
  --ry-fs-label: 0.75rem;
  --ry-fs-meta: 0.6875rem;

  --ry-fw-display: 900;
  --ry-fw-heading: 800;
  --ry-fw-body: 600;
  --ry-fw-strong: 800;
  --ry-fw-label: 800;

  --ry-lh-display: 1.08;
  --ry-lh-heading: 1.22;
  --ry-lh-body: 1.5;
  --ry-lh-tight: 1.2;

  --ry-tracking-display: -0.035em;
  --ry-tracking-heading: -0.02em;
  --ry-tracking-label: 0.08em;

  /* ——— Radius — small, deliberate scale (never 24px everywhere) —— */
  --ry-radius-xs: 4px;
  --ry-radius-sm: 8px;
  --ry-radius-md: 12px;
  --ry-radius-lg: 16px;
  --ry-radius-pill: 999px;

  /* ——— Border — hairlines, one strong variant —————————————————— */
  --ry-border: 1px solid var(--ry-line);
  --ry-border-cool: 1px solid var(--ry-line-cool);
  --ry-border-strong: 2px solid var(--ry-line-strong);

  /* ——— Elevation — tinted, so cards sit in color not gray fog —— */
  --ry-shadow: 0 2px 0 rgba(31, 106, 118, 0.10);
  --ry-shadow-md: 0 4px 14px rgba(63, 164, 179, 0.14);
  --ry-shadow-sm: 0 2px 0 rgba(31, 106, 118, 0.10);
  --ry-shadow-pop: 0 14px 32px rgba(22, 48, 36, 0.16);

  /* Tactile bottom edge — the one piece of dimension in the system */
  --ry-edge: 4px;
  --ry-edge-lg: 5px;
  --ry-btn-edge: inset 0 -4px rgba(0, 0, 0, 0.22);
  --ry-btn-edge-pressed: inset 0 -1px rgba(0, 0, 0, 0.22);

  /* ——— Workspace — the coding surface is a product region, not a card ——
     One header height, one action-bar height, one hairline colour, so the
     lesson shell and the simulation tab can agree on their chrome. */
  --ry-chrome: 52px;
  --ry-actionbar: 64px;
  --ry-rail: 8px;
  --ry-workspace-split: 56%;

  /* ——— Feedback intents — inline verdict text, never a toast ————— */
  --ry-fb-ink: var(--ry-ink-soft);
  --ry-fb-good-ink: var(--ry-teal-deep);
  --ry-fb-good-bg: var(--ry-teal-soft);
  --ry-fb-bad-ink: var(--ry-red-dark);
  --ry-fb-bad-bg: var(--ry-red-soft);
  --ry-fb-info-ink: var(--ry-blue-dark);
  --ry-fb-info-bg: var(--ry-blue-soft);

  /* ——— Icon —————————————————————————————————————————————————— */
  --ry-icon-sm: 14px;
  --ry-icon: 18px;
  --ry-icon-lg: 24px;
  --ry-icon-stroke: 2.2;

  /* ——— Motion — short and springy, never ornamental —————————— */
  --ry-duration-fast: 150ms;
  --ry-duration: 180ms;
  --ry-duration-slow: 220ms;
  --ry-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ry-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ——— Legacy aliases used by existing page CSS ————————————————
     Kept so no surface loses its wiring while it migrates. */
  --green: var(--ry-green);
  --green-dark: var(--ry-green-dark);
  --green-soft: var(--ry-green-soft);
  --blue: var(--ry-blue);
  --blue-dark: var(--ry-blue-dark);
  --blue-soft: var(--ry-blue-soft);
  --yellow: var(--ry-amber);
  --orange: var(--ry-orange);
  --red: var(--ry-red);
  --purple: var(--ry-violet);
  --purple-dark: var(--ry-violet-dark);
  --pink: var(--ry-pink);
  --pink-dark: var(--ry-pink-dark);
  --teal: var(--ry-teal);
  --coral: var(--ry-coral);
  --ink: var(--ry-ink);
  --muted: var(--ry-muted);
  --line: var(--ry-line-cool);
  --surface: var(--ry-surface);
  --shadow: var(--ry-shadow);
  --button-shadow: var(--ry-btn-edge);
}

@media (min-width: 768px) {
  :root {
    --ry-fs-title: 1.5rem;
    --ry-fs-heading: 1.25rem;
    --ry-gutter: 28px;
  }
}

@media (min-width: 1200px) {
  :root {
    --ry-fs-title: 1.625rem;
    --ry-gutter: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */

/* ——— Button: one primitive, four intents, three sizes ——————————
   The bottom edge is a real offset shadow so the press travels. */
.ry-btn {
  --ry-btn-bg: var(--ry-coral);
  --ry-btn-bg-hover: var(--ry-coral-dark);
  --ry-btn-fg: #ffffff;
  --ry-btn-edge-color: var(--ry-coral-deep);
  --ry-btn-travel: var(--ry-edge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ry-space-1);
  min-height: var(--ry-touch);
  padding: 0 var(--ry-space-3);
  color: var(--ry-btn-fg);
  border: 0;
  border-radius: var(--ry-radius-pill);
  background-color: var(--ry-btn-bg);
  background-image: var(--ry-grad-cta);
  box-shadow: 0 var(--ry-btn-travel) 0 var(--ry-btn-edge-color);
  font-family: var(--ry-font);
  font-size: var(--ry-fs-small);
  font-weight: var(--ry-fw-label);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--ry-duration-fast) var(--ry-ease),
    box-shadow var(--ry-duration-fast) var(--ry-ease),
    transform var(--ry-duration-fast) var(--ry-spring);
}

.ry-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ry-btn-bg-hover);
}

.ry-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(var(--ry-btn-travel));
  box-shadow: 0 0 0 var(--ry-btn-edge-color);
}

.ry-btn:focus-visible {
  outline: 2px solid var(--ry-ink);
  outline-offset: 2px;
}

.ry-btn--secondary {
  --ry-btn-bg: var(--ry-surface);
  --ry-btn-bg-hover: var(--ry-surface-2);
  --ry-btn-fg: var(--ry-ink);
  --ry-btn-edge-color: var(--ry-line-strong);
}

.ry-btn--accent {
  --ry-btn-bg: var(--ry-blue);
  --ry-btn-bg-hover: var(--ry-blue-dark);
  --ry-btn-edge-color: var(--ry-blue-dark);
}

.ry-btn--danger {
  --ry-btn-bg: var(--ry-red);
  --ry-btn-bg-hover: var(--ry-red-dark);
  --ry-btn-edge-color: var(--ry-red-dark);
}

.ry-btn--ghost {
  --ry-btn-bg: transparent;
  --ry-btn-bg-hover: var(--ry-surface-2);
  --ry-btn-fg: var(--ry-muted);
  --ry-btn-edge-color: transparent;
  --ry-btn-travel: 0px;
}

.ry-btn--ghost:hover:not(:disabled) {
  color: var(--ry-ink);
}

.ry-btn--sm {
  min-height: 36px;
  padding: 0 var(--ry-space-2);
  font-size: var(--ry-fs-label);
}

.ry-btn--lg {
  --ry-btn-travel: var(--ry-edge-lg);
  min-height: 52px;
  padding: 0 var(--ry-space-4);
  font-size: var(--ry-fs-body);
}

.ry-btn--block {
  width: 100%;
}

.ry-btn:disabled,
.ry-btn[aria-disabled="true"] {
  --ry-btn-bg: var(--ry-disabled);
  --ry-btn-bg-hover: var(--ry-disabled);
  --ry-btn-fg: var(--ry-disabled-ink);
  --ry-btn-edge-color: var(--ry-disabled-edge);
  cursor: not-allowed;
  opacity: 1;
}

/* ——— Micro label: the workhorse for eyebrows and stat captions —— */
.ry-label {
  color: var(--ry-muted);
  font-size: var(--ry-fs-label);
  font-weight: var(--ry-fw-label);
  letter-spacing: var(--ry-tracking-label);
  line-height: var(--ry-lh-tight);
  text-transform: uppercase;
}

/* ——— Hairline rule with optional inline caption ————————————————— */
.ry-rule {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  margin: 0;
}

.ry-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ry-line);
}

/* ——— Chip: static status, never a button —————————————————————— */
.ry-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-half);
  min-height: 26px;
  padding: 0 var(--ry-space-1-5);
  color: var(--ry-ink-soft);
  border-radius: var(--ry-radius-sm);
  background: var(--ry-surface-2);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-fw-label);
  letter-spacing: var(--ry-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.ry-chip--green {
  color: var(--ry-green-deep);
  background: var(--ry-green-soft);
}

.ry-chip--blue {
  color: var(--ry-blue-dark);
  background: var(--ry-blue-soft);
}

.ry-chip--amber {
  color: var(--ry-amber-dark);
  background: var(--ry-amber-soft);
}

.ry-chip--pink {
  color: var(--ry-pink-dark);
  background: var(--ry-pink-soft);
}

.ry-chip--violet {
  color: var(--ry-violet-dark);
  background: var(--ry-violet-soft);
}

/* ——— Meter: progress as a solid track with a rounded fill ———————
   Inset top highlight on the fill keeps it from reading as flat. */
.ry-meter {
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: var(--ry-radius-pill);
  background: var(--ry-surface-3);
  box-shadow: inset 0 1px 2px rgba(35, 48, 61, 0.08);
}

.ry-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ry-coral) 0%, var(--ry-teal) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32);
  transition: width var(--ry-duration-slow) var(--ry-ease);
}

/* ——— Step pips: where you are inside one lesson or one mission ————
   Done pips fill, the current one grows a ring, the rest stay hairline. */
.ry-pips {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-half);
}

.ry-pips > * {
  width: 8px;
  height: 8px;
  border-radius: var(--ry-radius-pill);
  background: var(--ry-surface-3);
  transition:
    background var(--ry-duration-fast) var(--ry-ease),
    width var(--ry-duration) var(--ry-spring);
}

.ry-pips > .is-done {
  background: var(--ry-teal);
}

.ry-pips > .is-now {
  width: 22px;
  background: var(--ry-ink);
}

/* ——— Verdict line: the action bar's own voice —————————————————— */
.ry-fb {
  min-width: 0;
  margin: 0;
  color: var(--ry-fb-ink);
  font-size: var(--ry-fs-small);
  font-weight: var(--ry-fw-body);
  line-height: var(--ry-lh-tight);
}

.ry-fb--good {
  color: var(--ry-fb-good-ink);
  font-weight: var(--ry-fw-strong);
}

.ry-fb--bad {
  color: var(--ry-fb-bad-ink);
  font-weight: var(--ry-fw-strong);
}

.ry-fb--info {
  color: var(--ry-fb-info-ink);
}

/* ——— Icon tile: square glyph holder with the tactile edge ———————— */
.ry-tile {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: #ffffff;
  border-radius: var(--ry-radius-sm);
  background: var(--ry-surface-3);
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.14);
}

/* Soft moving orbs for hero / path / success skies. Hosts position them. */
.ry-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
  opacity: 0.55;
  will-change: transform;
}

.ry-orb--lime { background: #FC5B62; }
.ry-orb--sky { background: #3FA4B3; }
.ry-orb--gold { background: #FC5B62; }
.ry-orb--berry { background: #3FA4B3; }

@keyframes ry-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, 6%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .ry-btn,
  .ry-meter > span {
    transition-duration: 0.01ms;
  }

  .ry-btn:active:not(:disabled) {
    transform: none;
  }

  .ry-orb {
    animation: none !important;
  }
}