/* ============================================================
   GTBNPS FINANCE — DESIGN TOKENS
   Single source of truth for every visual value.

   The palette deliberately matches the school's other app (navy and
   gold) so the two feel like one family on a staff phone — but the
   accents lean green/red because this one is about money, and a
   figure that is up or down has to read at a glance.
   ============================================================ */

:root {
  /* Brand */
  --navy:          #1B2D5E;
  --navy-deep:     #0F1E42;
  --navy-mid:      #243875;
  --navy-soft:     #34478A;
  --gold:          #D4A017;
  --gold-light:    #F0C040;
  --gold-pale:     rgba(212,160,23,.12);

  /* Neutrals */
  --bg:            #F4F6FB;
  --bg-sunken:     #EDF0F7;
  --surface:       #FFFFFF;
  --surface-alt:   #FBFCFE;
  --border:        #E4E9F2;
  --border-light:  #EFF2F8;
  --border-strong: #D3DAE8;
  --text:          #0F1E42;
  --text-2:        #56607F;
  --text-3:        #8B93AD;
  --text-4:        #A9B0C4;

  /* Money status */
  --green:         #15803D;
  --green-mid:     #16A34A;
  --green-bg:      #EFFDF4;
  --green-border:  #BBF7D0;
  --red:           #C81E1E;
  --red-mid:       #DC2626;
  --red-bg:        #FEF2F2;
  --red-border:    #FECACA;
  --amber:         #B45309;
  --amber-bg:      #FFFBEB;
  --amber-border:  #FDE68A;
  --blue:          #1D4ED8;
  --blue-bg:       #EFF6FF;
  --blue-border:   #BFDBFE;
  --purple:        #6D28D9;
  --purple-bg:     #F5F3FF;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  /* Tabular figures matter more here than anywhere: a column of
     money that doesn't align is a column nobody trusts. */
  --font-num: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --t-xs:   11px;
  --t-sm:   12.5px;
  --t-base: 14px;
  --t-md:   15px;
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radius */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(15,30,66,.06);
  --sh-sm: 0 2px 8px rgba(15,30,66,.07);
  --sh-md: 0 6px 20px rgba(15,30,66,.10);
  --sh-lg: 0 14px 40px rgba(15,30,66,.14);
  --sh-xl: 0 24px 64px rgba(15,30,66,.20);

  /* Layout */
  --sidebar-w:      248px;
  --sidebar-w-col:  72px;
  /* env() folds in the iOS status-bar inset so an installed PWA
     clears the notch; it resolves to 0 everywhere else, so this is
     visually identical to a plain 60px on Android and desktop. */
  --topbar-h:       calc(58px + env(safe-area-inset-top));
  --bottomnav-h:    62px;

  /* Motion */
  --fast:   140ms cubic-bezier(.4,0,.2,1);
  --base:   220ms cubic-bezier(.4,0,.2,1);
  --slow:   380ms cubic-bezier(.4,0,.2,1);
  --spring: 420ms cubic-bezier(.34,1.4,.64,1);

  /* Register grid */
  --cell-h:      34px;
  --cell-w:      104px;
  --col-no-w:    46px;
  --col-name-w:  208px;
  /* Widths of the three computed columns, needed as real numbers so
     the sticky right offsets can be worked out from them. */
  --col-cum-w:   126px;
  --col-out-w:   126px;
  --col-pct-w:    86px;
}