/* ======================================================
 * THEME TOKENS
 * Single source of truth for colors, radii, shadows.
 * Loaded by both public_css.jsp (auth/landing) and
 * app_css.jsp (post-login). Use semantic var() refs in
 * downstream stylesheets instead of literal hex.
 * ====================================================== */

:root {
    /* ---------- brand ---------- */
    --color-brand:           #3f46f6;   /* primary CTA, links, active state */
    --color-brand-hover:     #3239d3;   /* button/link hover */
    --color-brand-soft:      #eef0ff;   /* tab bg, soft accent fill */

    /* ---------- surfaces ---------- */
    --color-canvas:          #f6f7fb;   /* page background */
    --color-surface:         #ffffff;   /* cards, panels */
    --color-surface-muted:   #f6f7fb;   /* subtle bg blocks inside cards */
    --shadow-standard: 0px 2px 2px 0px rgba(50, 50, 50, 0.2);

    /* ---------- borders ---------- */
    --color-border:          #ecedf3;   /* default hairline */
    --color-border-strong:   #d1d4e3;   /* emphasized divider */

    /* ---------- text ---------- */
    --color-text-strong:     #1c2350;   /* h1/h2, primary text */
    --color-text:            #4a4f70;   /* body */
    --color-text-muted:      #6b7090;   /* secondary text, labels */
    --color-text-subtle:     #9094b3;   /* placeholders, icon-only buttons */

    /* ---------- state ---------- */
    --color-danger:          #d33b5a;
    --color-success:         #2a9d6a;

    /* --------- table ----------- */
    --color-table-header: #f8fafc;
    --color-table-row: #f8fafc;

    /* ---------- shape ----------
       Enterprise bias: small radii. Big radii read consumer/iOS, small
       radii read trading-terminal/SaaS-dashboard. Cluster is Salesforce
       Lightning / Stripe / Linear (3-6px). */
    --radius-sm:              4px;      /* inputs, selects, buttons, badges */
    --radius-input:           4px;      /* alias of --radius-sm */
    --radius-md:              6px;      /* cards, panels, modals, dropdowns */
    --radius-card:            6px;      /* alias of --radius-md */
    --radius-card-lg:         8px;      /* hero card (login) — only place 8 is OK */
    --radius-pill:          999px;      /* status chips, fully-rounded tags */

    /* ---------- typography ----------
       Roboto for body (denser line-height OK), Inter for headings
       (wants more breathing room — feels off on dense table text).
       Cross-fallbacks first so each token degrades to the other
       webfont before hitting system. Headings named `*-heading` pick
       this up via the catch-all in app_main_v2.css; legacy headings
       named `.title` / `.page-title` / etc stay in Roboto and will be
       normalized during the full UI rewrite. */
    --font-body:    'Roboto', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ---------- elevation ---------- */
    --shadow-card:           0 10px 30px rgba(20, 30, 60, 0.06);
    --shadow-card-subtle:    0 4px 14px rgba(20, 30, 60, 0.05);
    --shadow-button:         0 8px 20px rgba(63, 70, 246, 0.30);
    --shadow-button-hover:   0 10px 24px rgba(63, 70, 246, 0.38);
    --focus-ring:            0 0 0 3px rgba(63, 70, 246, 0.15);
}