/* ==========================================================================
   TrainerStock design tokens
   Color communicates information:
     blue   = interactive / action
     green  = available
     gold   = rare / high value (legendary, LV50, hundo)
     violet = special / event (costume, background, legacy)
     gray   = normal metadata
   ========================================================================== */
:root {
  /* Surfaces */
  --bg: #F1F3F2;
  --bg-2: #E8ECEE;
  --surface: #FFFFFF;
  --surface-2: #F7F8F9;
  --slot: #EEF2F5;              /* inventory slot well */
  --slot-2: #E5EBF0;

  /* Ink */
  --ink: #15202D;
  --ink-2: #3E4A5A;
  --muted: #586374;
  --faint: #78838F;

  /* Lines */
  --line: #E0E4E9;
  --line-2: #CDD3DB;
  --line-strong: #AEB7C2;

  /* Action — electric sky blue */
  --blue: #1E9BFF;
  --blue-hover: #0C88EC;
  --blue-ink: #0A6BBF;          /* text-safe on white */
  --blue-tint: #E7F4FF;
  --blue-ring: rgba(30, 155, 255, .35);

  /* Availability — fresh green */
  --green: #16B26A;
  --green-ink: #0A7A47;
  --green-tint: #E5F7EE;

  /* Rare — warm gold */
  --gold: #E3A21A;
  --gold-ink: #8A5800;
  --gold-tint: #FFF4DA;
  --gold-line: #F0CD7C;

  /* Special — restrained violet */
  --violet: #7A5CF0;
  --violet-ink: #5B3FD0;
  --violet-tint: #F1EDFF;

  /* Alerts */
  --red: #E0473E;
  --red-ink: #B42C24;
  --red-tint: #FDECEA;

  /* Team colors (text labels always accompany these) */
  --team-mystic: #2F7BEA;
  --team-valor: #E0473E;
  --team-instinct: #E8B400;

  /* Type */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xxs: 12px;
  --fs-xs: 13.5px;
  --fs-sm: 14px;
  --fs-md: 15.5px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;
  --fs-3xl: 36px;

  /* Radius — deliberately restrained */
  --r-0: 0;
  --r-badge: 3px;
  --r-sm: 5px;
  --r-btn: 7px;
  --r-card: 10px;
  --r-panel: 8px;
  --r-search: 10px;

  /* Elevation */
  --sh-1: 0 1px 0 rgba(21, 32, 45, .04), 0 1px 2px rgba(21, 32, 45, .06);
  --sh-2: 0 2px 4px rgba(21, 32, 45, .05), 0 6px 16px rgba(21, 32, 45, .08);
  --sh-3: 0 10px 30px rgba(21, 32, 45, .14), 0 2px 6px rgba(21, 32, 45, .08);

  /* Layout */
  --header-h: 64px;
  --tabs-h: 48px;
  --mnav-h: 62px;
  --gutter: 16px;
  --maxw: 1400px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms;
  --t-med: 220ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 68px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}