/* ============================================================
   Stakely — Color tokens
   Verbatim from src/theme/design-system.ts (StakelyPalette / StakelyTheme)
   ============================================================ */

:root {
  /* ---- Primary ---- */
  --color-primary-navy: #213d96;       /* primary.01 — brand navy, primary actions/text on light */
  --color-primary-orange: #ff7748;     /* primary.02 — brand orange, CTAs & accents */
  --color-primary-eggwhite: #faf2ed;   /* primary.03 — warm off-white, logo/light text on dark */

  /* ---- Secondary: semantic scales (High / Medium / Low) ---- */
  --color-yellow-high: #f59d1f;
  --color-yellow-medium: #f7c174;
  --color-yellow-low: #faeede;
  --color-red-high: #f31715;
  --color-red-medium: #f75d5c;
  --color-red-low: #ffd3d3;
  --color-blue-high: #0b8ee5;
  --color-blue-medium: #4fb4f7;
  --color-blue-low: #cfecff;
  --color-green-high: #07892d;
  --color-green-medium: #4dbe6e;
  --color-green-low: #d7ffe2;
  --color-orange-low: #fae8de;
  --color-black: #000000;

  /* ---- Background ladder (light 00 → deep navy 06) ---- */
  --color-bg-00: #ffffff;
  --color-bg-01: #e4e0e4;
  --color-bg-02: #cfcedc;
  --color-bg-03: #8994b7;   /* muted slate — placeholders, disabled */
  --color-bg-04: #1b3382;
  --color-bg-05: #14296f;
  --color-bg-06: #0d1847;
  --color-bg-07: #2f3568;   /* raised panel on dark */
  --color-bg-header: #131737;
  --color-bg-surface: #101541;
  --color-bg-onboarding-02: #21275d;

  --color-input: rgba(33, 61, 150, 0.40);  /* secondary-input field fill on dark */

  /* ============================================================
     Semantic aliases — prefer these in product code
     ============================================================ */
  --surface-app: var(--color-bg-surface);     /* default dark app canvas */
  --surface-header: var(--color-bg-header);
  --surface-panel: var(--color-bg-07);         /* cards/panels raised on dark */
  --surface-card: var(--color-primary-navy);   /* default Card background */
  --surface-light: var(--color-bg-00);         /* light surfaces / inputs */

  --text-on-dark: var(--color-primary-eggwhite);
  --text-on-dark-strong: var(--color-bg-00);
  --text-on-light: var(--color-black);
  --text-muted: var(--color-bg-03);
  --text-brand: var(--color-primary-orange);

  --action-primary: var(--color-primary-orange);
  --action-primary-hover: var(--color-primary-navy);
  --action-secondary: var(--color-primary-navy);
  --action-disabled: var(--color-bg-03);

  --border-on-dark: rgba(255, 255, 255, 0.10);  /* hairline card border on dark */
  --border-divider: var(--color-bg-07);

  --feedback-info: var(--color-primary-orange);
  --feedback-success: var(--color-green-medium);
  --feedback-error: var(--color-red-medium);
  --feedback-warning: var(--color-yellow-high);

  /* Signature "shiny" button gradient */
  --gradient-shiny: radial-gradient(60.26% 100.81% at 64.71% -33.81%, #4dbe6e 0%, rgba(28, 53, 135, 0) 100%),
    radial-gradient(272.95% 245.28% at 79.08% 145.14%, #ff7748 0%, #192f74 64.5%), #000; /* @kind color */
  /* Logo flame gradient (orange → navy) */
  --gradient-flame: linear-gradient(90deg, #fbf1eb 0%, #fda17f 55%, #ff6c36 100%); /* @kind color */
}