/*
 * Design Tokens
 * =============
 * Global variables for colors, spacing, and typography.
 * Colors use HSL. Spacing and text sizes use rem.
 */

:root {
  /* ── Text Colors ── */
  --text-light: hsl(0, 0%, 95%);
  --text-light-x: hsl(0, 0%, 70%);
  --text-light-xx: hsl(0, 0%, 50%);
  --text-light-xxx: hsl(180, 50%, 45%);
  --text-dark: hsl(0, 0%, 5%);

  /* ── Dark Backgrounds ── */
  --bg-dark: hsl(0, 0%, 10%);
  --bg-dark-l: hsl(0, 0%, 16%);
  --bg-dark-xl: hsl(0, 0%, 19%);
  --bg: hsl(0, 0%, 13%);

  /* ── Card Backgrounds ── */
  --card-bg: hsl(0, 0%, 13%);
  --card-hover-bg: hsl(0, 0%, 16%);
  --card-hover-border: hsl(229, 70%, 70%);
  --card-shadow-hover: 0 4px 16px hsla(229, 0%, 30%, 0.5);

  /* ── Light Backgrounds ── */
  --bg-light: hsl(0, 0%, 92%);

  /* ── Button Background ── */
  --button-bg: hsl(0, 0%, 10%);
  --button-bg-hover: hsl(0, 0%, 20%);
  --button-bg-primary: hsl(229, 100%, 66%);
  --button-bg-primary-hover: hsl(229, 100%, 63%);

  /* ── Button Text── */
  --button-text-primary: hsl(0, 0%, 95%);

  /* ── Status Colors ── */
  --color-completed: hsl(116, 45%, 45%);
  --color-in-progress: hsl(229, 80%, 70%);
  --color-not-covered: hsl(0, 0%, 30%);

  /* ── Feedback Colors (warnings, alerts, danger CTAs) ── */
  --color-warn: hsl(45, 96%, 56%);
  /* text on translucent fill */
  --color-warn-bg: hsla(38, 92%, 50%, 0.15);
  /* translucent banner fill */
  --color-warn-bg-strong: hsla(45, 96%, 50%, 0.22);
  /* denser fill — filled-card warnings */
  --color-warn-border: hsla(38, 92%, 50%, 0.3);

  --color-danger: hsl(0, 84%, 60%);
  /* text + solid CTA bg */
  --color-danger-hover: hsl(0, 73%, 51%);
  --color-danger-bg: hsla(0, 84%, 60%, 0.1);
  /* translucent banner fill */
  --color-danger-border: hsla(0, 84%, 60%, 0.35);

  /* ── XP ── */
  --color-xp: hsl(47, 90%, 60%);

  /* ── Links (inline text actions, e.g. SettingsModal .sm-link) ── */
  --color-link: hsl(180, 50%, 45%);

  /* ── Chat Bubbles & Message Text (components/MessageBubble/) ──
   * Light overrides live in the [data-theme="light"] block below.
   * Code-block styling is intentionally left un-tokenized. */
  --bubble-user-bg: hsl(0, 0%, 24%);
  --bubble-system-bg: hsla(0, 0%, 100%, 0.03);
  --bubble-system-text: hsl(0, 0%, 53%);

  --md-bold: hsl(86, 100%, 72%);
  --md-italic: hsl(48, 27%, 97%);
  --md-link: hsl(219, 100%, 65%);

  --code-inline-bg: hsla(0, 0%, 100%, 0.1);
  --code-inline-text: hsl(43, 99%, 69%);
  --code-inline-border: hsla(0, 0%, 100%, 0.05);

  /* ── Leaderboard ranks ──
   * Solid trophy colors + their podium-block gradient ends. The gradient
   * always uses --bg-dark-l as the top stop and the *-grad-end token as
   * the bottom stop, so changing a rank's accent here re-tints the whole
   * podium block. Used by components/LeaderboardModal/. */
  --color-rank-gold: hsl(47, 100%, 60%);
  --color-rank-gold-grad-end: hsl(47, 50%, 30%);
  --color-rank-silver: hsl(0, 0%, 90%);
  --color-rank-silver-grad-end: hsl(0, 0%, 30%);
  --color-rank-bronze: hsl(21, 70%, 55%);
  --color-rank-bronze-grad-end: hsl(21, 40%, 30%);
  /* Podium-block tint strength: % of --rank-color mixed into --bg-dark at the
   * top of the gradient (LeaderboardModal .lbm-podium-block). Per-theme (see
   * the light override below) so the hint reads equally on a dark vs light
   * surface. Too high stops reading as "surface with a hint of rank color." */
  --podium-tint: 10%;

  /* ── Borders ── */
  --border: hsl(0, 0%, 20%);
  --border-hover: hsl(0, 0%, 25%);
  --border-chip-active: hsl(0, 0%, 25%);

  /* ── Modal Backdrop ── */
  --backdrop-color: hsla(0, 0%, 0%, 0.55);
  --backdrop-blur: 3px;

  /* ── Shadows ──
   * Stronger black in dark mode — a faint shadow is invisible against a dark
   * surface; the light-mode override drops it to a subtle drop shadow. */
  --shadow-md: 0 2px 8px hsla(0, 0%, 70%, 0.05);
  --shadow-lg: 0 2px 8px hsla(0, 0%, 30%, 0.1);

  /* ── Scrollbars ── */
  --scrollbar-width: 10px;
  --scrollbar-thumb: hsl(0, 0%, 28%);
  --scrollbar-thumb-hover: hsl(0, 0%, 38%);
  --scrollbar-track: transparent;

  /* ── Border Radius ── */
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-pill: 999px;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  /*   4px */
  --space-2: 0.5rem;
  /*   8px */
  --space-3: 0.75rem;
  /*  12px */
  --space-4: 1rem;
  /*  16px */
  --space-5: 1.25rem;
  /*  20px */
  --space-7: 1.75rem;
  /*  28px */
  --space-10: 2.5rem;
  /*  40px */
  --space-15: 3.75rem;
  /*  60px */
  --space-25: 6.25rem;
  /* 100px */
  --space-40: 10rem;
  /* 160px */
  --space-60: 15rem;
  /* 240px */

}

/* ── Light Mode ── */
[data-theme="light"] {
  /* ── Text Colors ── */
  --text-light: hsl(0, 0%, 5%);
  --text-light-x: hsl(0, 0%, 30%);
  --text-light-xx: hsl(0, 0%, 50%);
  --text-light-xxx: hsl(180, 50%, 55%);
  --text-dark: hsl(0, 0%, 95%);

  /* ── Dark Backgrounds ── */
  --bg: hsl(0, 0%, 95%);
  --bg-dark: hsl(0, 0%, 93%);
  --bg-dark-l: hsl(0, 0%, 97%);
  --bg-dark-xl: hsl(0, 0%, 99%);


  /* ── Card Backgrounds ── */
  --card-bg: hsl(0, 0%, 97%);
  --card-hover-bg: hsl(0, 0%, 99%);
  --card-hover-border: hsl(230, 97%, 70%);
  --card-shadow-hover: 0 2px 16px hsla(229, 0%, 30%, 0.25);

  /* ── Light Backgrounds ── */
  --bg-light: hsl(0, 0%, 8%);

  /* ── Button Background ── */
  --button-bg: hsl(0, 0%, 95%);
  --button-bg-hover: hsl(0, 0%, 99%);

  --button-bg-primary: hsl(240, 100%, 70%);
  --button-bg-primary-hover: hsl(240, 100%, 63%);

  /* ── Button Text── */
  --button-text-primary: hsl(0, 0%, 95%);

  /* ── Status Colors ── */
  --color-completed: hsl(116, 45%, 45%);
  --color-in-progress: hsl(240, 100%, 70%);
  --color-not-covered: hsl(0, 0%, 85%);

  /* ── Leaderboard ranks ──
   * Solid trophy colors + their podium-block gradient ends. The gradient
   * always uses --bg-dark-l as the top stop and the *-grad-end token as
   * the bottom stop, so changing a rank's accent here re-tints the whole
   * podium block. Used by components/LeaderboardModal/. */
  --color-rank-gold: hsl(47, 87%, 50%);
  --color-rank-gold-grad-end: hsl(47, 84%, 30%);
  --color-rank-silver: hsl(0, 0%, 50%);
  --color-rank-silver-grad-end: hsl(0, 0%, 30%);
  --color-rank-bronze: hsl(21, 70%, 60%);
  --color-rank-bronze-grad-end: hsl(21, 40%, 30%);

  /* ── Borders ── */
  --border: hsl(0, 0%, 85%);
  --border-hover: hsl(0, 0%, 90%);
  --border-chip-active: hsl(0, 0%, 90%);

  /* ── Scrollbars ── */
  --scrollbar-thumb: hsl(0, 0%, 80%);
  --scrollbar-thumb-hover: hsl(0, 0%, 70%);

  /* ── Shadows ── */
  --shadow-md: 0 2px 16px hsla(0, 0%, 0%, 0.05);
  --shadow-lg: 0 2px 16px hsla(0, 0%, 0%, 0.1);

  /* ── Leaderboard podium tint ── (see :root note) */
  --podium-tint: 18%;

  /* ── XP ── */
  --color-xp: hsl(35, 100%, 50%);

  /* ── Links ── */
  --color-link: hsl(220, 100%, 60%);

  /* ── Chat Bubbles & Message Text ── */
  --bubble-user-bg: hsl(0, 0%, 92%);
  --bubble-system-bg: hsla(0, 0%, 0%, 0.04);
  --bubble-system-text: hsl(0, 0%, 45%);

  --md-bold: hsl(219, 97%, 53%);
  --md-italic: hsl(0, 0%, 15%);
  --md-link: hsl(220, 100%, 50%);

  --code-inline-bg: hsla(0, 0%, 99%);
  --code-inline-text: hsl(10, 100%, 60%);
  --code-inline-border: hsla(0, 0%, 85%);


  /* ── Feedback Colors (warnings, alerts, danger CTAs) ── */
  --color-warn: hsl(35, 100%, 60%);
  /* text on translucent fill */
  --color-warn-bg: hsla(35, 92%, 90%, 0.20);
  /* translucent banner fill */
  --color-warn-bg-strong: hsla(45, 96%, 50%, 0.22);
  /* denser fill — filled-card warnings */
  --color-warn-border: hsla(38, 92%, 50%, 0.3);

  --color-danger: hsl(0, 84%, 60%);
  /* text + solid CTA bg */
  --color-danger-hover: hsl(0, 73%, 51%);
  --color-danger-bg: hsla(0, 84%, 90%, 0.1);
  /* translucent banner fill */
  --color-danger-border: hsla(0, 84%, 60%, 0.35);
}

:root {
  /* ── Font Weights ── */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Text Sizes ── */
  --ts-xs: 0.75rem;
  /* 12px */
  --ts-sm: 0.875rem;
  /* 14px */
  --ts-base: 1rem;
  /* 16px */
  --ts-md: 1.125rem;
  /* 18px */
  --ts-lg: 1.25rem;
  /* 20px */
  --ts-xl: 1.5rem;
  /* 24px */
  --ts-2xl: 2.25rem;
  /* 36px */
  --ts-3xl: 3rem;
  /* 48px */
  --ts-4xl: 4rem;
  /* 64px */
}