/* ───────────────────────────────────────────────────────────────
   Kenny — Color tokens
   The brand lives on a single hot Minecraft-lava orange over near-black.
   Subscription tiers borrow Minecraft material colors.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand orange (lava) ── */
  --kenny-orange: #fe5e10;          /* primary — buttons, tags, accents   */
  --kenny-orange-hover: #ff7a3a;    /* lighter on hover                   */
  --kenny-orange-edge: #9b430e;     /* 3D block bottom edge (button base) */
  --kenny-orange-deep: #ba2708;     /* deepest pressed shadow             */
  --kenny-orange-tint: #ff9f70;     /* soft tint                          */

  /* ── Neutrals (dark, the launcher canvas) ── */
  --black: #000000;
  --ink-1: #0d0d0d;                 /* deepest panel / gradient floor     */
  --ink-2: #0e0e0e;                 /* app background                     */
  --ink-3: #111111;
  --ink-4: #171717;
  --white: #ffffff;

  /* ── Grays (light surfaces / website / placeholders) ── */
  --gray-100: #f2f2f2;
  --gray-200: #ececec;
  --gray-300: #d9d9d9;
  --gray-400: #c4c4c4;

  /* ── Subscription tier colors (Minecraft materials) ── */
  --tier-iron: #c4c4c4;
  --tier-gold: #ffe100;
  --tier-gold-deep: #ffc700;
  --tier-diamond: #4fd9e8;
  --tier-emerald: #43c25b;
  --tier-netherite: #5a4f52;

  /* ── Semantic accents (used sparingly: filters, status, links) ── */
  --blue: #3867ff;                  /* info / Telegram-ish accent         */
  --purple: #8a38f5;                /* special / rare tag                 */
  --red: #ff0000;                   /* destructive                        */
  --red-deep: #b70a0a;
  --yellow: #ffc700;                /* warning / gold currency            */

  /* ── Translucency (glass panels, scrims, borders) ── */
  --scrim-panel: rgba(14, 14, 14, 0.3);   /* frosted side menu          */
  --scrim-strong: rgba(14, 14, 14, 0.81); /* heavy overlay              */
  --hairline: rgba(255, 255, 255, 0.06);  /* 1px inner border on dark   */
  --hairline-dark: rgba(0, 0, 0, 0.1);    /* 1px border on light cards  */

  /* ── Semantic aliases (use these in components) ── */
  --bg-app: var(--ink-2);
  --bg-panel: var(--scrim-panel);
  --bg-light: var(--white);
  --surface-card: var(--white);

  --text-primary: var(--white);          /* on dark                     */
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-disabled: rgba(255, 255, 255, 0.4);
  --text-on-light: var(--black);         /* on light/website            */
  --text-on-light-muted: rgba(0, 0, 0, 0.5);
  --text-on-orange: var(--white);

  --accent: var(--kenny-orange);
  --accent-hover: var(--kenny-orange-hover);
  --border-on-dark: var(--hairline);
  --border-on-light: var(--hairline-dark);
  --currency-gold: var(--tier-gold);
}