/* ==========================================================================
   Budget Bot Mini WebApp — Material Design 3 design tokens
   --------------------------------------------------------------------------
   The ONLY file in webapp/ allowed to carry raw colour literals.
   Everything else references --md-sys-* / --app-* tokens.

   Colour scheme provenance: generated with
   @material/material-color-utilities@0.3.0 —
   new SchemeTonalSpot(Hct.fromInt(argbFromHex('#2D6A5E')), isDark, 0.0)
   read through MaterialDynamicColors.<role>.getArgb(scheme).
   Generator: scratchpad/gen/gen.mjs, raw output scratchpad/gen/scheme.json.

   Light is the :root default. Dark is applied by the inline pre-paint boot
   and assets/telegram.js stamping data-theme="dark" on <html>.
   ========================================================================== */

/* ============ 1. Colour — light (tonal spot, seed #2D6A5E) ============ */
:root {
  color-scheme: light;

  /* accent */
  --md-sys-color-primary: #046B5C;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #A0F2DF;
  --md-sys-color-on-primary-container: #005045;
  --md-sys-color-secondary: #4A635D;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CDE8E0;
  --md-sys-color-on-secondary-container: #334B46;
  --md-sys-color-tertiary: #436278;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #C9E6FF;
  --md-sys-color-on-tertiary-container: #2B4A5F;

  /* error */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #93000A;

  /* surfaces */
  --md-sys-color-surface: #F5FBF7;
  --md-sys-color-on-surface: #171D1B;
  --md-sys-color-surface-variant: #DAE5E0;
  --md-sys-color-on-surface-variant: #3F4946;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #EFF5F2;
  --md-sys-color-surface-container: #E9EFEC;
  --md-sys-color-surface-container-high: #E3EAE6;
  --md-sys-color-surface-container-highest: #DEE4E1;
  --md-sys-color-surface-dim: #D5DBD8;
  --md-sys-color-surface-bright: #F5FBF7;

  /* inverse */
  --md-sys-color-inverse-surface: #2B3230;
  --md-sys-color-inverse-on-surface: #ECF2EF;
  --md-sys-color-inverse-primary: #84D6C3;

  /* outline & misc */
  --md-sys-color-outline: #6F7976;
  --md-sys-color-outline-variant: #BEC9C5;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* ============ 1b. Colour — dark ============ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary: #84D6C3;
  --md-sys-color-on-primary: #00382F;
  --md-sys-color-primary-container: #005045;
  --md-sys-color-on-primary-container: #A0F2DF;
  --md-sys-color-secondary: #B1CCC4;
  --md-sys-color-on-secondary: #1C352F;
  --md-sys-color-secondary-container: #334B46;
  --md-sys-color-on-secondary-container: #CDE8E0;
  --md-sys-color-tertiary: #ABCAE4;
  --md-sys-color-on-tertiary: #123348;
  --md-sys-color-tertiary-container: #2B4A5F;
  --md-sys-color-on-tertiary-container: #C9E6FF;

  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;

  --md-sys-color-surface: #0E1513;
  --md-sys-color-on-surface: #DEE4E1;
  --md-sys-color-surface-variant: #3F4946;
  --md-sys-color-on-surface-variant: #BEC9C5;
  --md-sys-color-surface-container-lowest: #090F0E;
  --md-sys-color-surface-container-low: #171D1B;
  --md-sys-color-surface-container: #1B211F;
  --md-sys-color-surface-container-high: #252B29;
  --md-sys-color-surface-container-highest: #303634;
  --md-sys-color-surface-dim: #0E1513;
  --md-sys-color-surface-bright: #343B38;

  --md-sys-color-inverse-surface: #DEE4E1;
  --md-sys-color-inverse-on-surface: #2B3230;
  --md-sys-color-inverse-primary: #046B5C;

  --md-sys-color-outline: #89938F;
  --md-sys-color-outline-variant: #3F4946;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* ============ 2. Typography ============
   Typeface: Roboto Flex (MD3 reference face, variable, full Cyrillic with
   a real `tnum` feature — no separate mono family is needed for money).
   Loaded per page with:
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..900&display=swap">
   The fallback stack below keeps the app fully legible (Cyrillic-capable
   system faces) if fonts.googleapis.com is unreachable inside the webview.
   No @font-face is declared here on purpose: a self-hosted variable Roboto
   Flex would add ~1.5 MB of binary to a repo that is COPYed verbatim into
   the bot image, and `display=swap` already prevents invisible text.
   ---------------------------------------------------------------------- */
:root {
  --md-ref-typeface-brand: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --md-ref-typeface-plain: var(--md-ref-typeface-brand);

  /* Display */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-size: 3.5625rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-tracking: -0.015625rem;
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-size: 2.8125rem;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-tracking: 0rem;
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-tracking: 0rem;

  /* Headline */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-tracking: 0rem;
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-tracking: 0rem;
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-tracking: 0rem;

  /* Title */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-tracking: 0rem;
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-tracking: 0.009375rem;
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-tracking: 0.00625rem;

  /* Body */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-tracking: 0.03125rem;
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-tracking: 0.015625rem;
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-size: 0.75rem;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-tracking: 0.025rem;

  /* Label */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-tracking: 0.00625rem;
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-tracking: 0.03125rem;
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-tracking: 0.03125rem;

  /* Composite `font:` shorthands — components use
     `font: var(--md-sys-typescale-X); letter-spacing: var(--md-sys-typescale-X-tracking);`
     NOTE: the `font` shorthand resets font-variant-numeric, which is why the
     .m3-num utility is declared LAST in components.css. */
  --md-sys-typescale-display-large:
    var(--md-sys-typescale-display-large-weight)
    var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height)
    var(--md-sys-typescale-display-large-font);
  --md-sys-typescale-display-medium:
    var(--md-sys-typescale-display-medium-weight)
    var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height)
    var(--md-sys-typescale-display-medium-font);
  --md-sys-typescale-display-small:
    var(--md-sys-typescale-display-small-weight)
    var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height)
    var(--md-sys-typescale-display-small-font);
  --md-sys-typescale-headline-large:
    var(--md-sys-typescale-headline-large-weight)
    var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height)
    var(--md-sys-typescale-headline-large-font);
  --md-sys-typescale-headline-medium:
    var(--md-sys-typescale-headline-medium-weight)
    var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height)
    var(--md-sys-typescale-headline-medium-font);
  --md-sys-typescale-headline-small:
    var(--md-sys-typescale-headline-small-weight)
    var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height)
    var(--md-sys-typescale-headline-small-font);
  --md-sys-typescale-title-large:
    var(--md-sys-typescale-title-large-weight)
    var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height)
    var(--md-sys-typescale-title-large-font);
  --md-sys-typescale-title-medium:
    var(--md-sys-typescale-title-medium-weight)
    var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height)
    var(--md-sys-typescale-title-medium-font);
  --md-sys-typescale-title-small:
    var(--md-sys-typescale-title-small-weight)
    var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height)
    var(--md-sys-typescale-title-small-font);
  --md-sys-typescale-body-large:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);
  --md-sys-typescale-body-medium:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
  --md-sys-typescale-body-small:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
  --md-sys-typescale-label-large:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);
  --md-sys-typescale-label-medium:
    var(--md-sys-typescale-label-medium-weight)
    var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height)
    var(--md-sys-typescale-label-medium-font);
  --md-sys-typescale-label-small:
    var(--md-sys-typescale-label-small-weight)
    var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height)
    var(--md-sys-typescale-label-small-font);
}

/* ============ 3. Shape ============ */
:root {
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-full: 9999px;
}

/* ============ 4. Elevation ============
   Elevation is TONAL: components sit on a surface-container-* role.
   The three shadow tokens below are the only drop shadows in the app and
   are used exclusively by the FAB, modal sheets/dialogs and the snackbar.
   The rgba() literals inside these token VALUES are one of the three
   permitted colour literals in the codebase (they are MD3 spec constants,
   not theme colours — a drop shadow is black in both schemes).
   ---------------------------------------------------------------------- */
:root {
  --md-sys-elevation-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============ 5. Motion ============ */
:root {
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long2: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ 6. Spacing, layout dimensions, safe areas ============ */
:root {
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-12: 48px;

  --app-nav-bar-height: 80px;
  --app-rail-width: 80px;
  --app-top-bar-height: 64px;
  --app-content-max: 1040px;
  --app-margin: var(--md-sys-spacing-4);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (min-width: 600px) {
  :root { --app-margin: var(--md-sys-spacing-6); }
}

/* ============ 7. Categorical chart palette ============
   --app-cat-1..12: the seed hue plus 11 evenly rotated hues rendered at
   HCT tone 45 (light) / tone 78 (dark), chroma 44–56.
   Generated by scratchpad/gen/cats.mjs with the same
   @material/material-color-utilities build as the scheme above.
   Every entry clears 4.8:1 against surface-container-low in light and
   9.4:1 in dark — far above the 3:1 dataviz floor.
   ---------------------------------------------------------------------- */
:root {
  --app-cat-1: #007868;
  --app-cat-2: #007684;
  --app-cat-3: #0071A3;
  --app-cat-4: #4D68AE;
  --app-cat-5: #765AB4;
  --app-cat-6: #9C4A9F;
  --app-cat-7: #A34F6C;
  --app-cat-8: #AD4D38;
  --app-cat-9: #9F5900;
  --app-cat-10: #836700;
  --app-cat-11: #607200;
  --app-cat-12: #007B35;
}

:root[data-theme="dark"] {
  --app-cat-1: #63D4BD;
  --app-cat-2: #3AD3E9;
  --app-cat-3: #7BC9FF;
  --app-cat-4: #AABFFF;
  --app-cat-5: #CDB5FF;
  --app-cat-6: #FDA0FC;
  --app-cat-7: #FFA8C1;
  --app-cat-8: #FFAC9A;
  --app-cat-9: #FFB067;
  --app-cat-10: #E3BD50;
  --app-cat-11: #B5CB5A;
  --app-cat-12: #70D683;
}