/* =========================================================
   BudgetEasy: tokens, reset en typografie
   Eenvoud · Duidelijkheid · Simpliciteit

   De custom properties komen uit project-resources/design_handoff_myfin/
   colors_and_type.css; dat bestand is de bron van waarheid. Wat daar niet in
   staat is een reset en een basisregel voor body; die staan hier.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /*
   * BudgetEasy is licht. Dat hoort hier te staan en niet alleen in de kleuren: zonder deze regel
   * tekent de browser op een computer die in donkere modus staat zijn eigen onderdelen --
   * schuifregelaars, vinkjes, datumvelden, scrollbalken -- in het donker, dwars door de warme
   * crème heen. Dat zie je alleen als je zelf in donkere modus werkt, en dus bijna nooit.
   */
  color-scheme: light;

  /* ---------- Merk ---------- */
  --tafel-orange:        #F26A1F;
  --tafel-orange-soft:   #FFF1E6;
  --tafel-orange-border: #FBD3B0;
  --tafel-orange-deep:   #C2470E;
  --tafel-orange-ink:    #5A1F02;
  /* De maand waarin je spaarsaldo daalt maar niet negatief staat: dezelfde kleur, halve stem. */
  --tafel-orange-pale:   #F2A46E;

  /* ---------- Neutralen (warm) ---------- */
  --bg:           #FAFAF7;   /* warme crème. Nooit koud wit, dat draagt het hele gevoel. */
  --surface:      #FFFFFF;
  --surface-2:    #F4F2EC;
  --border:       #E7E4DB;
  --border-soft:  #EFEDE6;
  --border-hover: #D6D2C7;
  --ink:          #1B1A17;
  --ink-muted:    #6F6B62;
  --ink-faint:    #9F9B91;

  --fg-1: var(--ink);
  --fg-2: var(--ink-muted);
  --fg-3: var(--ink-faint);

  /* ---------- Semantisch ---------- */
  --success:        #1F8A5C;
  --success-soft:   #E6F4ED;
  --success-border: #C4E4D2;

  --warning:        #B47010;
  --warning-soft:   #FCF1DC;
  --warning-border: #F2D9A0;

  --danger:         #C42B1C;
  --danger-soft:    #FCE9E5;
  --danger-border:  #F2C0B7;

  --info:           #2563EB;
  --info-soft:      #E8EEFE;
  --info-border:    #C2D1F8;

  /* ---------- Families. Drie is het maximum. ---------- */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Schaal ---------- */
  --t-h1:    56px;
  --t-h2:    32px;
  --t-h3:    22px;
  --t-h4:    17px;
  --t-lead:  18px;
  --t-body:  15px;
  --t-small: 13px;
  --t-mono:  13px;

  /* ---------- Ruimte (8px-raster) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- Radii. Pill alleen voor badges en balken. ---------- */
  --r-xs: 4px;  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ---------- Schaduwen: zacht en papierachtig, warm zwart, nooit puur zwart ---------- */
  --shadow-1: 0 1px 2px rgba(27, 26, 23, 0.04), 0 1px 1px rgba(27, 26, 23, 0.03);
  --shadow-2: 0 4px 12px rgba(27, 26, 23, 0.06), 0 1px 2px rgba(27, 26, 23, 0.04);
  --shadow-3: 0 12px 32px rgba(27, 26, 23, 0.08), 0 2px 6px rgba(27, 26, 23, 0.04);
  --shadow-pop: 0 24px 56px rgba(27, 26, 23, 0.12), 0 4px 10px rgba(27, 26, 23, 0.05);
  --ring-focus: 0 0 0 3px rgba(242, 106, 31, 0.25);

  /* ---------- Motion. Elke curve heeft een taak; er is geen algemene. ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* hover, focus, onthullen */
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);     /* verdwijnen */
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);    /* segmented, accordeon */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* checkbox, toggle, chip */
  --ease-snap:   cubic-bezier(0.2, 0.9, 0.1, 1.05);

  --dur-1: 80ms;   --dur-2: 160ms;  --dur-3: 240ms;
  --dur-4: 380ms;  --dur-5: 560ms;

  /* ---------- Stapelvolgorde ----------
     Eén schaal voor de hele app, zodat een nieuw venster niet hoeft te raden. Van onder naar
     boven: de pagina, de balken eromheen, het zoekvenster, dan alles wat de pagina blokkeert.
     Een getal hardcoderen in een stylesheet betekent dat je hier niet ziet waar het landt. */
  --z-pagehead:   20;   /* een kop die meescrollt binnen de inhoud */
  --z-sidebar:    30;
  --z-topbar:    100;
  --z-bottomnav: 110;
  --z-sheet:     200;   /* het scrim; het paneel zelf ligt er één boven */
  --z-search:    300;   /* het zoekvenster van de topbar */
  --z-modal:     400;
  --z-install:   450;
  --z-confirm:   500;   /* een bevestiging kan bovenop een dialoog komen */
  --z-toast:     600;   /* altijd zichtbaar, blokkeert niets */

  /* ---------- Maten van de schil ---------- */
  --shell-sidebar: 240px;
  --shell-content: 1080px;
  --shell-header:  56px;
  --shell-bottom:  64px;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* Eén focusregel voor alles. :focus-visible, zodat een muisklik geen ring geeft. */
:focus-visible {
  outline: none;
  border-radius: var(--r-xs);
  box-shadow: var(--ring-focus);
}

[hidden] { display: none !important; }

/* Alleen voor schermlezers. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Typografie ---------- */

.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.035em; color: var(--fg-1); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.025em; color: var(--fg-1); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em;  color: var(--fg-1); }
.h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); line-height: 1.3;  letter-spacing: -0.005em; color: var(--fg-1); }

.lead  { font-family: var(--font-body); font-weight: 400; font-size: var(--t-lead);  line-height: 1.5;  color: var(--fg-2); }
.body  { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body);  line-height: 1.55; color: var(--fg-1); }
.small { font-family: var(--font-body); font-weight: 400; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }

/* De enige plek waar hoofdletters staan. */
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tafel-orange-deep);
}

/* Elk bedrag, elke datum, elk IBAN. Cijfers moeten onder elkaar uitlijnen. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/*
 * Een bedrag in de lopende tekst breekt niet van binnen. "samen EUR" op de ene regel en
 * "6.263,48." op de volgende leest als twee dingen; het is er een. Alleen waar een mono een kort
 * getal is: nadruk in een zin, een kenmerkregel, een notitie, een kaartkop. Niet op elke span, want
 * een e-mailadres in mono is ook een span en dat moet juist kunnen breken.
 */
strong.mono, em.mono,
.mf-note .mono, .mf-card__sub .mono, .mf-list__foot .mono, .mf-verdeeld .mono { white-space: nowrap; }

.fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); }

/* ---------- Motion ---------- */

@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pop      { 0% { transform: scale(.9); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes grow     { from { width: 0; } }
@keyframes ring     { from { stroke-dashoffset: 264; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes rise     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scanline { 0% { top: 6%; } 100% { top: 90%; } }
@keyframes shimmer  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulseRing{ 0% { box-shadow: 0 0 0 0 rgba(242,106,31,.35); } 100% { box-shadow: 0 0 0 14px rgba(242,106,31,0); } }
@keyframes drawCheck{ from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes floatDoc { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Terugkoppeling, bovenop de veertien van het prototype: wat weggaat beweegt ook. */
@keyframes sheetDown{ to { transform: translateY(100%); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
@keyframes fadeOut  { to { opacity: 0; } }
@keyframes shake    { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes flash    { from { background-color: var(--tafel-orange-soft); } to { background-color: transparent; } }
@keyframes topline  { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

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