/*
 * Design tokens and themes.
 * Everything visual comes from the variables below, so a theme is just a different set of values.
 *   data-bs-theme   light | dark              (the resolved mode; "system" is resolved by theme-init.js)
 *   data-accent     blue | emerald | violet | teal | slate
 *   data-density    comfortable | compact
 *   data-sidebar    expanded | collapsed
 * Bootstrap 5.3 reads --bs-* variables, which are bridged to these tokens at the bottom of this file.
 */

:root {
    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --app-radius: .75rem;
    --app-radius-sm: .5rem;
    --sidebar-w: 264px;
    --topbar-h: 60px;
    --app-ease: 160ms cubic-bezier(.2, .7, .3, 1);

    /* density: comfortable */
    --app-gap: 1.25rem;
    --app-fs: .9375rem;
    --ctl-py: .5rem;
    --ctl-px: .8rem;
    --cell-py: .62rem;
    --cell-px: .8rem;
    --nav-py: .5rem;
}

[data-density="compact"] {
    --app-gap: .875rem;
    --app-fs: .875rem;
    --ctl-py: .3rem;
    --ctl-px: .6rem;
    --cell-py: .32rem;
    --cell-px: .6rem;
    --nav-py: .34rem;
}

[data-sidebar="collapsed"] { --sidebar-w: 76px; }

/* ---------- light surfaces ---------- */
:root, [data-bs-theme="light"] {
    color-scheme: light;
    --app-bg: #f3f5f9;
    --app-surface: #ffffff;
    --app-surface-2: #f7f9fc;
    --app-surface-3: #eef2f7;
    --app-border: #dfe5ee;
    --app-border-strong: #c6cfdc;
    --app-text: #0f172a;
    --app-muted: #53607a;          /* 6.2:1 on white */
    --app-stripe: rgba(15, 23, 42, .025);
    --app-hover: rgba(15, 23, 42, .045);
    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --app-shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
    --app-shadow-lg: 0 18px 48px rgba(15, 23, 42, .18);
    --app-focus: rgba(var(--accent-rgb), .38);

    --tone-success: #0b7a4b; --tone-success-bg: #e3f6ec;
    --tone-warning: #8a4b00; --tone-warning-bg: #fff1d6;
    --tone-danger:  #b42318; --tone-danger-bg:  #fde8e6;
    --tone-info:    #0b5e8a; --tone-info-bg:    #e2f1fa;
    --tone-neutral: #44506a; --tone-neutral-bg: #e9edf4;
}

/* ---------- dark surfaces ---------- */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --app-bg: #0a101d;
    --app-surface: #111a2b;
    --app-surface-2: #16213a;
    --app-surface-3: #1c2945;
    --app-border: #263553;
    --app-border-strong: #364872;
    --app-text: #e7ecf6;
    --app-muted: #9eacc6;          /* 7.2:1 on the surface */
    --app-stripe: rgba(255, 255, 255, .025);
    --app-hover: rgba(255, 255, 255, .055);
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --app-shadow-md: 0 8px 22px rgba(0, 0, 0, .45);
    --app-shadow-lg: 0 20px 52px rgba(0, 0, 0, .6);
    --app-focus: rgba(var(--accent-rgb), .55);

    --tone-success: #5fd69c; --tone-success-bg: rgba(46, 204, 140, .14);
    --tone-warning: #f5be5b; --tone-warning-bg: rgba(245, 190, 91, .14);
    --tone-danger:  #ff8d82; --tone-danger-bg:  rgba(255, 110, 100, .15);
    --tone-info:    #72c5f0; --tone-info-bg:    rgba(100, 190, 240, .14);
    --tone-neutral: #b4c0d6; --tone-neutral-bg: rgba(180, 192, 214, .13);
}

/* ---------- accent presets ----------
   --accent        button / solid fills: white text on it is at least 4.5:1
   --accent-hover  hover and pressed
   --accent-text   links and accent-coloured text on the page surface
   --accent-soft   tinted background (selected item, focus chips)                         */
:root, [data-accent="blue"]    { --accent: #1d4ed8; --accent-hover: #1e40af; --accent-rgb: 29, 78, 216;  --accent-text: #1d4ed8; --accent-soft: #e8efff; }
[data-accent="emerald"]        { --accent: #047857; --accent-hover: #065f46; --accent-rgb: 4, 120, 87;   --accent-text: #047857; --accent-soft: #e1f5ed; }
[data-accent="violet"]         { --accent: #6d28d9; --accent-hover: #5b21b6; --accent-rgb: 109, 40, 217; --accent-text: #6d28d9; --accent-soft: #f0e9fe; }
[data-accent="teal"]           { --accent: #0f766e; --accent-hover: #115e59; --accent-rgb: 15, 118, 110; --accent-text: #0f766e; --accent-soft: #def4f1; }
[data-accent="slate"]          { --accent: #334155; --accent-hover: #1e293b; --accent-rgb: 51, 65, 85;   --accent-text: #334155; --accent-soft: #e6eaf1; }

[data-bs-theme="dark"][data-accent="blue"]    { --accent: #2563eb; --accent-hover: #3b73f0; --accent-rgb: 37, 99, 235;  --accent-text: #9bbbff; --accent-soft: rgba(80, 130, 255, .18); }
[data-bs-theme="dark"][data-accent="emerald"] { --accent: #047857; --accent-hover: #0a8f68; --accent-rgb: 4, 120, 87;   --accent-text: #62d9a6; --accent-soft: rgba(50, 205, 150, .16); }
[data-bs-theme="dark"][data-accent="violet"]  { --accent: #7c3aed; --accent-hover: #8b50f0; --accent-rgb: 124, 58, 237; --accent-text: #c4adff; --accent-soft: rgba(150, 110, 255, .2); }
[data-bs-theme="dark"][data-accent="teal"]    { --accent: #0f766e; --accent-hover: #148c82; --accent-rgb: 15, 118, 110; --accent-text: #56d6cb; --accent-soft: rgba(50, 200, 190, .16); }
[data-bs-theme="dark"][data-accent="slate"]   { --accent: #475569; --accent-hover: #5b6a80; --accent-rgb: 71, 85, 105;  --accent-text: #bcc8da; --accent-soft: rgba(170, 185, 210, .15); }

/* ---------- bridge to Bootstrap ---------- */
html[data-bs-theme] {
    --bs-body-font-family: var(--app-font);
    --bs-body-font-size: var(--app-fs);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-secondary-color: var(--app-muted);
    --bs-secondary-bg: var(--app-surface-3);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-emphasis-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-border-color-translucent: var(--app-border);
    --bs-border-radius: var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius);
    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-link-color: var(--accent-text);
    --bs-link-color-rgb: var(--accent-rgb);
    --bs-link-hover-color: var(--accent-hover);
    --bs-focus-ring-color: var(--app-focus);
    --bs-success: var(--tone-success);
    --bs-danger: var(--tone-danger);
    --bs-warning: var(--tone-warning);
    --bs-info: var(--tone-info);
    --bs-form-invalid-color: var(--tone-danger);
    --bs-form-invalid-border-color: var(--tone-danger);
}
html[data-bs-theme="dark"] { --bs-body-color-rgb: 231, 236, 246; --bs-link-color-rgb: 155, 187, 255; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}