/*
 * Theme: design tokens shared across pages.
 *
 * Palette tokens hold raw values and should rarely be used directly.
 * Prefer the semantic tokens below, which describe *where* a value is used,
 * so a change in one place applies consistently everywhere.
 */
:root {
    /* Palette: greens */
    --palette-green-950: #002721;
    --palette-green-900: #003c32;
    --palette-green-800: #0b4f2c;
    --palette-green-500: #05ce74;
    --palette-green-200: #bbffe3;
    --palette-green-50: #e8fff3;

    /* Palette: neutrals */
    --palette-white: #ffffff;
    --palette-neutral-50: #f8f8f8;
    --palette-neutral-300: #ccd4d3;
    --palette-neutral-500: #979797;
    --palette-neutral-800: #3c3c3b;

    /* Palette: blues */
    --palette-blue-500: #0074e8;

    /* Text */
    --color-text: var(--palette-green-950);
    --color-text-muted: var(--palette-neutral-800);
    --color-text-disabled: var(--palette-neutral-500);
    --color-text-inverse: var(--palette-white);
    --color-text-inverse-muted: var(--palette-green-200);

    /* Surfaces */
    --color-surface: var(--palette-white);
    --color-surface-alt: var(--palette-neutral-50);
    --color-surface-brand: var(--palette-green-900);
    --color-surface-accent: var(--palette-green-500);
    --color-surface-accent-subtle: var(--palette-green-50);
    --color-surface-highlight: var(--palette-green-200);

    /* Borders and focus */
    --color-border: var(--palette-neutral-300);
    --color-border-accent: var(--palette-green-500);
    --color-border-on-accent: rgba(0, 39, 33, .22);
    --color-border-inverse: var(--palette-green-200);
    --color-focus-ring: var(--palette-green-500);

    /* Status / direction */
    --color-direction-up: var(--palette-green-800);
    --color-direction-down: var(--palette-blue-500);

    /* Data tables */
    --table-header-bg: var(--color-surface-accent);
    --table-header-text: var(--color-text);
    --table-subheader-bg: var(--color-surface-accent-subtle);
    --table-row-bg: var(--color-surface);
    --table-row-alt-bg: var(--color-surface-alt);
    --table-row-hover-bg: var(--color-surface-highlight);
    --table-border: var(--color-border);
    --table-divider: var(--color-border-accent);
    --table-divider-width: 2px;

    /* Typography */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 28px;

    /* Shape and elevation */
    --radius-sm: 3px;
    --radius-md: 6px;
    --shadow-elevated: 0 4px 18px rgba(0, 39, 33, .08);

    /* Motion */
    --transition-fast: 120ms ease;
}