/* All color, type, and geometry decisions live here.
   Nothing else in the project should contain a hex value. */

:root {
  /* Surfaces — deep petrol. Reads as an enamel thermos, not as "dark mode",
     which matters because this is used at 6:45am in a kitchen and again on a
     phone in a bright hallway. */
  --deep:   #0F3536;
  --tray:   #16494A;
  --raised: #1D5B5A;
  --rim:    #2E7A77;

  /* Ink */
  --milk:   #F6F2E7;
  --onfood: #14201C;                  /* ink on saturated slot colors */
  --ghost:  rgba(246, 242, 231, .24);
  --dim:    rgba(246, 242, 231, .60);
  --faint:  rgba(246, 242, 231, .09);

  /* Slot colors — one per compartment, named for the food not the hue */
  --main:  #F2C14E;
  --fruit: #E4572E;
  --veg:   #8CBF5C;
  --snack: #6BAED6;
  --treat: #B57BB5;

  /* Status */
  --warn: #E4572E;
  --good: #8CBF5C;

  /* Type. Inter with tabular figures for the body: the register is
     "spreadsheet that happens to be pretty". They are 11–14, not 7. */
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Geometry */
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --gutter: 16px;
  --shell: 620px;

  /* 44px is the accessibility floor for a touch target, and this app is used
     one-handed on a phone. Nothing interactive goes below it. */
  --tap: 44px;

  /* The bottom nav is fixed; every scrolling page reserves room for it plus the
     home-indicator inset so the last row is never trapped underneath. */
  --navh: 62px;
}