/* tokens.css — Plates. Dark instrument panel; read one-handed in a gym.
 *
 * Deliberately not shared with recipes/budget.
 *
 * The neutrals carry a slight blue bias toward the accent. A pure grey reads as
 * unconsidered, and a warm one turned the whole app brown — biasing toward the
 * accent makes the greys look chosen, and pushes the warm plate colours forward
 * instead of letting them sink into the ground.
 *
 * Colours are the official IWF competition plate colours, so the palette is the
 * app's namesake rather than a decoration: 25 kg red, 20 kg blue, 15 kg yellow,
 * 10 kg green, 5 kg white. Every colour means something; none is ornamental.
 *
 * No web fonts. A CDN font is a render-blocking round trip on every cold start,
 * and this app is opened dozens of times a day. */

:root {
  /* Ground — layered, not one flat plane. v1 kept everything within a few
     percent of the same value, which is why it read as flat. */
  --color-ink:            #0E1116;
  --color-bg:             #14171C;
  --color-surface:        #1D222A;
  --color-surface-raised: #262C36;
  --color-border:         #333B47;
  --color-hover:          #2A313C;

  /* Text — lifted hard from v1, whose #9C948A secondary was simply too dim. */
  --color-text:           #F3F6FA;
  --color-text-muted:     #AEB8C6;
  --color-text-dim:       #78838F;

  /* Plate colours: identity and macro encoding in one system */
  --color-protein:        #2D68C4;   /* 20 kg blue */
  --color-carbs:          #F2C230;   /* 15 kg yellow */
  --color-fat:            #E0362A;   /* 25 kg red */
  --color-plate-white:    #EDF1F6;   /*  5 kg white */

  --color-primary:        #2D68C4;
  --color-primary-hover:  #4B85DD;
  --color-primary-soft:   rgba(45, 104, 196, .2);

  /* Semantic — separate from the accent */
  --color-success:        #2FA84F;   /* 10 kg green */
  --color-success-soft:   rgba(47, 168, 79, .16);
  --color-warning:        #F2C230;
  --color-danger:         #E0362A;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* Type — system stacks only */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.85rem;
  --text-base: 0.95rem;
  --text-lg:   1.1rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.8rem;
  --text-3xl:  2.9rem;

  /* Soft geometry — pills for status, rounded cards for surfaces */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* Depth. The inset highlight along the top edge is what makes a surface read
     as lifted rather than merely outlined. */
  --shadow-sm:    0 2px 6px rgba(0,0,0,.3);
  --shadow-md:    0 8px 20px rgba(0,0,0,.35);
  --shadow-lg:    0 14px 30px rgba(0,0,0,.45);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.045);

  --transition-fast: 140ms ease;
  --transition-base: 240ms ease;

  /* Safe areas — this runs as an installed PWA */
  --inset-top:    env(safe-area-inset-top, 0px);
  --inset-bottom: env(safe-area-inset-bottom, 0px);

  /* How much taller the tab bar gets once the home-indicator inset is applied.
     The bar's buttons give up their own bottom padding to the inset (see
     .tabbar button), so the first --space-3 of inset costs nothing and only the
     remainder adds height. The FAB and the toast sit above the bar and had this
     baked into hardcoded pixel offsets, which stopped being true the moment the
     bar's padding changed. */
  --tabbar-extra: max(0px, calc(var(--inset-bottom) - var(--space-3)));
}