/* Design tokens. SUPER INTELLIGENCE keeps GROKFIGHT's sticker vocabulary (thick ink
   outlines, hard drop shadows, stripes, rosettes) and trades its pastels for a party
   fighter's primaries: red for player one, blue for player two, yellow, green, gold, all
   on a deep royal night. Change a colour here, never inline. */

@property --feature-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-sans: "Nunito", system-ui, sans-serif;

  /* the four player colours, gold, and the night they sit on */
  --si-red: #e8112d;
  --si-red-deep: #a10a1d;
  --si-red-soft: #ff8795;
  --si-blue: #1f6bff;
  --si-blue-deep: #0d3eb4;
  --si-blue-soft: #8fb8ff;
  --si-yellow: #ffcc1a;
  --si-yellow-deep: #c98a00;
  --si-green: #1fbf5a;
  --si-green-deep: #0c8a3a;
  --si-gold: #ffc21a;
  --si-gold-deep: #c98600;
  --si-night: #0b1440;
  --si-night-2: #14226a;
  --si-royal: #2446c6;

  --radius: 1.2rem;
  --background: #101c55;
  --foreground: #16131f;
  /* text straight on the night backdrop */
  --on-page: #ffffff;
  --on-page-muted: #b9c4ee;
  --card: #ffffff;
  --card-solid: #ffffff;
  --muted: #eef1fb;
  --muted-foreground: #4b5577;
  --border: #16131f;
  --input: #d5dbf3;
  --ring: rgb(255 204 26 / .6);

  --primary: var(--si-red);
  --primary-foreground: #ffffff;
  --primary-border: var(--si-red-deep);
  --secondary: #e7edff;
  --accent: var(--si-gold);

  /* the old pastel names, now bright enough to sit next to the primaries */
  --sky-soft: #9cc8ff;
  --pink-soft: #ffa3b1;
  --lemon-soft: #ffe066;
  --mint-soft: #86e3a8;
  --violet-soft: #c3a8ff;
  --peach-soft: #ffc08a;
  --aqua-soft: #8fe6f2;
  --lavender-soft: #c8cffc;
  --coral-soft: #ff9a86;
  --magenta-soft: #ff9ad8;
  --lime-soft: #d6f56b;
  --grape-soft: #b58cff;
  --cherry-soft: #ff8f9c;
  --tangerine-soft: #ffb46b;
  --honey-soft: #ffd66b;
  --leaf-soft: #8fe29a;
  --teal-soft: #7fe0d0;
  --periwinkle-soft: #a9b8ff;
  --gold-soft: #ffd35c;
  --rose-soft: #ff9fb4;
  --buy-fomo: #5aa9ff;
  --buy-pump: #3ddc84;
  --pulse: #3ddc84;
  --destructive: #e5383b;

  /* (GROKFIGHT's follower tiers; a few old rules still read them) */
  --tier-base: #e7edff;
  --tier-base-fg: #16131f;
  --tier-5k: #86e3a8;
  --tier-5k-fg: #16131f;
  --tier-10k: #ffe066;
  --tier-10k-fg: #16131f;
  --tier-50k: #ffc08a;
  --tier-50k-fg: #16131f;
  --tier-100k: #ffa3b1;
  --tier-100k-fg: #16131f;
  --tier-1m: #c3a8ff;
  --tier-1m-fg: #16131f;

  /* player colours: 1P red, 2P blue, a CPU grey */
  --p1: var(--si-red);
  --p1-border: var(--si-red-deep);
  --p2: var(--si-blue);
  --p2-border: var(--si-blue-deep);
  --cpu: #8a93b8;
  --cpu-border: #5a6389;

  --shadow-candy: 0 6px 0 var(--primary-border), 0 14px 28px rgb(0 0 0 / .35);
  --shadow-candy-hover: 0 9px 0 var(--primary-border), 0 18px 34px rgb(0 0 0 / .4);
  --shadow-cloud: 0 5px 0 rgb(0 0 0 / .3), 0 10px 22px rgb(0 0 0 / .22);

  /* the night: a spotlight, light rays, a comic halftone, royal blue to midnight */
  --si-backdrop:
    radial-gradient(ellipse 58% 52% at 50% 36%, rgb(255 255 255 / .16), transparent 70%),
    repeating-conic-gradient(from -4deg at 50% 36%, rgb(255 255 255 / .05) 0deg 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / .08) 1.1px, transparent 1.6px),
    linear-gradient(180deg, #2748c9 0%, #16236b 48%, #0b1440 100%);
  --si-backdrop-size: auto, auto, 12px 12px, auto;
}

/* the blue theme (player two's side of things) */
[data-family-theme="blue"] {
  --pink-soft: var(--si-blue-soft);
  --primary: var(--si-blue);
  --primary-border: var(--si-blue-deep);
}