/* Design tokens. js/theme.js overwrites the colour values at runtime;
   these defaults are the Day palette so the page never renders unstyled. */
:root {
  --bgTop: #ffffff;
  --bgMid: #faf8ff;
  --bgBottom: #fff6ee;
  --surface: rgba(255, 255, 255, 0.82);
  --surfaceBorder: rgba(30, 30, 80, 0.07);
  --sheet: rgba(255, 255, 255, 0.94);
  --text: #14142b;
  --textMuted: #686884;
  --orange: #ff8a3d;
  --purple: #7c5cff;
  --blue: #1e3a8a;
  --glass: rgba(255, 255, 255, 0.42);
  --glassBorder: rgba(255, 255, 255, 0.85);
  --glassShine: 0.95;
  --shadow: rgba(60, 40, 120, 0.12);
  --tabBar: rgba(255, 255, 255, 0.62);
  --track: rgba(30, 30, 80, 0.08);
  --blobOpacity: 0.26;
  --income: #1fa971;
  --danger: #e5484d;
  /* Purple for small text: leans toward the text colour so it stays readable at dusk */
  --purpleText: color-mix(in srgb, var(--purple) 70%, var(--text));

  --fx-sunrise: 0;
  --fx-day: 1;
  --fx-sunset: 0;
  --fx-night: 0;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Registered so the moment text flips between dark and light is a smooth fade */
@property --text { syntax: '<color>'; inherits: true; initial-value: #14142b; }
@property --textMuted { syntax: '<color>'; inherits: true; initial-value: #686884; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.82); }
@property --surfaceBorder { syntax: '<color>'; inherits: true; initial-value: rgba(30, 30, 80, 0.07); }
@property --sheet { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.94); }
@property --glass { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.42); }
@property --glassBorder { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.85); }
@property --tabBar { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.62); }
@property --track { syntax: '<color>'; inherits: true; initial-value: rgba(30, 30, 80, 0.08); }
:root {
  transition: --text 0.9s ease, --textMuted 0.9s ease, --surface 0.9s ease, --surfaceBorder 0.9s ease,
    --sheet 0.9s ease, --glass 0.9s ease, --glassBorder 0.9s ease, --tabBar 0.9s ease, --track 0.9s ease;
}
/* No fade on first paint, so a night-time start doesn't flash from light */
:root.theme-instant { transition: none; }

/* Liquid glass: frosted, translucent, with a bright top edge */
.glass {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, calc(var(--glassShine) * 0.5)), rgba(255, 255, 255, calc(var(--glassShine) * 0.06)) 60%),
    var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glassBorder);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--glassShine)),
    inset 0 -8px 18px rgba(255, 255, 255, 0.05),
    0 10px 30px -8px var(--shadow);
}