/* Design tokens. Source: DESIGN.md section 2 (stage 6 palette). */

@font-face {
  font-family: Inter;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --canvas: #ffffff;       /* cards, panels, inputs */
  --bg: #f6f8f5;           /* page background */
  --parchment: #eef2ee;    /* sidebar, quiet fills */
  --pearl: #fafbf9;
  --chip: rgba(31, 41, 37, 0.07);
  /* text */
  --ink: #1f2925;
  --ink-80: #34403a;
  --ink-48: #5b6660;       /* 5.6:1 on --bg, 6.0:1 on white */
  --on-dark: #ffffff;
  /* lines */
  --hairline: #dce2dd;
  --divider: #e9ede9;
  --line-soft: rgba(31, 41, 37, 0.08);
  /* meaning: green income/positive/actions, yellow attention, red spending/negative */
  --green: #16865d;        /* fills, bars, buttons (white text 4.56:1) */
  --green-hover: #12704e;
  --green-text: #12704e;   /* text on light surfaces (6.1:1) */
  --green-soft: #e3f1ea;
  --yellow: #e3a617;       /* fills, dots, bars only: never text */
  --yellow-text: #7a5200;  /* attention text (6.9:1) */
  --yellow-soft: #fbf1d6;
  --red: #d64545;          /* fills, bars */
  --red-text: #b83232;     /* text on light surfaces (5.9:1) */
  --red-soft: #fae6e6;
  /* Guardado (investimento + previdência): blue, distinct from income green (Rodrigo, F3) */
  --guardado: #2563b8;     /* 5.4:1 on white */
  --guardado-soft: #e4edf9;
  /* text/marks sitting on a coloured fill */
  --on-accent: #ffffff;    /* on --blue/--green fills (4.56:1) */
  --on-ink: #ffffff;       /* on --ink fills: selected nav row, toast, tooltip */
  /* interaction and chrome */
  --hover: rgba(31, 41, 37, 0.05);
  --selection: rgba(22, 134, 93, 0.2);
  --hairline-strong: #aab4ad;  /* chip hover border */
  --toggle-off: #c9d1cb;
  --knob: #ffffff;
  --grabber: #d2d2d7;
  --toolbar-bg: rgba(255, 255, 255, 0.82);
  --tabbar-bg: rgba(238, 242, 238, 0.9);
  --logo-tile: #ffffff;    /* plate behind third-party logos (their marks assume a light ground) */
  /* category palette for the donut (distinct, colour-blind-aware order; Guardado blue not used) */
  --cat-1: #d64545; --cat-2: #e3a617; --cat-3: #16865d; --cat-4: #7c4dbe; --cat-5: #0f8a9d;
  --cat-6: #c2571a; --cat-7: #b8336a; --cat-8: #5b6660; --cat-9: #8a6d1f; --cat-10: #3f7f3a;
  --cat-11: #a04040; --cat-12: #476a9e; --cat-13: #9c5ab8; --cat-14: #6f6f2f; --cat-15: #2f7f7f;
  /* card-brand renders: product imagery, identical in both themes */
  --brand-amex: #2e77bb;
  --brand-unique: #1c1c1e;
  --brand-nubank: #820ad1;
  --brand-smiles: #0b6e4f;
  --brand-signature: #3a3a3c;
  --brand-amazon: #232f3e;
  --brand-elite: #8b1e2d;
  --brand-unknown: #48484a;
  --on-brand: #ffffff;
  --on-brand-muted: rgba(255, 255, 255, 0.8);
  /* Style picker previews (DESIGN.md section 12): fixed marks, the same in every style and theme. */
  --swatch-figma: #c5b0f4;
  --render-edge: 0 0 0 0 transparent;  /* dark theme outlines renders that match the surface */
  /* older names used across components, mapped onto the palette */
  --blue: var(--green);
  --blue-focus: var(--green);
  --pos: var(--green-text);
  --neg: var(--red-text);
  --warn: var(--yellow-text);
  /* shape */
  --r-compact: 8px;
  --r-capsule: 11px;
  --r-card: 18px;
  --r-pill: 9999px;
  /* elevation: the one shadow, card renders only */
  --product-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --scrim: rgba(0, 0, 0, 0.4);
  /* motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* layout */
  --sidebar-w: 272px;
  --toolbar-h: 52px;
  --tabbar-h: 57px;
  --col: 1400px;
  --col-wide: 1400px;
  --side: 32px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  color-scheme: light;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

/* Dark theme (DESIGN.md section 11). js/theme-boot.js sets data-theme before first paint:
 * the stored choice (light/dark) or, for System, the OS prefers-color-scheme.
 * Same meaning as light: green income/actions, yellow attention, red spending, blue Guardado.
 * Ratios are against --canvas #1a211d unless noted. */
:root[data-theme="dark"] {
  /* surfaces: deep green-tinted charcoal, never pure black */
  --canvas: #1a211d;
  --bg: #121814;
  --parchment: #161d19;
  --pearl: #212924;
  --chip: rgba(228, 234, 230, 0.09);
  /* text */
  --ink: #e4eae6;          /* 13.4:1 */
  --ink-80: #c3ccc6;       /* 10.0:1 */
  --ink-48: #9aa59f;       /* 6.5:1; 4.9:1 on --green-soft */
  --on-dark: #ffffff;
  /* lines */
  --hairline: #2a332e;
  --divider: #242c27;
  --line-soft: rgba(228, 234, 230, 0.1);
  /* meaning */
  --green: #2fa877;        /* fills, bars, buttons; 5.5:1 as a mark */
  --green-hover: #3dba85;
  --green-text: #4cc38e;   /* 7.4:1 */
  --green-soft: #1a3a2c;
  --yellow: #e3a617;       /* fills only, 7.6:1 */
  --yellow-text: #e6b94f;  /* 8.9:1 */
  --yellow-soft: #352c15;
  --red: #e05a5a;          /* fills, bars, 4.5:1 */
  --red-text: #f08a8a;     /* 6.8:1 */
  --red-soft: #3b2224;
  --guardado: #82aef2;     /* 7.3:1 */
  --guardado-soft: #1c2a3f;
  --on-accent: #0e1511;    /* on --green 6.0:1, on --green-hover 7.6:1 */
  --on-ink: #121814;       /* on --ink 14.8:1 */
  --hover: rgba(228, 234, 230, 0.06);
  --selection: rgba(61, 186, 133, 0.32);
  --hairline-strong: #6b7870;  /* 3.6:1 */
  --toggle-off: #6b7870;
  --knob: #e4eae6;
  --grabber: #4a564f;
  --toolbar-bg: rgba(18, 24, 20, 0.82);
  --tabbar-bg: rgba(22, 29, 25, 0.92);
  --logo-tile: #eef2ee;
  /* donut categories, lifted so every slice is >= 4.5:1 on --canvas */
  --cat-1: #e05a5a; --cat-2: #e3a617; --cat-3: #2fa877; --cat-4: #a07ae0; --cat-5: #2fb3c6;
  --cat-6: #e07a3c; --cat-7: #e06a98; --cat-8: #9aa59f; --cat-9: #c49a3a; --cat-10: #6bb562;
  --cat-11: #d77070; --cat-12: #7a9ad0; --cat-13: #b98ad0; --cat-14: #a8a852; --cat-15: #4fb0b0;
  --render-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  --product-shadow: rgba(0, 0, 0, 0.5) 3px 5px 30px 0;
  --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

@media (max-width: 899px) {
  :root { --side: 20px; }
}

@media (max-width: 419px) {
  :root { --side: 14px; }
}