/* ─────────────────────────────────────────────────────────────
   ARENA — Brand color palette
   Named swatches from the "Main colours" theme (Dragon Ball naming).
   Values transcribed from the Figma palette frame + metadata.
   NOTE: the raw Figma Variable --piccolo ships blue in fig-tokens.css
   (a generic theme-template default); Arena's applied theme is ORANGE,
   so we set the real brand values here (this file imports AFTER
   fig-tokens.css in styles.css and wins).
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Primary — Piccolo (orange) ── */
  --piccolo: rgb(255,128,77);        /* #FF804D primary */
  --piccolo-hover: rgb(244,126,55);  /* #F47E37 */
  --piccolo-press: rgb(250,100,41);  /* #FA6429 */
  --ghost: rgb(255,228,214);         /* #FFE4D6 pale orange tint */

  /* ── Monochrome ramp (light → dark) ── */
  --background: rgb(255,255,255);    /* #FFFFFF */
  --page: rgb(254,254,254);          /* #FEFEFE app surface */
  --goku: rgb(245,245,245);          /* #F5F5F5 lightest gray */
  --beerus: rgb(230,230,230);        /* #E6E6E6 */
  --arkus: rgb(160,160,160);         /* #A0A0A0 mid gray */
  --trunks: rgb(112,112,112);        /* #707070 */
  --okada: rgb(75,79,84);            /* #4B4F54 */
  --bulma: rgb(41,40,40);            /* #292828 near-black brand ink */
  --bulma-pure: rgb(0,0,0);          /* #000000 */

  /* ── Accent / status hues (saturated "Full") ── */
  --salmon: rgb(245,66,78);          /* #F5424E */
  --grizzly: rgb(23,194,76);         /* #17C24C */
  --glamour: rgb(250,238,246);       /* #FAEEF6 soft pink wash */

  /* ── Semantic pastel families: soft surface + Full accent ── */
  --orange-soft: rgb(255,244,219);   --orange-full: rgb(253,193,75);  /* #FDC14B */
  --pink-soft:   rgb(250,234,242);   --pink-full:   rgb(251,104,175); /* #FB68AF */
  --green-soft:  rgb(228,249,236);   --green-full:  rgb(59,197,122);  /* #3BC57A */
  --purple-soft: rgb(244,236,255);   --purple-full: rgb(180,125,253); /* #B47DFD */
  --red-soft:    rgb(255,223,223);   --red-full:    rgb(245,92,92);   /* #F55C5C */

  /* ── Semantic aliases ── */
  --brand: var(--piccolo);
  --brand-hover: var(--piccolo-hover);
  --brand-press: var(--piccolo-press);

  --text-primary: rgba(8,8,8,0.96);   /* near-black, 96% */
  --text-secondary: rgba(8,8,8,0.56); /* 56% */
  --text-tertiary: rgba(8,8,8,0.28);  /* 28% */
  --text-on-brand: rgb(255,255,255);
  --text-negative: rgb(243,27,49);    /* #F31B31 */

  --surface-app: var(--background);
  --surface-sidebar: var(--goku);
  --surface-card: var(--background);
  --surface-hover: rgba(8,8,8,0.03);
  --surface-active: rgba(8,8,8,0.06);

  --border-subtle: rgba(8,8,8,0.06);
  --border-default: rgb(236,236,236);   /* #ECECEC card hairline */
  --border-strong: rgb(230,230,230);

  --focus-ring: var(--piccolo);
}