/* ─── Koonto tokens ───────────────────────────────────────────────────────
   THE APP'S PALETTE, NOT A PALETTE ABOUT IT.

   Every value below is read from the product: `src/lib/theme.ts` for the two
   ladders, `app.json` for the grounds the splash and the adaptive icon are
   drawn on (#F2F2F7 / #0B0D16), and `assets/brand/koonto-mark.svg` for the
   mark — four strokes in near-black and one accent in green.

   What this replaces was invented: paper #F6F4F0, forest ink #14543C, a lime
   #C9E870 that is not the app's lime. It was a coherent identity and it was
   not Koonto's, which is the only thing wrong with it.

   The relationships that carry over unchanged:
   · Ink is the app's ink — near-black on the light ground, bone on the dark.
   · Money in is the brand green, money out is the app's rose. Both are the
     product's own semantics, so a figure means the same thing on the page as
     it does in the hand.
   · The marker stays a marker. --lime is the app's real brandLime #BEFF6C,
     used as a highlight behind dark text and nowhere else; the affirmative
     FILL is the brand green, which is what the app's own button is.
   · The dark panels are the app icon at page scale: a near-black ground with
     a green accent on it. ──────────────────────────────────────────────── */

:root {
  /* ── Night — theme.ts › DARK ───────────────────────────────────────── */
  --canvas:       #0B0D16;   /* the page; app.json's dark splash ground */
  --stage:        #12151F;   /* the hero, a stop off the page */
  --card:         #191B22;
  --subtle:       #1F2129;
  --foot-bg:      #090B12;
  --chrome-ann:   #191B22;
  --chrome-nav:   #0E1018;
  --menu-bg:      #191B22;
  --menu-shadow:  0 24px 40px -22px rgba(0,0,0,.9);

  --ink-hi:       #FFFFFF;
  --ink:          #EEF1F6;
  --t900:         #D9DDE6;
  --t700:         #C4CAD6;
  --muted:        #98A1B4;
  --faint:        #7C8498;

  --hairline:     #363945;
  --soft:         #3A3D49;
  --divider:      #2E313B;

  /* Affirmative. --brand is a FILL, --brand-text is the same idea as INK;
     they part company on paper, where the fill is unreadable as type — which
     is exactly why the app carries a separate `brandInk`. */
  --brand:        #26E06C;
  --brand-hover:  #4BE886;
  --brand-text:   #26E06C;
  --brand-ink:    #A0F0BE;
  --brand-label:  #789E86;
  --on-brand:     #04240F;   /* what sits ON the affirmative fill */
  /* The marker — theme.ts › brandLime, the one colour that is the SAME in
     both schemes. A highlighter does not change colour when the lights go
     out, and this one does not have to be told that twice. */
  --lime:         #BEFF6C;
  --lime-rgb:     190 255 108;
  --on-lime:      #0C0E1C;
  --error:        #FF5C85;

  /* ── The dark panels: the app icon at page scale ───────────────────── */
  --panel-a:      #262D42;
  --panel-b:      #1B2130;
  --panel-c:      #141926;
  --on-panel-hi:  #FFFFFF;
  --on-panel:     #C4CAD6;
  --on-panel-dim: #98A1B4;

  /* ── The three channels a theme turns on ───────────────────────────────
     Bare triples, used as rgb(var(--lift-rgb) / .12).
     --lift   sits ON the ground to separate something from it.
     --stage  the hero's ground used as a veil (the scrim).
     --ground the page's ground used the same way (the section washes). */
  --lift-rgb:     255 255 255;
  --rule-rgb:     150 176 214;   /* the blue a cash book is ruled in */
  --stage-rgb:    18 21 31;
  --ground-rgb:   11 13 22;
  --brand-rgb:    38 224 108;
  --out-rgb:      255 92 133;

  /* ── The notation ──────────────────────────────────────────────────── */
  --bar-in-a:     #26E06C;
  --bar-in-b:     #00D54F;
  --bar-out-a:    #FF5C85;
  --bar-out-b:    #FF3D71;
  --fig-in:       #26E06C;
  --fig-out:      #FF7D9E;
  --sum-in:       #1E9E52;
  --sum-out:      #B04463;
  --lab:          #7C8498;
  --lab-hi:       #98A1B4;
  --hatch-a:      #3A3D49;
  --hatch-b:      #2E313B;
  --chip-owed-bg: rgba(255,92,133,.16);
  --chip-owed-ink:#FF8FAB;
  --seg-mpesa:    #26E06C;
  --seg-cash:     #00D54F;
  --seg-bank:     #38A8FF;

  --radius-pill: 999px;

  /* Body/UI is Work Sans; display — headlines and every balance — is Sora,
     the geometric grotesque the app sets its money in. Both are the families
     the app itself loads at boot. */
  --font-ui: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Sora', var(--font-ui);

  /* ─── One clock ──────────────────────────────────────────────────────
     Twenty-three distinct durations were doing about five jobs. A reader
     cannot name the difference between .5s and .55s, but they can feel a page
     where every arrival takes the same time. */
  --t-ui:   .18s;   /* a control answering a finger */
  --t-fade: .42s;   /* one scene replacing another */
  --t-draw: .55s;   /* a bar drawing, a row landing, a figure rising */
  --t-long: .80s;   /* a bar drawn TO SCALE, where the length is the point */
  --beat:   .08s;   /* one step of a stagger; sequences are counted in these */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}

/* ─── Day — theme.ts › LIGHT ──────────────────────────────────────────────
   ONE block, not three: the inline script in <head> resolves "system" to a
   concrete data-theme before the first paint, so the stylesheet never carries
   the palette twice. With no script at all the page stays on the night
   ladder, which is a designed default rather than an accident.

   The dark panels do NOT invert. They are the one place the app's night shows
   through on a light page, the way the icon stays near-black on a white home
   screen — so --panel-* and --on-panel-* are deliberately absent here. */
:root[data-theme='light'] {
  color-scheme: light;

  --canvas:       #F2F2F7;   /* app.json's light splash ground */
  --stage:        #FFFFFF;
  --card:         #FFFFFF;
  --subtle:       #EDF0F5;
  --foot-bg:      #EDF0F5;
  --chrome-ann:   #EDF0F5;
  --chrome-nav:   #FFFFFF;
  --menu-bg:      #FFFFFF;
  --menu-shadow:  0 20px 34px -22px rgba(16,18,38,.28);

  --ink-hi:       #05060E;
  --ink:          #0C0E1C;
  --t900:         #1B2138;
  --t700:         #2E3A59;
  --muted:        #5C6880;
  --faint:        #8791A3;

  --hairline:     #DBE0E9;
  --soft:         #D9DEE7;
  --divider:      #E3E7EE;

  /* The fill stays the app's bright green; the TEXT drops to brandInk,
     because #00D54F on white is 1.9:1 and cannot be read. */
  --brand:        #00D54F;
  --brand-hover:  #00B843;
  --brand-text:   #007A2D;
  --brand-ink:    #007A2D;
  --brand-label:  #4F6E59;
  --on-brand:     #04240F;
  --error:        #FF3D71;

  --lift-rgb:     12 14 28;
  --rule-rgb:     92 124 178;
  --stage-rgb:    255 255 255;
  --ground-rgb:   242 242 247;
  --brand-rgb:    0 213 79;
  --out-rgb:      255 61 113;

  --bar-in-a:     #00D54F;
  --bar-in-b:     #00B843;
  --bar-out-a:    #FF3D71;
  --bar-out-b:    #E12A5E;
  --fig-in:       #007A2D;
  --fig-out:      #D01F50;
  --sum-in:       #4E7A62;
  --sum-out:      #96574F;
  --lab:          #8791A3;
  --lab-hi:       #626E85;
  --hatch-a:      #C8D0DC;
  --hatch-b:      #E3E7EE;
  --chip-owed-bg: rgba(255,61,113,.12);
  --chip-owed-ink:#D01F50;
  --seg-mpesa:    #00D54F;
  --seg-cash:     #00B843;
  --seg-bank:     #0095FF;
}
:root[data-theme='dark'] { color-scheme: dark; }