/* =========================================================
   JLS Tracker — Design Tokens
   Single source of truth for color, type, spacing, radius.
   Component rules live in site.css.
   ========================================================= */

:root {
    /* ---- brand ---- */
    --brand-ink: #0f2a3d;
    --brand-teal: #1b8a83;
    --brand-teal-strong: #136f69;
    --brand-amber: #b8760a;
    --brand-rose: #b3413a;

    /* ---- type scale ---- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace;

    /* ---- radius / motion ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition-fast: 120ms ease;

    /* ---- light theme (default) ---- */
    --bg: #f6f8f9;
    --text: #16232c;
    --muted: #5c6b73;
    --border: #dde3e6;
    --surface: #ffffff;
    --surface-2: #eef2f3;
    --input-bg: #ffffff;
    --input-text: #16232c;
    --input-border: #cdd6da;
    --link: var(--brand-teal-strong);
    --table-stripe: rgba(15, 42, 61, 0.03);
    --nav-bg: #ffffff;
    --nav-text: #16232c;
    --accent: var(--brand-teal);
    --accent-contrast: #ffffff;
    --focus-ring: rgba(27, 138, 131, 0.35);
    --shadow-sm: 0 1px 2px rgba(15, 42, 61, 0.06);
    --shadow-md: 0 6px 20px rgba(15, 42, 61, 0.08);

    /* semantic / status */
    --app-muted: var(--muted);
    --app-success: #1c8a5a;
    --app-warning: var(--brand-amber);
    --app-danger: var(--brand-rose);
    --app-info: #2a72b5;
}

/* ---- dark theme ---- */
html[data-theme="dark"],
html[data-bs-theme="dark"] {
    --bg: #0b1220;
    --text: #e8eefc;
    --muted: #a7b3cc;
    --border: #253048;
    --surface: #101b30;
    --surface-2: #0c1626;
    --input-bg: #101b30;
    --input-text: #e8eefc;
    --input-border: #2c3a57;
    --link: #57c7bd;
    --table-stripe: rgba(255, 255, 255, 0.035);
    --nav-bg: #0c1526;
    --nav-text: #e8eefc;
    --accent: #2fb3a8;
    --accent-contrast: #062420;
    --focus-ring: rgba(47, 179, 168, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);

    --app-muted: var(--muted);
    --app-success: #3fbf82;
    --app-warning: #e0a63a;
    --app-danger: #e0665c;
    --app-info: #6aa9e6;
}