/* PEXim design tokens — the single source of colour, type and radius.
 *
 * Every stylesheet and every template reads colour from here. Never write a
 * hex literal anywhere else (see internal/web/AGENTS.md § Tokens).
 *
 * Structure:
 *   1. @font-face      self-hosted Poppins + Raleway, Latin subset (D-UI-11)
 *   2. :root           the light palette (ported from docs/ui-migration/mock/target.html)
 *   3. aliases         old token name -> new token, so pre-migration rules keep working
 *   4. legacy          tokens with no mock equivalent, still referenced (see block)
 *   5. dark            :root[data-theme="dark"] — every colour token restated
 *
 * Adding a token means adding it to BOTH :root and the dark block.
 */

/* ------------------------------------------------------------------ *
 * 1. Fonts — self-hosted, Latin subset only, from Google Fonts v24/v37
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-600-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-700-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Google serves Raleway as one variable file covering the whole weight axis,
   so 400/500/600/700 are a single download. */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/raleway-var-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 * 2. Light palette
 * ------------------------------------------------------------------ */

:root {
    /* Brand */
    --primary: #0899AF;
    --primary-dk: #077E90;
    --primary-soft: #E6F5F7;
    --secondary: #096C9A;
    --accent-bright: #05BAD6;   /* the mock's --accent; renamed, see the alias below */
    --mint: #7CDEDE;
    --navy: #0F1624;

    /* Surfaces and text */
    --bg: #F7F8FA;
    --card: #FFFFFF;
    --fg: #1A1A1A;
    --fg-2: #374151;
    --muted: #666666;
    --muted-2: #9CA3AF;
    --border: #E5E7EB;
    --input: #F3F4F6;

    /* Status */
    --success: #059669;
    --success-bg: #E6FBF5;
    --warn: #B45309;
    --warn-bg: #FEF3C7;
    --danger: #DC2626;
    --danger-bg: #FEE2E2;
    --neutral-bg: #F3F4F6;

    /* Market series */
    --c-da: #2472C8;
    --c-id: #D06010;
    --c-afrr: #0E9C86;
    --c-afrrc: #A64BC4;
    --c-mfrr: #2E8B1F;
    --c-fcr: #C2185B;
    --c-imb: #9A8500;

    /* Semantic extras */
    --grid: #EEF0F3;
    --gate-bg: #FFF7ED;
    --gate-bd: #FED7AA;
    --gate-fg: #C2410C;
    --hi-bd: #BFE6EC;
    --tip-bg: #FFFBEB;
    --tip-bd: #FDE68A;
    --tip-fg: #92400E;
    --disc-bg: #EEF2FF;
    --disc-fg: #3730A3;

    /* Shape and shadow */
    --r: 10px;
    /* UI-431: the one gap between stacked cards and blocks, and inside the
       card grids (the mock's 14px). Not a colour, so no dark twin. */
    --gap-card: 14px;
    --shadow: 0 1px 2px rgba(15, 22, 36, .04), 0 4px 14px -6px rgba(15, 22, 36, .10);

    /* Type */
    --sans: "Raleway", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --head: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color-scheme: light;

    /* --- Beyond the mock -------------------------------------------- *
     * The mock hard-codes these; ported as tokens per 02-target-design
     * § 1 "Migration note". The derived ones follow the theme for free. */
    --on-primary: #FFFFFF;                                        /* label on a filled brand/danger button */
    --on-dark: #E6EAF0;                                           /* label on a permanently dark surface (--navy) */
    --success-bd: color-mix(in srgb, var(--success) 35%, var(--card));
    --warn-bd: var(--tip-bd);
    --danger-bd: color-mix(in srgb, var(--danger) 35%, var(--card));
    --info-bg: var(--disc-bg);                                    /* the mock's only "informational" pair */
    --info-fg: var(--disc-fg);
    --info-bd: color-mix(in srgb, var(--disc-fg) 30%, var(--card));
    --scrim: rgba(15, 22, 36, .45);

    /* --- Aliases: pre-migration name -> new token --------------------- *
     * Kept so rules written before Phase 1 keep resolving. Prefer the new
     * name in new code; these disappear when the last user does. */
    --bg-page: var(--bg);
    --bg-card: var(--card);
    --bg-sidebar: var(--card);
    --bg-input: var(--input);
    --bg-hover: var(--input);
    --text-primary: var(--fg);
    --text: var(--fg);
    --text-secondary: var(--fg-2);
    --text-muted: var(--muted);
    --accent: var(--primary);        /* the app's brand colour; the mock's bright cyan is --accent-bright */
    --accent-hover: var(--primary-dk);
    --accent-light: var(--primary-soft);
    --accent-text: var(--primary-dk);
    --border-light: var(--border);
    --warning: var(--warn);
    --info: var(--secondary);
    --radius: var(--r);
    --font: var(--sans);
    --font-sans: var(--sans);
    --font-mono: var(--mono);
    --bid: var(--success);
    --ask: var(--danger);
    --market-id: var(--c-id);
    --market-da: var(--c-da);
    --market-afrr: var(--c-afrrc);
    --market-afrr-energy: var(--c-afrr);
    --market-fcr: var(--c-fcr);
    --market-mfrr-cap: var(--c-mfrr);
    --market-mfrr-energy: var(--c-mfrr);

    /* --- Legacy, still referenced by: --------------------------------- *
     *   --danger-hover            app.css
     *   --shadow-sm/-md/-lg       app.css, agent_overview.css, style.css,
     *                             landing/market_detail.html
     *   --radius-sm/-lg           admin.css, agent_overview.css, app.css, style.css
     *   --topbar-height           replay_editor.html, strategy_run.html
     *   --max-width               style.css (landing)
     *   --sp-1…--sp-8             app.css, charts.css
     * No mock equivalent. Colours here are restated in the dark block.
     * UI-417 deleted the unused --sidebar-width and the six --chart-*-open. */
    --danger-hover: #B91C1C;
    --shadow-sm: 0 1px 2px rgba(15, 22, 36, .05);
    --shadow-md: 0 4px 6px rgba(15, 22, 36, .07), 0 2px 4px rgba(15, 22, 36, .04);
    --shadow-lg: 0 10px 15px rgba(15, 22, 36, .08), 0 4px 6px rgba(15, 22, 36, .04);
    --radius-sm: 6px;
    --radius-lg: 14px;
    --topbar-height: 56px;
    --max-width: 1200px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Chart series that encode a DIRECTION (buy vs sell, profit vs loss),
       not a market. Since UI-212 these are the source: charts.js reads them
       through peximChartTokens() in static/charts_theme.js, so a series and
       the .swatch-* beside it cannot drift apart.

       They are NOT remapped onto --c-*, and that is the point: --c-da is the
       day-ahead market, and colouring DA-buy and DA-sell both with it makes
       a two-series chart unreadable. The MARKET series in charts.js (idRev,
       daRev, afrrEnergy, afrrCap, fcr, mfrr) do read --c-*.
       Theme-invariant on purpose — a direction does not change meaning in
       the dark. */
    --chart-id-buy: #2ECC71;
    --chart-id-sell: #EF4444;
    --chart-da-buy: #14B8A6;
    --chart-da-sell: #F97316;
    --chart-afrr-buy: #22D3EE;
    --chart-afrr-sell: #F472B6;
    --chart-net: #3B82F6;
    --chart-pnl: #A855F7;
    --chart-soc: #059669;
    --chart-soc-envelope: rgba(5, 150, 105, .15);
    --chart-profit: #2ECC71;
    --chart-loss: #EF4444;
}

/* ------------------------------------------------------------------ *
 * 5. Dark palette
 * ------------------------------------------------------------------ */

:root[data-theme="dark"] {
    --primary: #22B8CE;
    --primary-dk: #0899AF;
    --primary-soft: #0F2F38;
    --secondary: #4BA3D4;   /* lifted: the mock leaves --secondary dark-blue, unreadable on --bg */
    --navy: #0B1220;

    --bg: #0F1624;
    --card: #161E2E;
    --fg: #E6EAF0;
    --fg-2: #C3CAD5;
    --muted: #9AA5B5;
    --muted-2: #6B7686;
    --border: #263042;
    --input: #1C2536;

    --success: #34D399;
    --success-bg: #0F2B23;
    --warn: #FBBF24;
    --warn-bg: #2E2510;
    --danger: #F87171;
    --danger-bg: #3A1A1A;
    --neutral-bg: #1F2937;

    --grid: #263042;
    --gate-bg: #2E2010;
    --gate-bd: #4A3418;
    --gate-fg: #FDBA74;
    --hi-bd: #1F4A55;
    --tip-bg: #2E2510;
    --tip-bd: #4A3D18;
    --tip-fg: #FCD34D;
    --disc-bg: #1E2340;
    --disc-fg: #A5B4FC;

    --c-da: #4088D6;
    --c-id: #D06C25;
    --c-afrr: #149F86;
    --c-afrrc: #AA60CC;
    --c-mfrr: #489C2C;
    --c-fcr: #D2416B;
    --c-imb: #A78C12;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);

    color-scheme: dark;

    /* Beyond the mock.
       --on-primary flips to near-black: the dark palette lifts --primary to
       #22B8CE and --danger to #F87171, where white text is only ~2.2:1. A dark
       label on the same fill is 6-9:1. Everything that reads var(--on-primary)
       sits on a saturated fill, so this is safe across the board. */
    --scrim: rgba(0, 0, 0, .6);
    --on-primary: #0B1220;

    /* Legacy */
    --danger-hover: #FCA5A5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, .5), 0 4px 6px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ *
 * Type application — every surface, so a page cannot forget it.
 * ------------------------------------------------------------------ */

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--fg);
}

h1, h2, h3, h4 {
    font-family: var(--head);
    letter-spacing: -.01em;
}

code, pre, kbd, samp, .mono {
    font-family: var(--mono);
}

/* Metric / tile figures read as headings, so they take the heading face. */

.demo-kpi-value,
.demo-kpi-tile-value,
.demo-util-value,
.demo-revenue-value,
.hero-stat {
    font-family: var(--head);
}