/* ============================================================
   Kizzy Design System — Colors
   Source of truth: Figma "Kizzy Design System"
   fileKey: WKYX66HuvsbviSPqN8BTOV
   Do not rename variables. Do not edit values by hand —
   re-extract from Figma if anything changes.
   ============================================================ */

:root {
  /* Base */
  --white:#ffffff; --black:#000000;
  /* Brand / Purple */
  --brand-1:#e7e0ff; --brand-2:#cec0ff; --brand-3:#b6a1fe; --brand-4:#9d81fe; --brand-5:#8562fe;
  --brand-6:#6a4ecb; --brand-7:#503b98; --brand-8:#352766; --brand-9:#1b1433;
  /* Gray */
  --gray-1:#e5e5e5; --gray-2:#cccccc; --gray-3:#b2b2b2; --gray-4:#999999; --gray-5:#808080;
  --gray-6:#666666; --gray-7:#4d4d4d; --gray-8:#333333; --gray-9:#1a1a1a;
  /* Text */
  --text-1:#ffffff; --text-2:#cccccc; --text-3:#999999; --text-4:#666666; --text-5:#333333;
  /* Module surfaces (canvas → elevated) */
  --module-1:#867eb8; --module-2:#5e5595; --module-3:#453f77; --module-4:#2b2850; --module-5:#191937; --module-6:#0a0b1c;
  /* Success (win/success feedback ONLY) */
  --success-1:#d1ffef; --success-2:#a2ffde; --success-3:#74ffce; --success-4:#45ffbd; --success-5:#17ffad;
  --success-6:#12cc8a; --success-7:#0e9968; --success-8:#096645; --success-9:#053323;
  /* Warning / Gold */
  --warning-1:#fff7d7; --warning-2:#feefae; --warning-3:#fee886; --warning-4:#fde05d; --warning-5:#fdd835;
  --warning-6:#caad2a; --warning-7:#988220; --warning-8:#655615; --warning-9:#332b0b;
  /* Error */
  --error-1:#fcd3cf; --error-2:#f9a69f; --error-3:#f67a6f; --error-4:#f34d3f; --error-5:#f13524;
  --error-6:#c01a0c; --error-7:#901409; --error-8:#600d06; --error-9:#300b07;
  /* Blue (links / info / bet Group B) */
  --blue-1:#e0eeff; --blue-2:#c0ddff; --blue-3:#a1ccfe; --blue-4:#81bbfe; --blue-5:#62aafe;
  --blue-6:#4e88cb; --blue-7:#3b6698; --blue-8:#274466; --blue-9:#142233;
  /* Tier ramps */
  --bronze-1:#f1ece5; --bronze-2:#e2d9cc; --bronze-3:#d4c5b2; --bronze-4:#c5b299; --bronze-5:#b79f7f; --bronze-6:#927f66; --bronze-7:#6e5f4c; --bronze-8:#494033; --bronze-9:#252019;
  --silver-1:#efeff0; --silver-2:#dedfe1; --silver-3:#ceced1; --silver-4:#bdbec2; --silver-5:#adaeb3; --silver-6:#8a8b8f; --silver-7:#68686b; --silver-8:#454648; --silver-9:#232324;
  --gold-1:#f3eee2; --gold-2:#e8ddc5; --gold-3:#dccca8; --gold-4:#d1bb8b; --gold-5:#c5aa6e; --gold-6:#9e8858; --gold-7:#766642; --gold-8:#4f442c; --gold-9:#272216;
  --platinum-1:#e4eaf4; --platinum-2:#c9d5e9; --platinum-3:#aebfdd; --platinum-4:#93aad2; --platinum-5:#7895c7; --platinum-6:#60779f; --platinum-7:#485977; --platinum-8:#303c50; --platinum-9:#181e28;
  --diamond-1:#ebe7f5; --diamond-2:#d7d0ec; --diamond-3:#c3b8e2; --diamond-4:#afa0d9; --diamond-5:#9b89cf; --diamond-6:#7c6ea6; --diamond-7:#5d527c; --diamond-8:#3e3753; --diamond-9:#1f1b29;
  /* Figma deep violets (banner/marketing gradients) */
  --violet-deep-1:#3c015d; --violet-deep-2:#50027d;
  /* ---- SEMANTIC ROLES (verified against the live product) ----
     gold = deposit / currency / ACTIVE NAV.  purple = Purple K + rewards primary.
     blue = info / links / Group B.  green = win/success feedback ONLY (never lead CTA, never active). */
  --bg-canvas:var(--module-6);
  --surface-1:var(--module-5); --surface-2:var(--module-4); --surface-3:var(--module-2);
  --text-primary:var(--text-1); --text-secondary:var(--text-2); --text-tertiary:var(--text-3); --text-quaternary:var(--text-4);
  --text-link:var(--blue-5);
  --token-keso:var(--warning-5); --token-purple-k:var(--brand-4); --token-mon:var(--brand-5);
  --action-rewards:var(--brand-4);      /* purple primary on rewards/season surfaces */
  --action-money:var(--warning-5);      /* gold: deposit / wallet */
  --nav-active:var(--warning-5);        /* gold: active nav icon/row — NOT green */
  --accent-win:var(--success-5);        /* green: win/success/confirm ONLY */
  --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.30);

  /* ---- GRADIENTS (live Figma paint styles "Gradient/hot-1" … "Gradient/hot-10") ----
     Vertical fade-ins (transparent → palette anchor), used for banner/marketing washes.
     Values read from the actual style fills in Figma. NOTE: the hex captions under the
     "Hot" column on the Color sheet are stale text — the fills below are authoritative. */
  --gradient-hot-1:linear-gradient(to bottom, rgba(69,70,72,0), #454648);     /* → silver-8 */
  --gradient-hot-2:linear-gradient(to bottom, rgba(102,102,102,0), #666666);  /* → gray-6 */
  --gradient-hot-3:linear-gradient(to bottom, rgba(39,68,102,0), #274466);    /* → blue-8 */
  --gradient-hot-4:linear-gradient(to bottom, rgba(59,102,152,0), #3b6698);   /* → blue-7 */
  --gradient-hot-5:linear-gradient(to bottom, rgba(60,1,93,0), #3c015d);      /* → violet-deep-1 */
  --gradient-hot-6:linear-gradient(to bottom, rgba(80,2,125,0), #50027d);     /* → violet-deep-2 */
  --gradient-hot-7:linear-gradient(to bottom, rgba(101,86,21,0), #655615);    /* → warning-8 */
  --gradient-hot-8:linear-gradient(to bottom, rgba(152,130,32,0), #988220);   /* → warning-7 */
  --gradient-hot-9:linear-gradient(to bottom, rgba(144,20,9,0), #901409);     /* → error-7 */
  --gradient-hot-10:linear-gradient(to bottom, rgba(192,26,12,0), #c01a0c);   /* → error-6 */
}