/* Peptide Tracker design tokens.
   Generated from design/design-tokens.json — edit the JSON, not this file.

   Midnight is the default scheme. Add data-scheme="lime" on :root to switch.
   Series colours are scheme-independent: they are validated against both
   card surfaces, so they do not change when the scheme does. */

:root {
  color-scheme: dark;

  /* --- scheme: midnight (default) --- */
  --page: #080D16;
  --hero-gradient: linear-gradient(180deg, #172234 0%, #0E1622 52%, #080D16 100%);
  --card: #111A28;
  --card-raised: #16212F;
  --track: #1E2A3B;
  --hairline: #223046;
  --divider: #1B2635;
  --text-1: #E9F0F8;
  --text-2: #8B9BB2;
  --text-3: #5E6E85;
  --sparkline: #42536B;
  --accent: #4CD8E8;
  --on-accent: #04121C;
  --accent-soft: #6E93A6;
  --accent-tint-bg: rgba(76, 216, 232, 0.08);
  --accent-tint-border: rgba(76, 216, 232, 0.28);
  --tab-bar-bg: #060A11;
  --tab-bar-hairline: #16202F;

  /* --- series (scheme-independent) --- */
  --macro-protein: #685BFC;
  --macro-carbs: #29A895;
  --macro-fat: #A25834;
  --macro-sugar: #B441AE;
  --sleep-awake: #8FE0DE;
  --sleep-rem: #4FC1C3;
  --sleep-light: #1B9FA6;
  --sleep-deep: #0F7B85;

  /* --- layout --- */
  --status-bar-inset: 59px;
  --home-indicator-inset: 34px;
  --tab-item-height: 48px;
  --gutter: 16px;
  --hero-padding: 20px;
  --card-radius: 18px;
  --card-radius-lg: 20px;
  --min-tap-target: 44px;
  --card-top-highlight: inset 0 1px 0 rgba(255,255,255,0.035);

  /* --- type --- */
  --font-ui: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numeric: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-scheme="lime"] {
  --page: #0A0B0D;
  --hero-gradient: linear-gradient(180deg, #1B1F25 0%, #12161A 52%, #0A0B0D 100%);
  --card: #14171B;
  --card-raised: #1A1E23;
  --track: #23272E;
  --hairline: #24282E;
  --divider: #1E2228;
  --text-1: #F2F5F7;
  --text-2: #98A1AB;
  --text-3: #6A737D;
  --sparkline: #4C545C;
  --accent: #C7F559;
  --on-accent: #0A0B0D;
  --accent-soft: #8E9A6B;
  --accent-tint-bg: rgba(199, 245, 89, 0.07);
  --accent-tint-border: rgba(199, 245, 89, 0.26);
  --tab-bar-bg: #0C0E11;
  --tab-bar-hairline: #1B1F24;
}

/* Every figure in this app is monospaced and tabular. A column of numbers that
   shifts as digits change is the cheapest way to look unfinished. */
.numeric {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

/* Cards read as lit, not flat, because of the 1px top highlight. */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--card-radius);
  box-shadow: var(--card-top-highlight);
}

/* The hero paints behind the status bar. Never leave that band as bare page
   colour, and never draw a fake status bar into it. */
.hero {
  background: var(--hero-gradient);
  padding: var(--status-bar-inset) var(--hero-padding) 18px;
}