/* ================================================================
   MARCO365 — DESIGN TOKENS (single source of truth)
   Curated from the Stake design system (colors.css / colorsfromstake).
   Two layers:
     1. Raw palette scales + semantic Stake tokens (--ds-color-*)
     2. Project aliases (--primary, --green, ...) mapped onto them
   Change a color ONCE here — it updates everywhere.
   ================================================================ */

/* ================================================================
   TYPOGRAPHY — Proxima Nova (Stake brand font, self-hosted)
   ================================================================ */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-semibold.woff2') format('woff2');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-bold.woff2') format('woff2');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Font stacks */
    --font-sans: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    /* ============================================================
       LAYER 1 — RAW PALETTE SCALES (Stake)
       ============================================================ */

    /* Blue (brand / primary) */
    --ds-color-blue-50: #f1faff;
    --ds-color-blue-100: #e4f4fe;
    --ds-color-blue-200: #c6e6ff;
    --ds-color-blue-300: #a7d7ff;
    --ds-color-blue-400: #7bc0ff;
    --ds-color-blue-450: #64b2fa;
    --ds-color-blue-500: #4aa4fb;
    --ds-color-blue-550: #2895fa;
    --ds-color-blue-600: #037fef;
    --ds-color-blue-650: #1475e1;
    --ds-color-blue-700: #0168cb;
    --ds-color-blue-750: #0359b0;
    --ds-color-blue-800: #0d519d;
    --ds-color-blue-900: #0a386d;
    --ds-color-blue-950: #08294f;

    /* Green (positive) */
    --ds-color-green-100: #deffde;
    --ds-color-green-200: #c4ffc7;
    --ds-color-green-300: #79fc7f;
    --ds-color-green-400: #37f140;
    --ds-color-green-450: #03e625;
    --ds-color-green-500: #01d612;
    --ds-color-green-550: #00be0e;
    --ds-color-green-600: #0fa112;
    --ds-color-green-700: #007d09;
    --ds-color-green-800: #0e6713;
    --ds-color-green-900: #04490a;

    /* Yellow / Gold (caution) */
    --ds-color-yellow-100: #ffe6c7;
    --ds-color-yellow-200: #ffd08a;
    --ds-color-yellow-300: #ffb947;
    --ds-color-yellow-400: #ffa91f;
    --ds-color-yellow-450: #fd9d05;
    --ds-color-yellow-500: #f69200;
    --ds-color-yellow-550: #e58200;
    --ds-color-yellow-600: #cb6804;
    --ds-color-yellow-700: #a44f00;
    --ds-color-yellow-900: #623607;

    /* Red (critical) */
    --ds-color-red-100: #ffe2e4;
    --ds-color-red-200: #ffcad0;
    --ds-color-red-300: #ff9fa9;
    --ds-color-red-350: #ff8391;
    --ds-color-red-400: #ff697c;
    --ds-color-red-500: #fd3252;
    --ds-color-red-600: #da0736;
    --ds-color-red-650: #c80833;
    --ds-color-red-700: #b30230;
    --ds-color-red-900: #780a26;

    /* Slate (surfaces / neutrals) */
    --ds-color-slate-50: #f7fafc;
    --ds-color-slate-100: #e2f4ff;
    --ds-color-slate-200: #d0e6f4;
    --ds-color-slate-250: #b6d2e3;
    --ds-color-slate-300: #9fbed0;
    --ds-color-slate-400: #83a3b6;
    --ds-color-slate-450: #68889a;
    --ds-color-slate-500: #4f6c7e;
    --ds-color-slate-550: #395565;
    --ds-color-slate-600: #2c4553;
    --ds-color-slate-650: #273f4c;
    --ds-color-slate-700: #203743;
    --ds-color-slate-750: #1d333f;
    --ds-color-slate-800: #1a2e39;
    --ds-color-slate-850: #182832;
    --ds-color-slate-900: #13232d;
    --ds-color-slate-950: #101d25;

    /* Accents */
    --ds-color-accent-orchid: #b15aeb;
    --ds-color-accent-orchid-400: #c983fc;
    --ds-color-accent-turquoise: #1cc1ca;
    --ds-color-accent-turquoise-400: #40c8d0;
    --ds-color-accent-amber: #ffa91f;
    --ds-color-accent-orange: #f25816;
    --ds-color-accent-rose: #eb477e;
    --ds-color-accent-emerald: #15c743;

    /* Translucent (borders / state layers) */
    --ds-color-translucent-light-20: #ffffff05;
    --ds-color-translucent-light-50: #ffffff0a;
    --ds-color-translucent-light-100: #ffffff14;
    --ds-color-translucent-light-200: #ffffff1f;
    --ds-color-translucent-light-300: #ffffff29;
    --ds-color-translucent-dark-500: #00000052;
    --ds-color-translucent-dark-600: #0006;

    --ds-color-white: #fff;
    --ds-color-black: #000;

    /* ============================================================
       LAYER 1b — SEMANTIC TOKENS (Stake)
       ============================================================ */

    /* Surfaces */
    --ds-color-surface-lowest: var(--ds-color-slate-900);
    --ds-color-surface-default: var(--ds-color-slate-800);
    --ds-color-surface-highest: var(--ds-color-slate-700);
    --ds-color-surface-sunken: var(--ds-color-translucent-dark-500);
    --ds-color-overlay-scrim: #101d25e6;

    /* Text / on-surface */
    --ds-color-on-surface: var(--ds-color-slate-50);
    --ds-color-subtle-on-surface: var(--ds-color-slate-300);
    --ds-color-muted-on-surface: var(--ds-color-slate-450);
    --ds-color-disabled-on-surface: #9fbed061;
    --ds-color-primary-on-surface: var(--ds-color-blue-450);
    --ds-color-positive-on-surface: var(--ds-color-green-450);
    --ds-color-caution-on-surface: var(--ds-color-yellow-400);
    --ds-color-critical-on-surface: var(--ds-color-red-350);
    --ds-color-nontext-strong-on-surface: var(--ds-color-slate-400);
    --ds-color-nontext-decorative-on-surface: var(--ds-color-slate-550);

    /* Base (fills) */
    --ds-color-base-primary: var(--ds-color-blue-650);
    --ds-color-on-base-primary: var(--ds-color-white);
    --ds-color-base-neutral: var(--ds-color-slate-550);
    --ds-color-on-base-neutral: var(--ds-color-white);
    --ds-color-base-positive: var(--ds-color-green-700);
    --ds-color-on-base-positive: var(--ds-color-white);
    --ds-color-base-caution: var(--ds-color-yellow-400);
    --ds-color-on-base-caution: var(--ds-color-black);
    --ds-color-base-critical: var(--ds-color-red-650);
    --ds-color-on-base-critical: var(--ds-color-white);

    /* Borders */
    --ds-color-border-subtle: var(--ds-color-translucent-light-50);
    --ds-color-border-default: var(--ds-color-translucent-light-100);
    --ds-color-border-strong: var(--ds-color-translucent-light-200);

    /* State layers */
    --ds-color-state-surface-hovered: var(--ds-color-translucent-light-20);
    --ds-color-state-surface-pressed: var(--ds-color-translucent-light-50);

    /* VIP tiers */
    --ds-color-vip-unranked: #829bae;
    --ds-color-vip-bronze: #d1a773;
    --ds-color-vip-silver: #bdbdbd;
    --ds-color-vip-gold: #ffb947;
    --ds-color-vip-platinum: #1cc1ca;
    --ds-color-vip-diamond: #9ae9eb;
    --ds-color-vip-obsidian: #d39bff;

    /* Leaderboard */
    --ds-color-leaderboard-1st: #ffb947;
    --ds-color-leaderboard-2nd: #5cd2d8;
    --ds-color-leaderboard-3rd: #cc9d68;

    /* ============================================================
       LAYER 2 — PROJECT ALIASES (friendly names used app-wide)
       ============================================================ */

    /* Surfaces */
    --surface-lowest: var(--ds-color-surface-lowest);
    --surface-default: var(--ds-color-surface-default);
    --surface-highest: var(--ds-color-surface-highest);
    --surface-overlay: var(--ds-color-overlay-surface-default, var(--ds-color-slate-700));
    --surface-sunken: var(--ds-color-surface-sunken);

    /* Primary (blue) */
    --primary: var(--ds-color-base-primary);
    --primary-light: var(--ds-color-blue-450);
    --primary-dark: var(--ds-color-blue-700);
    --primary-glow: rgba(20, 117, 225, 0.4);

    /* Green (positive) */
    --green: var(--ds-color-green-450);
    --green-dark: var(--ds-color-green-700);
    --green-mid: var(--ds-color-green-600);
    --green-glow: rgba(3, 230, 37, 0.3);

    /* Gold / caution */
    --gold: var(--ds-color-yellow-400);
    --gold-dark: var(--ds-color-yellow-600);
    --gold-mid: var(--ds-color-yellow-550);
    --gold-glow: rgba(255, 169, 31, 0.3);

    /* Red / critical */
    --red: var(--ds-color-red-350);
    --red-dark: var(--ds-color-red-650);
    --red-glow: rgba(255, 131, 145, 0.3);

    /* Extra accents */
    --orchid: var(--ds-color-accent-orchid);
    --turquoise: var(--ds-color-accent-turquoise);

    /* Text */
    --text-primary: var(--ds-color-on-surface);
    --text-secondary: var(--ds-color-subtle-on-surface);
    --text-muted: var(--ds-color-muted-on-surface);
    --text-disabled: var(--ds-color-disabled-on-surface);

    /* Borders */
    --border-subtle: var(--ds-color-border-subtle);
    --border-default: var(--ds-color-border-default);
    --border-strong: var(--ds-color-border-strong);

    /* VIP aliases */
    --vip-unranked: var(--ds-color-vip-unranked);
    --vip-bronze: var(--ds-color-vip-bronze);
    --vip-silver: var(--ds-color-vip-silver);
    --vip-gold: var(--ds-color-vip-gold);
    --vip-platinum: var(--ds-color-vip-platinum);
    --vip-diamond: var(--ds-color-vip-diamond);
    --vip-obsidian: var(--ds-color-vip-obsidian);

    /* Leaderboard aliases */
    --rank-1st: var(--ds-color-leaderboard-1st);
    --rank-2nd: var(--ds-color-leaderboard-2nd);
    --rank-3rd: var(--ds-color-leaderboard-3rd);
}