/* =========================================================
   Grabann design tokens: colours, type, radii, shadows.
   Light is the default. Dark follows the device setting,
   or can be forced with <html data-theme="light|dark">.
   Every screen uses these variables; never hard-code colours.
   ========================================================= */

:root {
  /* Surfaces */
  --g-bg: #F3F5F4;          /* page background */
  --g-surface: #FFFFFF;     /* cards, sheets, bars */
  --g-raised: #F1F4F2;      /* inputs on cards, chips, subtle fills */
  --g-sel: #EEF6F0;         /* selected table row */
  --g-line: #E2E7E4;        /* borders, dividers */
  --g-line-2: #D3DAD6;      /* stronger borders (inputs) */

  /* Text */
  --g-text: #0F1613;
  --g-muted: #5B6862;       /* secondary text (AA on white) */
  --g-faint: #8A9690;       /* hints, meta (large/non-essential only) */

  /* Brand + actions */
  --g-brand: #2FAE45;       /* logo green: logo, large accents */
  --g-pri: #16803A;         /* buttons, links, focus (AA with white text) */
  --g-pri-hover: #11692F;
  --g-pri-text: #13702F;    /* green text on light surfaces */
  --g-on-pri: #FFFFFF;      /* text on --g-pri */
  --g-pri-soft: #E3F3E7;    /* active pills, focus rings, selected nav */

  /* Highlight (yellow): warnings and attention only */
  --g-hi: #FFC700;
  --g-hi-soft: #FFF4CC;
  --g-hi-text: #6B4E00;

  /* Status */
  --g-bad: #B42318;
  --g-bad-soft: #FDECEA;

  /* Effects */
  --g-scrim: rgba(15, 22, 19, .45);
  --g-shadow: 0 1px 2px rgba(15, 22, 19, .05), 0 4px 14px rgba(15, 22, 19, .05);
  --g-shadow-fab: 0 8px 24px rgba(22, 128, 58, .35);

  /* Type */
  --g-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --g-radius-sm: 9px;
  --g-radius: 12px;
  --g-radius-lg: 14px;
  --g-radius-sheet: 22px;
  --g-tap: 44px;            /* minimum touch target */

  color-scheme: light;
}

/* Dark: values shared by "follow the device" and "forced dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-bg: #0A0E0C; --g-surface: #121815; --g-raised: #1A221E; --g-sel: rgba(47, 174, 69, .08);
    --g-line: #232D28; --g-line-2: #2E3A34;
    --g-text: #E7EEEA; --g-muted: #97A49D; --g-faint: #6C7973;
    --g-pri: #2FAE45; --g-pri-hover: #3BC253; --g-pri-text: #5BD072; --g-on-pri: #04130A; --g-pri-soft: rgba(47, 174, 69, .14);
    --g-hi-soft: rgba(255, 199, 0, .12); --g-hi-text: #FFD54A;
    --g-bad: #FF8A80; --g-bad-soft: rgba(255, 138, 128, .12);
    --g-scrim: rgba(0, 0, 0, .62);
    --g-shadow: 0 1px 2px rgba(0, 0, 0, .4); --g-shadow-fab: 0 8px 24px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --g-bg: #0A0E0C; --g-surface: #121815; --g-raised: #1A221E; --g-sel: rgba(47, 174, 69, .08);
  --g-line: #232D28; --g-line-2: #2E3A34;
  --g-text: #E7EEEA; --g-muted: #97A49D; --g-faint: #6C7973;
  --g-pri: #2FAE45; --g-pri-hover: #3BC253; --g-pri-text: #5BD072; --g-on-pri: #04130A; --g-pri-soft: rgba(47, 174, 69, .14);
  --g-hi-soft: rgba(255, 199, 0, .12); --g-hi-text: #FFD54A;
  --g-bad: #FF8A80; --g-bad-soft: rgba(255, 138, 128, .12);
  --g-scrim: rgba(0, 0, 0, .62);
  --g-shadow: 0 1px 2px rgba(0, 0, 0, .4); --g-shadow-fab: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--g-font);
  font-feature-settings: "tnum" 1;   /* numbers line up in tables and totals */
  color: var(--g-text);
  background: var(--g-bg);
}