/* =========================================================================
   POTJE — thema
   Montreal-typografie + Belisol-blauw als vertrekpunt, uitgebreid met een
   frisse, speelse finance-look: semantische kleuren + categoriekleuren.
   ========================================================================= */

@font-face {
  font-family: "Montreal";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("./fonts/Montreal-Light.otf") format("opentype");
}
@font-face {
  font-family: "Montreal";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/Montreal-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Montreal";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/Montreal-DemiBold.otf") format("opentype");
}

:root {
  /* ---- Merk-basis (Belisol) ---- */
  --blue:        #005296;
  --blue-rgb:    0, 82, 150;
  --navy:        #00205C;
  --blue-soft:   #99CDEC;

  /* ---- Werk-tinten ---- */
  --ink-900: #07235A;
  --ink-700: #2B466F;
  --ink-500: #647B9C;
  --ink-400: #8C9DB8;
  --ink-300: #B7C4D8;
  --ink-200: #DCE4EF;
  --ink-100: #EAF0F7;
  --ink-050: #F4F7FB;
  --white:   #FFFFFF;

  /* ---- Semantisch ---- */
  --income:      #12936A;   /* inkomsten / positief */
  --income-soft: #E2F4EC;
  --income-deep: #0B6E4F;
  --ember:       #EE5A1F;   /* uitgaven / brandend */
  --ember-2:     #FF3D00;
  --ember-soft:  #FCEBE2;
  --gold:        #C9A227;

  /* ---- Categoriekleuren ---- */
  --cat-wonen:        #1E5FA8;
  --cat-energie:      #0E8C9B;
  --cat-boodschappen: #2E9E5B;
  --cat-transport:    #E08A1E;
  --cat-abos:         #7A5AE0;
  --cat-verzekering:  #51708F;
  --cat-vrije:        #E0568A;
  --cat-sparen:       #C9A227;

  /* ---- Achtergronden ---- */
  --bg-app:     #EEF3F9;
  --bg-card:    #FFFFFF;
  --bg-sunken:  #F4F7FB;

  /* ---- Type ---- */
  --font: "Montreal", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --w-light: 300;
  --w-reg:   400;
  --w-demi:  600;

  /* ---- Radii (vrij van Belisol's vierkant-regel — zacht & modern) ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;

  /* ---- Schaduw ---- */
  --sh-1: 0 1px 2px rgba(7,35,90,0.06), 0 1px 3px rgba(7,35,90,0.05);
  --sh-2: 0 4px 12px rgba(7,35,90,0.08), 0 2px 4px rgba(7,35,90,0.05);
  --sh-3: 0 14px 34px rgba(7,35,90,0.14), 0 4px 10px rgba(7,35,90,0.07);
  --sh-pop: 0 18px 50px rgba(7,35,90,0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.app-root {
  font-family: var(--font);
  font-weight: var(--w-light);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-root h1, .app-root h2, .app-root h3, .app-root h4 {
  font-weight: var(--w-demi);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.demi { font-weight: var(--w-demi); }
.light { font-weight: var(--w-light); }

/* Scrollbars verbergen binnen het toestel */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

@keyframes potje-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes potje-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes potje-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}