:root{
  /* ---- Brand core (NAOS Esports palette) ---- */
  --naos-ascend-blue:#060A25;      /* primary base, ~70% of any surface */
  --naos-bagwis-blue:#3CB0E1;      /* secondary, single UI accent, ~20% */
  --naos-ginto-prime:#EDC118;      /* accent, peak moments only, ~5% */
  --naos-precision-white:#F7F7F7;  /* accent, ~5% */

  /* ---- Accent ramp (derived from Bagwis Blue) ---- */
  --bagwis-100:#D6EEFA;
  --bagwis-200:#A9DCF3;
  --bagwis-300:#7CC9EC;
  --bagwis-400:#3CB0E1;  /* = Bagwis Blue */
  --bagwis-500:#2894C2;
  --bagwis-600:#1C7399;
  --bagwis-700:#14536F;
  --bagwis-800:#0D3549;

  /* ---- Ginto ramp (celebration only) ---- */
  --ginto-200:#F8E48C;
  --ginto-300:#F2D355;
  --ginto-400:#EDC118;  /* = Ginto Prime */
  --ginto-500:#C69E0F;
  --ginto-600:#8F710A;

  /* ---- Surface elevation steps (dark only) ---- */
  --surface-0:#060A25;   /* app/page base */
  --surface-1:#0B1133;   /* sunken rows, bars, sheets behind cards */
  --surface-2:#121A44;   /* standard card */
  --surface-3:#1A2455;   /* raised card, modal, popover */
  --surface-4:#24306A;   /* menus, tooltips, top-most */
  --surface-inset:#04081C; /* wells: inputs, track backgrounds, code */
  --surface-scrim:rgba(4,8,28,0.78);
  --surface-accent-wash:rgba(60,176,225,0.10);
  --surface-ginto-wash:rgba(237,193,24,0.12);

  /* ---- Hairlines & borders ---- */
  --border-hairline:rgba(247,247,247,0.10);
  --border-hairline-strong:rgba(247,247,247,0.18);
  --border-accent:rgba(60,176,225,0.45);
  --border-accent-solid:#3CB0E1;
  --border-ginto:rgba(237,193,24,0.55);
  --border-width:1px; /* @kind spacing */

  /* ---- Text ---- */
  --text-primary:#F7F7F7;
  --text-secondary:#A9B2CE;
  --text-tertiary:#6E78A0;
  --text-disabled:#49527A;
  --text-accent:#7CC9EC;          /* accent text ON dark, not on a fill */
  --text-ginto:#F2D355;
  --text-on-accent:#060A25;        /* HARD RULE: text on Bagwis/Ginto fills */
  --text-on-light:#060A25;

  /* ---- Semantic states ---- */
  --success:#35D08A;  --success-text:#6FE0AC; --success-wash:rgba(53,208,138,0.12);
  --warning:#F59E3C;  --warning-text:#FFBA6B; --warning-wash:rgba(245,158,60,0.12);
  --danger:#F2564B;   --danger-text:#FF8078;  --danger-wash:rgba(242,86,75,0.12);
  --info:#3CB0E1;     --info-text:#7CC9EC;    --info-wash:rgba(60,176,225,0.12);
  --state-on-fill:#060A25; /* all semantic fills carry Ascend Blue text */

  /* ---- Interaction ---- */
  --action-primary:#3CB0E1;
  --action-primary-hover:#63C2E9;
  --action-primary-press:#2894C2;
  --action-primary-text:#060A25;
  --action-secondary-border:#3CB0E1;
  --action-secondary-text:#7CC9EC;
  --action-secondary-hover-bg:rgba(60,176,225,0.12);
  --action-disabled-bg:#1A2455;
  --action-disabled-text:#49527A;
  --focus-ring:0 0 0 2px #060A25,0 0 0 4px #3CB0E1; /* @kind shadow */
}