/* SkyBlock Progress design tokens. Source of truth for colors, type, radii, spacing.
   Do not hardcode hex values in templates; use these variables. Contrast ratios are computed
   (WCAG 2.x) and listed in docs/design.md, section 9. */
:root {
  /* surfaces */
  --bg: #0B1020;
  --panel: #111830;
  --raise: #182142;

  /* lines */
  --line: #27335F;         /* decorative dividers and card borders only (1.44:1 on panel) */
  --line-strong: #5A6BA3;  /* control boundaries: inputs, outline buttons, unselected segments (>= 3:1) */

  /* text */
  --tx: #EAF0FF;
  --tx2: #A9B6D9;
  --tx3: #93A1CC;          /* smallest allowed body text color; also placeholder color */

  /* accents */
  --gold: #F5C04A;         /* primary action, progress, "available" */
  --aqua: #5CD1C8;         /* links, "in progress" */
  --on-gold: #1A1400;      /* text on gold fills */

  /* rarity (always paired with a text label; never color alone) */
  --rarity-common: #C9D1E8;
  --rarity-uncommon: #67D68A;
  --rarity-rare: #7BA8FF;
  --rarity-epic: #B994FF;
  --rarity-legendary: #F5C04A;
  --on-rarity: #0B1020;    /* text on rarity fills */

  /* data bars */
  --bar-muted: #5A6BA3;

  /* type (self-host the fonts in production; see design.md, section 10) */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* radii */
  --r-card: 18px;
  --r-control: 14px;
  --r-tile: 12px;
  --r-chip: 6px;
  /* added 2026-09-25 while implementing: values design.md section 6 names but the first
     token set lacked (perk chip 10, stepper pill 8, hero art panel 24, outline button 12) */
  --r-pill: 10px;
  --r-step: 8px;
  --r-panel: 24px;

  /* layout */
  --page-x: 64px;          /* desktop side padding */
  --page-x-mobile: 20px;
  --grid-gap: 20px;
}

input::placeholder { color: var(--tx3); opacity: 1; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }