/* Design tokens.
 *
 * Grounding: a household ledger for a few people in Kigali, on a phone, several
 * times a day. RWF amounts are five to seven digits with no decimals
 * (RWF 1,248,000) — long zero-decimal numerals are the real content, and the
 * whole system is sized around them.
 *
 * One accent for the entire app. Modules are NOT colour-coded: a module hue
 * would encode nothing the nav doesn't already say, and spending colour on it
 * would leave none for meaning. Here colour means exactly one thing — the sign
 * and state of a number.
 */

:root {
  /* Neutrals sit in one blue-ink hue family rather than grey. Light reads as
     cool paper; dark as ink. Deliberately not cream. */
  --canvas:     #EEF0F4;
  --surface:    #FFFFFF;
  --surface-2:  #E4E8EF;
  --rule:       #D3D8E2;
  --rule-firm:  #B9C0CE;

  --ink:        #161B27;
  --ink-2:      #4A5265;
  --ink-3:      #7C8497;

  /* The deep teal of the 5,000-franc note — the money this app counts. It also
     keeps the one piece of visual DNA from envelopes (#4FD1C5, now the dark
     variant), which is the app that gets used most. */
  --accent:     #0B6E72;
  --accent-dim: rgba(11, 110, 114, 0.12);
  --on-accent:  #FFFFFF;

  /* Semantic — the only other colour in the app. Fixed meaning everywhere. */
  --in:         #1B7A4B;  --in-dim:   rgba(27, 122, 75, 0.12);
  --out:        #B4342B;  --out-dim:  rgba(180, 52, 43, 0.12);
  --due:        #96650A;  --due-dim:  rgba(150, 101, 10, 0.14);

  --overlay:    rgba(22, 27, 39, 0.55);
  --focus:      #2C56B8;

  /* Type. One family across its width axis: the headline amount is visibly
     WIDER than everything else, not merely bigger. */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-micro: 11px;
  --t-label: 12px;
  --t-small: 13px;
  --t-body:  15px;
  --t-input: 16px;   /* never smaller — anything less makes iOS Safari zoom */
  --t-lead:  17px;
  --t-h2:    20px;
  --t-h1:    26px;
  --t-hero:  34px;

  /* Radius by hierarchy, not one value on everything. */
  --r-1: 6px;    /* inputs, chips, small controls */
  --r-2: 10px;   /* buttons, menus */
  --r-3: 16px;   /* sheets, dialogs */
  --r-full: 999px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Elevation is reserved for things that genuinely float. Rows and tiles get
     none — uniform soft shadows on identical rounded cards is the tell. */
  --shadow-sheet: 0 -10px 44px rgba(10, 16, 28, 0.30);
  --shadow-menu:  0 8px 28px rgba(10, 16, 28, 0.22);

  --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);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --rail-w: 76px;
  --bar-h: 58px;
}

@media (min-width: 900px) {
  :root { --t-hero: 44px; }
}

/* Dark values, declared once and applied by either trigger: the system setting
 * (unless the viewer has explicitly chosen light), or an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:     #0F1219;
    --surface:    #161B24;
    --surface-2:  #1E2530;
    --rule:       #262D3B;
    --rule-firm:  #39435466;

    --ink:        #E7EAF0;
    --ink-2:      #9AA3B5;
    --ink-3:      #6B7386;

    --accent:     #43C8CE;
    --accent-dim: rgba(67, 200, 206, 0.14);
    --on-accent:  #06231F;

    --in:  #5FC98B;  --in-dim:  rgba(95, 201, 139, 0.14);
    --out: #F0837A;  --out-dim: rgba(240, 131, 122, 0.14);
    --due: #E5B24A;  --due-dim: rgba(229, 178, 74, 0.16);

    --overlay: rgba(4, 8, 14, 0.70);
    --focus:   #8FAAF5;

    --shadow-sheet: 0 -10px 44px rgba(0, 0, 0, 0.55);
    --shadow-menu:  0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --canvas:     #0F1219;
  --surface:    #161B24;
  --surface-2:  #1E2530;
  --rule:       #262D3B;
  --rule-firm:  #394354;

  --ink:        #E7EAF0;
  --ink-2:      #9AA3B5;
  --ink-3:      #6B7386;

  --accent:     #43C8CE;
  --accent-dim: rgba(67, 200, 206, 0.14);
  --on-accent:  #06231F;

  --in:  #5FC98B;  --in-dim:  rgba(95, 201, 139, 0.14);
  --out: #F0837A;  --out-dim: rgba(240, 131, 122, 0.14);
  --due: #E5B24A;  --due-dim: rgba(229, 178, 74, 0.16);

  --overlay: rgba(4, 8, 14, 0.70);
  --focus:   #8FAAF5;

  --shadow-sheet: 0 -10px 44px rgba(0, 0, 0, 0.55);
  --shadow-menu:  0 8px 28px rgba(0, 0, 0, 0.45);
}