/* Centsibly design tokens: the source of truth for color, type, radii and spacing.
   Components use these variables; never hardcode hex values elsewhere (category colors are data). */
:root {
    /* Ground & surfaces */
    --ground: #F5F5F2;
    --surface: #FFFFFF;
    --surface-2: #F0F1EC;
    --line: #E3E4DF;
    --line-soft: #EFEFEB;
    --track: #E8E9E4;

    /* Text */
    --ink: #15171A;
    --muted: #5F646B;
    --faint: #A3A7AD;
    --nav-idle: #6E737A;

    /* Brand */
    --accent: #0F6B5C;
    --accent-strong: #0A4F44;
    --accent-soft: #E3F0EC;
    --on-accent: #FFFFFF;

    /* Signals: "more than before" is orange, "less" is blue (tellable apart without hue alone). */
    --warn: #B5521F;
    --warn-ink: #6E2E0E;
    --warn-soft: #FBEDE4;
    --up-ink: #8F3E15;
    --up-soft: #FBEDE4;
    --down-ink: #1F4FA3;
    --down-soft: #E3ECFA;
    --danger: #B42318;

    /* Type */
    /* Sora has no Greek letters: the browser takes those glyphs from Manrope, a close geometric match. */
    --font: "Sora", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-title: 22px;
    --text-hero: 34px;
    --text-amount: 72px;

    /* Shape */
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --pill: 999px;

    --shadow-float: 0 8px 24px rgba(21, 23, 26, 0.08);
    --tap: 44px;
}