/* tokens.css — design tokens (frontend.md §3)
   Verbatim from theme.html's TOKENS section — the reference
   implementation. Do not hand-edit a value here without updating
   theme.html first; this file exists to stay identical to it. */

:root {
  /* Surfaces */
  --bg:            #F8FAFC;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F9;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* Text */
  --text:          #0F172A;
  --text-muted:    #64748B;
  --text-subtle:   #94A3B8;

  /* Brand — seed is the SACCO's colour; --brand is theme-resolved */
  --brand-seed:    #2563EB;
  --brand:         var(--brand-seed);
  --brand-hover:   color-mix(in oklab, var(--brand-seed), black 18%);
  --brand-subtle:  color-mix(in oklab, var(--brand-seed), #FFFFFF 92%);
  --on-brand:      #FFFFFF;          /* overwritten server-side — see §2.2 */

  /* Money direction */
  --credit:        #15803D;
  --debit:         #B91C1C;

  /* Status */
  --ok:            #15803D;
  --warn:          #B45309;
  --danger:        #B91C1C;
  --ok-bg:         #F0FDF4;
  --warn-bg:       #FFFBEB;
  --danger-bg:     #FEF2F2;
  --info-bg:       #EFF6FF;

  /* Spacing */
  --space-1:4px;  --space-2:8px;   --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px;  --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;

  /* Radii */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-full:999px;

  /* Elevation */
  --shadow-sheet:  0 -8px 32px rgba(15,23,42,.12);
  --shadow-dialog: 0 16px 48px rgba(15,23,42,.18);
  --shadow-fab:    0 4px 16px rgba(15,23,42,.16);

  /* Motion */
  --dur-fast:120ms; --dur:180ms; --dur-slow:260ms;
  --ease:    cubic-bezier(.2,0,0,1);
  --ease-in: cubic-bezier(.4,0,1,1);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0A0F1E;
    --surface:       #131A2A;
    --surface-2:     #1C2437;
    --border:        #1E293B;
    --border-strong: #334155;

    --text:          #F1F5F9;
    --text-muted:    #94A3B8;
    --text-subtle:   #64748B;

    --brand:         color-mix(in oklab, var(--brand-seed), white 32%);
    --brand-hover:   color-mix(in oklab, var(--brand-seed), white 44%);
    --brand-subtle:  color-mix(in oklab, var(--brand-seed), var(--surface) 84%);
    --on-brand:      #0A0F1E;

    --credit:        #4ADE80;
    --debit:         #F87171;
    --ok:            #4ADE80;
    --warn:          #FBBF24;
    --danger:        #F87171;
    --ok-bg:         #0F2417;
    --warn-bg:       #2A1F06;
    --danger-bg:     #2A1214;
    --info-bg:       #0E1B33;

    --shadow-sheet:  0 -8px 32px rgba(0,0,0,.5);
    --shadow-dialog: 0 16px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:            #0A0F1E;
  --surface:       #131A2A;
  --surface-2:     #1C2437;
  --border:        #1E293B;
  --border-strong: #334155;

  --text:          #F1F5F9;
  --text-muted:    #94A3B8;
  --text-subtle:   #64748B;

  --brand:         color-mix(in oklab, var(--brand-seed), white 32%);
  --brand-hover:   color-mix(in oklab, var(--brand-seed), white 44%);
  --brand-subtle:  color-mix(in oklab, var(--brand-seed), var(--surface) 84%);
  --on-brand:      #0A0F1E;

  --credit:        #4ADE80;
  --debit:         #F87171;
  --ok:            #4ADE80;
  --warn:          #FBBF24;
  --danger:        #F87171;
  --ok-bg:         #0F2417;
  --warn-bg:       #2A1F06;
  --danger-bg:     #2A1214;
  --info-bg:       #0E1B33;

  --shadow-sheet:  0 -8px 32px rgba(0,0,0,.5);
  --shadow-dialog: 0 16px 48px rgba(0,0,0,.6);
}