/* Design tokens (see docs/frontend.md, "Design system") */

:root {
    /* Light and dark values: light-dark() follows color-scheme, set by theme.js through data-theme */
    color-scheme: light dark;

    /* Colours */
    --color-bg: light-dark(#f7f6f2, #121417);
    --color-surface: light-dark(#ffffff, #1a1d21);
    --color-surface-muted: light-dark(#f1efe9, #22262b);
    --color-border: light-dark(#e4e1d8, #2e333a);
    --color-border-strong: light-dark(#cfcabd, #434a53);
    --color-text: light-dark(#1c1f23, #e8e6e1);
    --color-text-muted: light-dark(#5f6670, #9aa1ab);

    --color-accent: light-dark(#0f6e6e, #4fb3a9);
    --color-accent-hover: light-dark(#0b5858, #6cc6bd);
    --color-accent-soft: light-dark(#e3f1ef, #16302e);
    --color-on-accent: light-dark(#ffffff, #0b1414);

    --color-debit: light-dark(#b42318, #f97066);
    --color-debit-soft: light-dark(#fdecea, #3a1d1b);
    --color-credit: light-dark(#18794e, #47c48a);
    --color-credit-soft: light-dark(#e6f4ec, #15291f);
    --color-warning: light-dark(#b54708, #f5a524);
    --color-warning-soft: light-dark(#fef3e2, #33260f);
    --color-danger: light-dark(#b42318, #f97066);
    --color-danger-soft: light-dark(#fdecea, #3a1d1b);

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* Spacing (4px scale) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

    /* Shapes */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    /* light-dark() only accepts colours, so shadows are built from shadow colours */
    --shadow-color-weak: light-dark(rgb(28 31 35 / 0.05), rgb(0 0 0 / 0.4));
    --shadow-color: light-dark(rgb(28 31 35 / 0.08), rgb(0 0 0 / 0.45));
    --shadow-color-strong: light-dark(rgb(28 31 35 / 0.16), rgb(0 0 0 / 0.55));
    --shadow-sm: 0 1px 2px var(--shadow-color-weak), 0 1px 3px var(--shadow-color-weak);
    --shadow-md: 0 4px 12px var(--shadow-color), 0 1px 3px var(--shadow-color-weak);
    --shadow-lg: 0 12px 32px var(--shadow-color-strong), 0 2px 6px var(--shadow-color);

    /* Layout */
    --topbar-height: 3.5rem;

    --width-narrow: 28rem;
    --width-default: 64rem;
    --width-wide: 90rem;

    --transition: 150ms ease;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}