/* Kravspec — visual theme.
   Design tokens for the entire app. Loaded first, so every later file
   (base, components, page sidecars) can rely on these custom properties. */

:root {

    /* ============================
       Color · neutrals
       ============================ */
    --k-ink:        #0f1e3a;   /* primary text */
    --k-ink-soft:   #2a3855;   /* secondary text */
    --k-muted:      #5b6678;   /* tertiary / labels */
    --k-faint:      #8a96ab;   /* placeholders */
    --k-line:       #d6dde9;   /* default border */
    --k-line-soft:  #e3e7ef;   /* subtle border */
    --k-bg:         #f6f8fb;   /* page background */
    --k-bg-alt:     #fbfcfe;   /* section alt background */
    --k-surface:    #ffffff;   /* card / panel */
    --k-fill:       #eef2f8;   /* neutral inset fill: chips, track bars (lighter than surface in dark) */

    /* ============================
       Color · brand (accent)
       ============================ */
    --k-accent:        #2d5fb0;
    --k-accent-strong: #1f4790;
    --k-accent-light:  #4a8df0;   /* light end of brand gradients */
    --k-accent-tint:   #eef3fb;
    --k-accent-border: #d3e0f3;

    /* ============================
       Color · semantic
       ============================ */
    --k-success:        #197a44;
    --k-success-bg:     #e6f4ec;
    --k-success-border: #c4e3d1;

    --k-warning:        #b06a00;
    --k-warning-bg:     #fff6e6;
    --k-warning-border: #f1dab4;

    --k-danger:         #b3261e;
    --k-danger-bg:      #fdecea;
    --k-danger-border:  #f6c8c4;

    --k-info:           #5a3aa3;
    --k-info-bg:        #f0eaff;
    --k-info-border:    #ddd1f7;

    /* calm petrol: "ufravigeligt" chips, FOSU accents */
    --k-petrol:         #0f6b73;
    --k-petrol-bg:      #e3f2f3;
    --k-petrol-border:  #bfe0e2;

    /* ============================
       Color · sidebar (dark surface)
       ============================ */
    --k-sidebar-bg:           #0f1e3a;
    --k-sidebar-bg-elev:      #14264a;
    --k-sidebar-border:       rgba(255, 255, 255, 0.08);
    --k-sidebar-text:         #cdd6e5;
    --k-sidebar-text-muted:   #8a96ab;
    --k-sidebar-text-strong:  #ffffff;
    --k-sidebar-accent:       #4a8df0;
    --k-sidebar-active-bg:    rgba(74, 141, 240, 0.14);
    --k-sidebar-hover-bg:     rgba(255, 255, 255, 0.05);

    /* ============================
       Spacing scale
       ============================ */
    --k-space-1: 0.25rem;
    --k-space-2: 0.5rem;
    --k-space-3: 0.75rem;
    --k-space-4: 1rem;
    --k-space-5: 1.25rem;
    --k-space-6: 1.5rem;
    --k-space-7: 2rem;
    --k-space-8: 3rem;

    /* ============================
       Radius
       ============================ */
    --k-radius-sm:   4px;
    --k-radius:      8px;
    --k-radius-md:  10px;
    --k-radius-lg:  12px;
    --k-radius-pill: 999px;

    /* ============================
       Shadow
       ============================ */
    --k-shadow-sm:  0 1px 2px rgba(15, 30, 58, 0.04);
    --k-shadow:     0 1px 2px rgba(15, 30, 58, 0.04), 0 4px 10px -8px rgba(15, 30, 58, 0.12);
    --k-shadow-md:  0 6px 18px -14px rgba(15, 30, 58, 0.35);
    --k-shadow-lg:  0 14px 30px -18px rgba(15, 30, 58, 0.35);
    --k-shadow-xl:  0 24px 60px -20px rgba(15, 30, 58, 0.25);

    /* ============================
       Typography
       ============================ */
    --k-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --k-font-serif: Georgia, "Times New Roman", serif;
    --k-line-height: 1.55;

    /* ============================
       Motion
       ============================ */
    /* ============================
       Inverse surface — tooltips
       Must NOT be derived from --k-ink: that token flips to near-white in
       dark mode, so a tooltip painted with it puts white text on a
       near-white pill. Defined per theme instead, so it always contrasts
       against the page it floats over.
       ============================ */
    --k-tooltip-bg: #0f1e3a;
    --k-tooltip-fg: #ffffff;

    --k-ease:      cubic-bezier(.2, .7, .3, 1);
    --k-dur-fast:  140ms;
    --k-dur:       160ms;
    --k-dur-slow:  220ms;

    /* ============================
       Bootstrap overrides
       Keep Bootstrap useful (grid, forms, utilities) but wire its
       CSS variables to our tokens. 5.3 reads links from the -rgb
       variants, so those must be set too.
       ============================ */
    --bs-primary:      #2d5fb0;
    --bs-primary-rgb:  45, 95, 176;
    --bs-link-color:   #2d5fb0;
    --bs-link-color-rgb: 45, 95, 176;
    --bs-link-hover-color: #1f4790;
    --bs-link-hover-color-rgb: 31, 71, 144;
    --bs-body-color:   #0f1e3a;
    --bs-body-color-rgb: 15, 30, 58;
    --bs-body-bg:      #f6f8fb;
    --bs-body-bg-rgb:  246, 248, 251;
    --bs-emphasis-color: #0f1e3a;
    --bs-secondary-color: #5b6678;
    --bs-tertiary-color:  #8a96ab;
    --bs-secondary-bg: #e3e7ef;
    --bs-tertiary-bg:  #fbfcfe;
    --bs-border-color: #d6dde9;
    --bs-border-color-translucent: #d6dde9;

    color-scheme: light;
}

/* ============================
   Bootstrap ↔ Kravspec alignment (theme-independent).
   5.3 backs cards, form controls and menus with --bs-body-bg, which
   we point at the page background; these keep them on the surface
   token instead, in both themes.
   ============================ */
.card {
    --bs-card-bg: var(--k-surface);
    --bs-card-border-color: var(--k-line);
}
.form-control,
.form-control:focus,
.form-select,
.form-check-input {
    background-color: var(--k-surface);
}
.dropdown-menu {
    --bs-dropdown-bg: var(--k-surface);
    --bs-dropdown-border-color: var(--k-line);
    --bs-dropdown-link-hover-bg: var(--k-accent-tint);
}
.list-group {
    --bs-list-group-bg: var(--k-surface);
    --bs-list-group-border-color: var(--k-line);
}

/* ============================
   Dark theme
   Applied via data-theme on <html>, set by the pre-paint script in
   App.razor and toggled from the sidebar. Only color tokens change;
   spacing, radius, typography and motion are shared with light.
   ============================ */
:root[data-theme="dark"] {

    /* neutrals */
    --k-ink:        #e6ecf7;
    --k-ink-soft:   #c2cce0;
    --k-muted:      #93a0b7;
    --k-faint:      #67748c;
    --k-line:       #2b3b5c;
    --k-line-soft:  #243350;
    --k-bg:         #0b1424;
    --k-bg-alt:     #0e1930;
    --k-surface:    #131f38;
    --k-fill:       #1e2c4e;

    /* brand */
    --k-accent:        #5d97ec;
    --k-accent-strong: #82adf2;
    --k-accent-tint:   #182a4d;
    --k-accent-border: #2b4675;

    /* semantic */
    --k-success:        #4ec18d;
    --k-success-bg:     #10291d;
    --k-success-border: #1c4531;

    --k-warning:        #e3a44e;
    --k-warning-bg:     #2f2310;
    --k-warning-border: #4d3a1b;

    --k-danger:         #ea7b74;
    --k-danger-bg:      #351514;
    --k-danger-border:  #542320;

    --k-info:           #ab93e2;
    --k-info-bg:        #221739;
    --k-info-border:    #3a2a5e;

    --k-petrol:         #53b7bf;
    --k-petrol-bg:      #0c272b;
    --k-petrol-border:  #164047;

    /* shadows deepen on dark */
    --k-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35);
    --k-shadow:     0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 10px -8px rgba(0, 0, 0, 0.5);
    --k-shadow-md:  0 6px 18px -14px rgba(0, 0, 0, 0.7);
    --k-shadow-lg:  0 14px 30px -18px rgba(0, 0, 0, 0.7);
    --k-shadow-xl:  0 24px 60px -20px rgba(0, 0, 0, 0.6);

    /* bootstrap */
    --bs-link-color:       #5d97ec;
    --bs-link-color-rgb:   93, 151, 236;
    --bs-link-hover-color: #82adf2;
    --bs-link-hover-color-rgb: 130, 173, 242;
    --bs-body-color:       #e6ecf7;
    --bs-body-color-rgb:   230, 236, 247;
    --bs-body-bg:          #0b1424;
    --bs-body-bg-rgb:      11, 20, 36;
    --bs-emphasis-color:   #ffffff;
    --bs-secondary-color:  #93a0b7;
    --bs-tertiary-color:   #67748c;
    --bs-secondary-bg:     #0e1930;
    --bs-tertiary-bg:      #0e1930;
    --bs-border-color:     #2b3b5c;
    --bs-border-color-translucent: #2b3b5c;

    /* inverted for dark: light pill, dark text */
    --k-tooltip-bg: #e6ecf7;
    --k-tooltip-fg: #0f1e3a;

    color-scheme: dark;
}

/* Bootstrap 5.3 handles its own components in dark via data-bs-theme,
   which theme.js sets alongside data-theme. Buttons are the exception:
   Bootstrap keeps variant colors identical in both themes, and the
   secondary-outline gray is unreadable on our navy. */
:root[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--k-ink-soft);
    --bs-btn-border-color: var(--k-line);
}