/* ==========================================================================
   Portexa design tokens — the one source of design values.

   Loaded first by all three page shells (templates/base.html,
   website/_base_public.html, user_accounts/auth_base.html) through
   components/_design_head.html. Every other sheet reads these; none defines
   its own font, palette or scale:

     app-shell.css             the app shell's names (--surface-*, --text-*,
                               --brand-*, --positive …) are aliases of these
     portexa-design-system.css the public site's .pds names, aliases of these
     components/_iq_theme.html the analysis pages' --tm-* names, aliases
     analysis-controls.css     the selected-control names, aliases

   Order of the file: type → space / radius / shadow → colour (light on :root,
   dark under html.dark — the same names) → density → semantic type sizes →
   charts.

   Today's look, kept exactly. Where two layers use different values for the
   same role today — the public site's greener green and redder red, its own
   warm neutrals, the analysis pages' indigo accent next to the brand blue —
   both are kept as separate tokens here, marked "merge later".

   The active design preset (Staff Panel · Design & Branding, website/design.py)
   overrides only the values it changes, in a small <style id="px-design">
   after this file. Nothing else writes these values.

   Dark mode stays the `dark` class on <html> (the theme switch and the
   pre-paint script set it; Tailwind reads it). `.px-light` / `.px-dark` give
   one sub-tree a fixed theme — the Staff Panel's preview specimen uses them.
   ========================================================================== */

/* ── Type ──────────────────────────────────────────────────────────────── */

:root {
    /* Families. Inter for the interface; Noto Sans Devanagari / Mukta for
       Nepali (Inter has no Devanagari letters, so the browser moves to the
       next family only for those characters); a system monospace only for
       codes and identifiers — figures use tabular Inter, never monospace. */
    --font-sans: "Inter", "Noto Sans Devanagari", "Mukta", ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --font-numeric: tabular-nums;           /* font-variant-numeric for aligned figures */

    /* The raw size scale (the app shell's names, unchanged). Pages consume
       the semantic sizes further down, not these. */
    --font-2xs: 10px;
    --font-xs: 11px;
    --font-sm: 12px;
    --font-ui: 13px;
    --font-base: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 22px;
    --font-2xl: 26px;
    --font-3xl: 30px;
    --font-4xl: 36px;
    --font-5xl: 48px;
    --font-display: 52px;

    /* Weights. 800 is the dense analysis pages' heading weight today. */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;
    --font-weight-normal: var(--weight-regular);
    --font-weight-medium: var(--weight-medium);
    --font-weight-semibold: var(--weight-semibold);
    --font-weight-bold: var(--weight-bold);

    /* Line heights. --leading-tight / --leading-normal are the app shell's
       names (unchanged); the rest are the semantic set. */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-display: 1.15;
    --leading-heading: 1.25;
    --leading-ui: 1.35;
    --leading-body: 1.55;
    --leading-relaxed: 1.7;

/* ── Space, radius, shadow ─────────────────────────────────────────────── */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04);          /* analysis cards */
    --shadow-menu: 0 12px 32px -8px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
    --shadow-drawer: 12px 0 32px -12px rgba(15, 23, 42, .35);
}

/* ── Colour ────────────────────────────────────────────────────────────────
   One set of names; light values here, dark values below. */

:root, .px-light {
    /* Brand */
    --color-brand-primary: #1e4ed8;          /* links, ink, primary button (light) */
    --color-brand-primary-hover: #173eb3;
    --color-brand-soft: #eff4ff;
    --color-brand-fill: #1e4ed8;             /* the public site's brand fills */
    --color-brand-fill-hover: #173eb3;
    --color-brand-button: #1e4ed8;           /* the public site's primary button */
    --color-on-brand: #ffffff;               /* text on the brand button */
    --color-brand-gold: #f2a51e;             /* the logo mark only */
    --color-brand-gold-2: #f7d23e;
    /* Brand secondary: the analysis pages' indigo accent (merge later with
       the brand blue). */
    --color-brand-secondary: #4f46e5;
    --color-brand-secondary-soft: #e0e7ff;
    /* Accent: the sky "selected" language — nav, tabs, chips, focus. */
    --color-accent: #0369a1;
    --color-accent-soft: rgba(2, 132, 199, .10);
    --color-accent-ring: rgba(2, 132, 199, .26);
    --color-focus: #0284c7;
    --color-selected-bg: rgba(2, 132, 199, .10);
    --color-selected-bg-hover: rgba(2, 132, 199, .16);

    /* States — green positive / buy / accumulation, red negative / sell /
       risk, amber attention, sky information, violet AI. */
    --color-positive: #059669;
    --color-positive-ink: #047857;           /* green as small text: AA on white */
    --color-positive-soft: #d1fae5;
    --color-negative: #e11d48;
    --color-negative-soft: #ffe4e6;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-info: #0284c7;
    --color-info-soft: #e0f2fe;
    --color-ai: #7c3aed;
    --color-ai-soft: #ede9fe;

    /* Terminal surfaces, text and lines (the app shell and analysis pages). */
    --color-bg: #f5f7fa;
    --color-chrome: #ffffff;                 /* sidebar + top bar */
    --color-surface: #ffffff;                /* cards */
    --color-surface-subtle: #f8fafc;
    --color-surface-sunken: #f1f5f9;
    --color-surface-raised: #ffffff;         /* menus, tooltips */
    --color-surface-hover: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-line: #e2e8f0;                   /* analysis-card rules */
    --color-line-soft: #f1f5f9;
    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-body: #334155;              /* analysis-page body text */
    --color-text-muted: #64748b;
    --color-text-faint: #94a3b8;

    /* Public surfaces, text and lines — the website's warm neutrals and its
       own green / red (merge later with the terminal's). */
    --public-bg: #ffffff;
    --public-surface: #ffffff;
    --public-surface-soft: #fafaf9;
    --public-surface-alt: #f8fafc;
    --public-text-primary: #131313;
    --public-text-secondary: #464646;
    --public-text-body: #57534e;
    --public-text-muted: #78716c;
    --public-border: #e9e9e9;
    --public-border-strong: #d6d3d1;
    --public-border-row: #f0efed;
    --public-control-border: #7c8594;        /* 3.7 : 1 on white — a field's own edge */
    --public-control-border-hover: #5b6472;
    --public-positive: #15803d;
    --public-positive-soft: #f0fdf4;
    --public-negative: #dc2626;
    --public-negative-soft: #fef2f2;
    --public-negative-ink: #b91c1c;
    --public-warning-ink: #b45309;
    --public-warning-soft: #fff7ed;

    /* Charts: grid, axes and tooltip (the chart theme reads these). */
    --color-chart-grid: rgba(148, 163, 184, .18);
    --color-chart-axis: #64748b;
    --color-chart-tooltip-bg: #0f172a;
    --color-chart-tooltip-text: #f8fafc;
}

html.dark, .px-dark {
    --color-brand-primary: #7fa2ff;
    --color-brand-primary-hover: #a9c2ff;
    --color-brand-soft: rgba(79, 124, 247, .14);
    --color-brand-fill: #2f5fe6;
    --color-brand-fill-hover: #4672f0;
    --color-brand-button: #8fb0ff;
    --color-on-brand: #0b1120;
    --color-brand-secondary: #818cf8;
    --color-brand-secondary-soft: rgba(99, 102, 241, .2);
    --color-accent: #7dd3fc;
    --color-accent-soft: rgba(56, 189, 248, .14);
    --color-accent-ring: rgba(56, 189, 248, .30);
    --color-focus: #38bdf8;
    --color-selected-bg: rgba(56, 189, 248, .16);
    --color-selected-bg-hover: rgba(56, 189, 248, .22);

    --color-positive: #34d399;
    --color-positive-ink: #34d399;
    --color-positive-soft: rgba(16, 185, 129, .18);
    --color-negative: #fb7185;
    --color-negative-soft: rgba(225, 29, 72, .18);
    --color-warning: #fbbf24;
    --color-warning-soft: rgba(245, 158, 11, .18);
    --color-info: #38bdf8;
    --color-info-soft: rgba(14, 165, 233, .18);
    --color-ai: #a78bfa;
    --color-ai-soft: rgba(139, 92, 246, .18);

    --color-bg: #0f172a;
    --color-chrome: #0b1220;
    --color-surface: #1e293b;
    --color-surface-subtle: #172033;
    --color-surface-sunken: #0f172a;
    --color-surface-raised: #131d31;
    --color-surface-hover: rgba(148, 163, 184, .10);
    --color-border: #1f2a3d;
    --color-border-strong: #334155;
    --color-line: #334155;
    --color-line-soft: #1e293b;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-body: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;

    --public-bg: #0b0f17;
    --public-surface: #111723;
    --public-surface-soft: #151c29;
    --public-surface-alt: #0f1520;
    --public-text-primary: #f3f4f6;
    --public-text-secondary: #d6d9de;
    --public-text-body: #b9bfc8;
    --public-text-muted: #9aa3af;
    --public-border: #232d3b;
    --public-border-strong: #334155;
    --public-border-row: #1b2432;
    --public-control-border: #64748b;        /* 3.8 : 1 on the dark surface */
    --public-control-border-hover: #8190a5;
    --public-positive: #4ade80;
    --public-positive-soft: rgba(74, 222, 128, .12);
    --public-negative: #f87171;
    --public-negative-soft: rgba(248, 113, 113, .12);
    --public-negative-ink: #f87171;
    --public-warning-ink: #fbbf24;
    --public-warning-soft: rgba(251, 191, 36, .12);

    --color-chart-grid: rgba(148, 163, 184, .14);
    --color-chart-axis: #94a3b8;
    --color-chart-tooltip-bg: #0b1220;
    --color-chart-tooltip-text: #f1f5f9;

    --shadow-sm: none;
    --shadow-card: none;
    --shadow-menu: 0 16px 40px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-drawer: 12px 0 32px -8px rgba(0, 0, 0, .7);
}

/* ── Density ───────────────────────────────────────────────────────────────
   <html data-density="compact|standard|comfortable"> (the active preset).
   Standard is today's size of the analysis pages' tables, filters, buttons,
   card heads and KPI tiles. Compact tightens spacing and control heights but
   never shrinks text; Comfortable enlarges both. Marketing headings do not
   move with density. */

:root, [data-density="standard"] {
    --density-table-font: .72rem;
    --density-table-head-font: .58rem;
    --density-cell-y: .45rem;
    --density-cell-x: .65rem;
    --density-head-y: .5rem;
    --density-control-h: 34px;
    --density-control-font: .76rem;
    --density-card-head-y: .7rem;
    --density-card-head-x: 1rem;
    --density-kpi-y: .7rem;
    --density-kpi-x: .85rem;
}
[data-density="compact"] {
    --density-cell-y: .3rem;
    --density-cell-x: .5rem;
    --density-head-y: .35rem;
    --density-control-h: 30px;
    --density-card-head-y: .5rem;
    --density-card-head-x: .8rem;
    --density-kpi-y: .5rem;
    --density-kpi-x: .7rem;
}
[data-density="comfortable"] {
    --density-table-font: .8125rem;
    --density-table-head-font: .66rem;
    --density-cell-y: .6rem;
    --density-cell-x: .8rem;
    --density-head-y: .6rem;
    --density-control-h: 38px;
    --density-control-font: .8125rem;
    --density-card-head-y: .85rem;
    --density-card-head-x: 1.1rem;
    --density-kpi-y: .85rem;
    --density-kpi-x: 1rem;
}

/* ── Semantic type sizes ───────────────────────────────────────────────────
   What pages should consume as they move onto the tokens (today's values).
   Named --type-* because --text-* are colours (the app shell's --text-primary,
   the public site's --text-body).
   <html data-ui="terminal|public|auth"> picks the context. The terminal is a
   dense workstation; the public site and sign-in are spacious. */

:root, [data-ui="terminal"] {
    --type-page-title: var(--font-xl);
    --type-section-title: var(--font-md);
    --type-card-title: .8125rem;
    --type-body: var(--font-base);
    --type-ui: var(--font-ui);
    --type-control: var(--density-control-font);
    --type-table: var(--density-table-font);
    --type-caption: var(--font-xs);
    --type-micro: var(--font-2xs);
    --type-kpi: 1.15rem;
    --type-chart-title: var(--font-ui);
    --type-chart-axis: var(--font-sm);
    --type-chart-tooltip: var(--font-sm);
}
/* The public reading scale — every page a visitor reads: the website
   (website/_base_public.html) and the base.html pages on the public design
   system (About, Services, Contact, Pricing, the Market Guide, the
   newsroom). One size per role, so a heading reads the same on every page;
   portexa-design-system.css consumes these names, never its own pixels.
   On :root rather than [data-ui="public"]: base.html pages carry the
   terminal context, and their content is still public reading. */
:root {
    --public-type-hero: 48px;                               /* the cover page's headline */
    --public-type-display: clamp(28px, 1rem + 1.6vw, 40px); /* a page's opening statement */
    --public-type-section: 34px;                            /* a section of the cover and capability pages */
    --public-type-article: clamp(24px, 1rem + 1.2vw, 32px); /* a story's or a spotlight's headline */
    --public-type-page-title: clamp(20px, 1rem + .9vw, 28px); /* the page heading (h1) under the navigation */
    --public-type-block: 24px;                              /* a block of a page */
    --public-type-card: 18px;                               /* a card, story, step or term title */
    --public-type-item: 16px;                               /* a row of a list: a contact, a question, a link */
    --public-type-lead: 18px;                               /* the sentence under a statement */
    --public-type-prose: 17px;                              /* an article's running text: blog, legal, a story */
    --public-type-body: 16px;                               /* reading text on a page */
    --public-type-card-text: 15px;                          /* the sentence on a card */
    --public-type-meta: 14px;                               /* labels, bylines, table text */
    --public-type-caption: 13px;                            /* help, dates, notes */
    --public-type-label: 12px;                              /* eyebrows, badges — the floor */
}
@media (max-width: 1023px) {
    :root { --public-type-hero: 36px; --public-type-section: 30px; }
}
@media (max-width: 767px) {
    :root {
        --public-type-hero: 31px; --public-type-section: 26px; --public-type-page-title: 17px;
        --public-type-block: 20px; --public-type-card: 17px; --public-type-lead: 17px;
        --public-type-prose: 16px;
    }
}
@media (max-width: 380px) {
    :root { --public-type-hero: 29px; }
}

[data-ui="public"], [data-ui="auth"] {
    --type-page-title: var(--font-5xl);
    --type-section-title: 34px;
    --type-card-title: 19px;
    --type-body: var(--font-md);
    --type-ui: 15px;
    --type-control: 15px;
    --type-table: var(--font-base);
    --type-caption: 13px;
    --type-micro: var(--font-sm);
    --type-kpi: 24px;
    --type-chart-title: var(--font-md);
    --type-chart-axis: var(--font-sm);
    --type-chart-tooltip: 13px;
}