/* ==========================================================================
   Budget Calendar design tokens — single source of truth.
   Loaded FIRST (before styles.css / styles_mobile.css / tour.css).

   Layer 1: semantic tokens (light) + [data-theme="dark"] overrides.
   Layer 2: legacy aliases so pre-redesign CSS (tour.css, not-yet-migrated
            pages) keeps rendering; aliases resolve through the dark
            overrides automatically.
   Chart tokens are authored in HEX because canvas / ExcelJS consume them.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Type --- */
    --font-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* --- Surfaces --- */
    --bg-page: #f9fafc;
    --bg-page: oklch(0.985 0.003 256);
    --bg-surface: #ffffff;
    --bg-raised: #ffffff;                      /* modals / popovers */
    --bg-inset: oklch(0.95 0.004 256);         /* segmented track, wells */
    --bg-hover: oklch(0.965 0.004 256);
    --bg-band: oklch(0.985 0.003 256);         /* modal footer band */

    /* --- Borders / ink --- */
    --border: #e4e6ea;
    --border: oklch(0.92 0.004 256);
    --border-strong: oklch(0.90 0.006 256);
    --ink: #23272c;
    --ink: oklch(0.27 0.012 256);
    --ink-secondary: oklch(0.50 0.012 256);
    --ink-tertiary: oklch(0.66 0.012 256);
    --ink-on-accent: #ffffff;

    /* --- Accent + status --- */
    --accent: #2a68b7;
    --accent: oklch(0.52 0.14 256);
    --accent-hover: oklch(0.47 0.15 256);
    --accent-text: oklch(0.52 0.14 256);       /* links / active nav */
    --accent-soft: oklch(0.95 0.03 256);       /* focus ring / selected bg */
    --positive: #21763c;
    --positive: oklch(0.50 0.12 150);
    --positive-hover: oklch(0.45 0.12 150);
    --negative: #bd3838;
    --negative: oklch(0.54 0.17 25);
    --negative-hover: oklch(0.49 0.17 25);
    --warning: #aa6a00;
    --warning: oklch(0.58 0.13 70);
    --positive-bg: oklch(0.97 0.02 150);
    --negative-bg: oklch(0.98 0.02 25);
    --negative-border: oklch(0.86 0.04 25);
    --warning-bg: oklch(0.98 0.03 70);

    /* --- Effects --- */
    --scrim: rgba(15, 22, 44, 0.4);
    --shadow-popover: 0 16px 40px -10px rgba(20, 30, 60, 0.28);
    --shadow-modal: 0 24px 64px -12px rgba(20, 30, 60, 0.35);
    --shadow-card: 0 1px 2px rgba(20, 30, 60, 0.04);
    --shadow-fab: 0 12px 28px -6px oklch(0.52 0.14 256 / 0.6);
    --scrollbar-thumb: oklch(0.86 0.006 256);

    /* --- Shape --- */
    --radius-card: 14px;
    --radius-card-lg: 16px;
    --radius-btn: 10px;
    --radius-input: 10px;
    --radius-modal: 16px;
    --radius-menu: 12px;
    --radius-sheet: 24px;

    /* --- Motion --- */
    --dur-pop: .12s;
    --ease-pop: ease;
    --dur-sheet: .3s;
    --ease-sheet: cubic-bezier(.32, .72, .24, 1);

    /* --- Category palette (design order; keep in sync with
           app/models/category.py CATEGORY_COLOR_CYCLE) --- */
    --cat-income: oklch(0.55 0.11 152);
    --cat-housing: oklch(0.58 0.10 35);
    --cat-food: oklch(0.62 0.10 70);
    --cat-transport: oklch(0.56 0.10 250);
    --cat-utilities: oklch(0.56 0.08 205);
    --cat-subs: oklch(0.55 0.11 305);
    --cat-shopping: oklch(0.58 0.12 335);
    --cat-health: oklch(0.58 0.09 172);
    --cat-savings: oklch(0.55 0.09 125);
    --cat-adjust: oklch(0.64 0.015 256);
    --tint-alpha: 0.13;

    /* --- Chart tokens (HEX: consumed by canvas + ExcelJS) --- */
    --chart-accent: #2a68b7;
    --chart-positive: #21763c;
    --chart-negative: #bd3838;
    --chart-warning: #aa6a00;
    --chart-grid: rgba(20, 30, 60, 0.06);
    --chart-ink: #606469;
    --chart-surface: #ffffff;
}

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

    --bg-page: #101316;
    --bg-page: oklch(0.185 0.008 256);
    --bg-surface: #1c1e22;
    --bg-surface: oklch(0.235 0.008 256);
    --bg-raised: oklch(0.27 0.010 256);
    --bg-inset: oklch(0.16 0.008 256);
    --bg-hover: oklch(0.30 0.010 256);
    --bg-band: oklch(0.21 0.008 256);

    --border: oklch(0.32 0.010 256);
    --border-strong: oklch(0.36 0.012 256);
    --ink: oklch(0.90 0.008 256);
    --ink-secondary: oklch(0.72 0.010 256);
    --ink-tertiary: oklch(0.58 0.010 256);

    --accent: #4687db;
    --accent: oklch(0.62 0.145 256);
    --accent-hover: oklch(0.67 0.14 256);
    --accent-text: oklch(0.74 0.115 256);
    --accent-soft: oklch(0.30 0.06 256);
    --positive: #62bb78;
    --positive: oklch(0.72 0.13 150);
    --positive-hover: oklch(0.77 0.13 150);
    --negative: #f2716a;
    --negative: oklch(0.70 0.16 25);
    --negative-hover: oklch(0.75 0.16 25);
    --warning: oklch(0.76 0.13 70);
    --positive-bg: oklch(0.24 0.03 150);
    --negative-bg: oklch(0.24 0.03 25);
    --negative-border: oklch(0.40 0.06 25);
    --warning-bg: oklch(0.25 0.04 70);

    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-popover: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-fab: 0 12px 28px -6px oklch(0.62 0.145 256 / 0.5);
    --scrollbar-thumb: oklch(0.38 0.010 256);

    --cat-income: oklch(0.65 0.11 152);
    --cat-housing: oklch(0.68 0.10 35);
    --cat-food: oklch(0.72 0.10 70);
    --cat-transport: oklch(0.66 0.10 250);
    --cat-utilities: oklch(0.66 0.08 205);
    --cat-subs: oklch(0.65 0.11 305);
    --cat-shopping: oklch(0.68 0.12 335);
    --cat-health: oklch(0.68 0.09 172);
    --cat-savings: oklch(0.65 0.09 125);
    --cat-adjust: oklch(0.74 0.015 256);
    --tint-alpha: 0.22;

    --chart-accent: #4687db;
    --chart-positive: #62bb78;
    --chart-negative: #f2716a;
    --chart-warning: #d99a3e;
    --chart-grid: rgba(255, 255, 255, 0.07);
    --chart-ink: #9aa0ad;
    --chart-surface: #1c1e22;
}

/* ==========================================================================
   Legacy aliases — every pre-redesign var name resolves to a semantic token.
   Do not add new consumers; migrate to the semantic names above instead.
   ========================================================================== */
:root,
[data-theme="dark"] {
    --bg-color: var(--bg-page);
    --background-color: var(--bg-page);
    --card-bg: var(--bg-surface);
    --panel-bg: var(--bg-raised);
    --modal-bg: var(--bg-raised);
    --header-bg: var(--bg-surface);
    --text-color: var(--ink);
    --secondary-text: var(--ink-secondary);
    --text-secondary: var(--ink-secondary);
    --border-color: var(--border);
    --input-bg: var(--bg-surface);
    --input-border: var(--border-strong);
    --hover-bg: var(--bg-hover);
    --shadow-color: rgba(20, 30, 60, 0.12);
    --danger-bg: var(--negative-bg);
    --warning-bg-legacy: var(--warning-bg);
    --primary-color: var(--accent);
    --danger-color: var(--negative);
    --success-color: var(--positive);
    --transaction-bg: var(--bg-surface);

    /* calendar-era vars (replaced by calendar.css in the redesign, kept so
       the interim calendar renders sanely on the new palette) */
    --calendar-header-bg: var(--bg-surface);
    --weekday-header-bg: var(--bg-surface);
    --day-bg: var(--bg-surface);
    --day-number-bg: var(--bg-inset);
    --inactive-day-bg: var(--bg-inset);
    --inactive-day-number: var(--ink-tertiary);
    --current-day-bg: var(--accent-soft);
    --current-day-color: var(--accent-text);
    --mark-as-paid-bg: var(--positive-bg);

    /* misc legacy layout vars */
    --font-size-small: 0.85rem;
    --navbar-padding: 0.25rem 0.5rem;
    --weekday-header-padding: 0.2rem;
}

[data-theme="dark"] {
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Base + utilities
   ========================================================================== */
html {
    font-family: var(--font-ui);
}

/* Border-box everywhere (the design mockups assume it) — without this,
   width:100% + padding inputs overflow their sheets/cards. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The hidden attribute must always win — several components set their own
   display (flex/grid), which would otherwise override the UA's [hidden]. */
[hidden] {
    display: none !important;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
}

/* Thin scrollbars (design) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}