/*
 * Design tokens for the application (provisional brand: Høvuðsbók).
 * Everything visual derives from these custom properties; components never hard-code colours.
 * Theme: data-bs-theme="light|dark" on <html> is set by theme.js (system preference by default).
 * Without JavaScript the prefers-color-scheme media query below still picks the right palette.
 */

@font-face {
    font-family: "Inter Variable";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces Variable";
    src: url("../fonts/fraunces-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* Typography */
    --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.75rem;
    --text-hero: clamp(2rem, 1.4rem + 2.6vw, 3rem);

    /* Spacing (4px base) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Shape and motion */
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .18s;

    /* Layout */
    --sidebar-width: 17rem;
    --topbar-height: 3.5rem;
    --tabbar-height: 4.25rem;
    --content-max: 74rem;
    --tap: 2.75rem;
}

/* ---------- Light ---------- */
:root,
[data-bs-theme="light"] {
    --brand-50: #eef8f9;
    --brand-100: #d6edf0;
    --brand-300: #7cc3cb;
    --brand-500: #138090;
    --brand-600: #0e6a78;
    --brand-700: #0b5662;
    --accent: #f2b84b;

    --bg: #f1f4f5;
    --bg-tint: #e8eff1;
    --surface: #ffffff;
    --surface-2: #f6f9fa;
    --surface-3: #edf2f4;
    --border: #dfe6e9;
    --border-strong: #c3cfd4;

    --text: #0e2127;
    --text-2: #3f565f;
    --text-3: #587079;
    --text-on-brand: #ffffff;
    --link: #0e6a78;
    --link-hover: #0a4c57;

    --pos: #17794f;
    --pos-bg: #e3f4ec;
    --neg: #bf4a33;
    --neg-bg: #fbe9e4;
    --warn: #8f5a00;
    --warn-bg: #fdf1d8;
    --danger: #b3261e;
    --danger-bg: #fbe6e4;
    --info: #1d5f9e;
    --info-bg: #e4eefa;

    --chart-income: #138090;
    --chart-expense: #e08a6e;
    --chart-grid: #e3eaed;

    --sidebar-bg: #0a2a31;
    --sidebar-bg-2: #0d3640;
    --sidebar-text: rgba(255, 255, 255, .74);
    --sidebar-text-strong: #ffffff;
    --sidebar-muted: rgba(255, 255, 255, .46);
    --sidebar-hover: rgba(255, 255, 255, .07);
    --sidebar-active: rgba(255, 255, 255, .12);

    --shadow-1: 0 1px 2px rgba(14, 33, 39, .05), 0 1px 1px rgba(14, 33, 39, .03);
    --shadow-2: 0 4px 12px rgba(14, 33, 39, .07), 0 1px 3px rgba(14, 33, 39, .05);
    --shadow-3: 0 18px 40px rgba(14, 33, 39, .16), 0 4px 10px rgba(14, 33, 39, .08);
    --focus-ring: 0 0 0 3px rgba(19, 128, 144, .38);
    --scrim: rgba(7, 24, 29, .55);
    --skeleton-a: #e6edf0;
    --skeleton-b: #f3f7f8;
}

/* ---------- Dark ---------- */
[data-bs-theme="dark"] {
    --brand-50: #0f2a30;
    --brand-100: #123840;
    --brand-300: #4fb2be;
    --brand-500: #4cb8c4;
    --brand-600: #2a99a6;
    --brand-700: #1c808c;
    --accent: #f2b84b;

    --bg: #081316;
    --bg-tint: #0b1a1e;
    --surface: #0f1e22;
    --surface-2: #132529;
    --surface-3: #183037;
    --border: #1f353b;
    --border-strong: #2d4a52;

    --text: #e7f0f2;
    --text-2: #b0c4ca;
    --text-3: #92a9b0;
    --text-on-brand: #04181c;
    --link: #6cc6d0;
    --link-hover: #9ddbe2;

    --pos: #55c995;
    --pos-bg: #0f2c22;
    --neg: #f0957b;
    --neg-bg: #33191a;
    --warn: #f0be5a;
    --warn-bg: #30240a;
    --danger: #ff8f86;
    --danger-bg: #371716;
    --info: #7db6ee;
    --info-bg: #11263c;

    --chart-income: #4cb8c4;
    --chart-expense: #e8977b;
    --chart-grid: #1b3036;

    --sidebar-bg: #061014;
    --sidebar-bg-2: #091a20;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-3: 0 18px 40px rgba(0, 0, 0, .55);
    --focus-ring: 0 0 0 3px rgba(108, 198, 208, .45);
    --scrim: rgba(0, 0, 0, .65);
    --skeleton-a: #132a30;
    --skeleton-b: #1a3840;
}

/* No-JS fallback: follow the system preference when theme.js has not set data-bs-theme. */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
        --brand-50: #0f2a30;
        --brand-100: #123840;
        --brand-300: #4fb2be;
        --brand-500: #4cb8c4;
        --brand-600: #2a99a6;
        --brand-700: #1c808c;
        --bg: #081316;
        --bg-tint: #0b1a1e;
        --surface: #0f1e22;
        --surface-2: #132529;
        --surface-3: #183037;
        --border: #1f353b;
        --border-strong: #2d4a52;
        --text: #e7f0f2;
        --text-2: #b0c4ca;
        --text-3: #92a9b0;
        --text-on-brand: #04181c;
        --link: #6cc6d0;
        --link-hover: #9ddbe2;
        --pos: #55c995;
        --pos-bg: #0f2c22;
        --neg: #f0957b;
        --neg-bg: #33191a;
        --warn: #f0be5a;
        --warn-bg: #30240a;
        --danger: #ff8f86;
        --danger-bg: #371716;
        --info: #7db6ee;
        --info-bg: #11263c;
        --chart-income: #4cb8c4;
        --chart-expense: #e8977b;
        --chart-grid: #1b3036;
        --sidebar-bg: #061014;
        --sidebar-bg-2: #091a20;
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-2: 0 4px 14px rgba(0, 0, 0, .35);
        --shadow-3: 0 18px 40px rgba(0, 0, 0, .55);
        --focus-ring: 0 0 0 3px rgba(108, 198, 208, .45);
        --scrim: rgba(0, 0, 0, .65);
        --skeleton-a: #132a30;
        --skeleton-b: #1a3840;
    }
}

/* ---------- Bootstrap 5.3 bridge: Havit components inherit our tokens ---------- */
:root,
[data-bs-theme] {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-base);
    --bs-body-line-height: 1.55;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 14, 33, 39;
    --bs-secondary-color: var(--text-3);
    --bs-secondary-bg: var(--surface-3);
    --bs-tertiary-bg: var(--surface-2);
    --bs-emphasis-color: var(--text);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: var(--radius-md);
    --bs-link-color: var(--link);
    --bs-link-hover-color: var(--link-hover);
    --bs-link-color-rgb: 14, 106, 120;
    --bs-primary: var(--brand-600);
    --bs-success: var(--pos);
    --bs-danger: var(--danger);
    --bs-warning: var(--warn);
    --bs-info: var(--info);
    --bs-focus-ring-color: rgba(19, 128, 144, .35);
    --bs-heading-color: var(--text);
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--danger);
    --bs-box-shadow: var(--shadow-2);
}

[data-bs-theme="dark"] {
    --bs-body-color-rgb: 231, 240, 242;
    --bs-link-color-rgb: 108, 198, 208;
    --bs-focus-ring-color: rgba(108, 198, 208, .4);
}