/* Shared design tokens.
 *
 * This file is the one place that decides what a radius, a step on the type
 * scale, or "profitable" looks like. Load it before every other stylesheet so
 * page styles can override tokens but never have to redefine them.
 *
 * The palette is defined twice: :root carries the light values and
 * [data-bs-theme="dark"] overrides them. Anything that consumes a token
 * therefore follows the user's theme for free.
 */

:root {
    /* Radius scale. Stylesheets previously used 42 distinct radii; these are
       the five steps that actually read differently on screen. */
    --radius-xs: 0.25rem;
    --radius-sm: 0.4rem;
    --radius-md: 0.55rem;
    --radius-lg: 0.8rem;
    --radius-xl: 1.1rem;
    --radius-pill: 999px;

    /* Type scale. The app is data-dense, so the steps are deliberately close,
       but each is 0.8px apart at a 16px root - ten times the 0.08px gaps that
       made the previous 23 ad-hoc sizes indistinguishable. */
    --fs-2xs: 0.65rem;
    /* 10.4px */
    --fs-xs: 0.7rem;
    /* 11.2px */
    --fs-sm: 0.75rem;
    /* 12.0px */
    --fs-md: 0.8rem;
    /* 12.8px */
    --fs-base: 0.85rem;
    /* 13.6px */
    --fs-lg: 0.9rem;
    /* 14.4px */
    --fs-xl: 1.1rem;
    /* 17.6px */
    --fs-2xl: 1.5rem;
    /* 24.0px */

    /* Shared rhythm and page geometry; page styles own layout, not new scales. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 3rem;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --content-width: 1440px;
    --page-gutter: clamp(0.75rem, 2vw, 1.5rem);

    /* Profit/loss. The light values are darkened from Bootstrap's #198754 and
       #dc3545, which only reach 3.6:1 on this app's table backgrounds and fail
       WCAG AA for the bold, small text they are used on. */
    --profit-pos: #146c43;
    --profit-neg: #b02a37;
    --profit-flat: #245bb2;

    /* Surfaces and text. */
    --bg-primary: #f3f5f8;
    --bg-secondary: #edf1f6;
    --bg-card: #ffffff;
    --border: #d9e0e9;
    --text-primary: #1c2736;
    --text-muted: #566579;

    /* Accents. Named by hue because existing rules refer to them that way. */
    --green: var(--profit-pos);
    --red: var(--profit-neg);
    --yellow: #946200;
    --blue: #245bb2;
    --accent: #245bb2;
    --accent-strong: #245fc1;
    --accent-hover: #1c4e9e;
    --accent-soft: rgba(36, 95, 193, 0.09);
    --on-action: #ffffff;
    --focus-ring: #245fc1;
    --shadow-sm: 0 1px 3px rgba(28, 39, 54, 0.04);
    --shadow-md: 0 8px 24px rgba(28, 39, 54, 0.10);

    /* Text placed on top of an accent fill. */
    --on-accent: #ffffff;

    /* Layered surfaces. Tinting with the ink colour keeps a raised panel
       readable in both themes, where a fixed white overlay only works on dark. */
    --raise-1: rgba(23, 33, 43, 0.03);
    --raise-2: rgba(23, 33, 43, 0.06);
    --raise-3: rgba(23, 33, 43, 0.10);
}

[data-bs-theme="dark"] {
    --profit-pos: #60d49b;
    --profit-neg: #ff8691;
    --profit-flat: #8ab8ff;

    --bg-primary: #101318;
    --bg-secondary: #171c23;
    --bg-card: #1c222b;
    --border: #303946;
    --text-primary: #e8edf4;
    --text-muted: #a2adbd;

    --green: var(--profit-pos);
    --red: var(--profit-neg);
    --yellow: #e4bc62;
    --blue: #8ab8ff;
    --accent: #8ab8ff;
    --accent-strong: #245fc1;
    --accent-hover: #1c4e9e;
    --accent-soft: rgba(138, 184, 255, 0.12);
    --on-action: #ffffff;
    --focus-ring: #8ab8ff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);

    --on-accent: #0d0d0d;

    --raise-1: rgba(255, 255, 255, 0.03);
    --raise-2: rgba(255, 255, 255, 0.07);
    --raise-3: rgba(255, 255, 255, 0.10);
}