/* NutriSync — Colors & Type
   Source of truth for the dark-first iOS app. SF Pro system; rounded numerics for data. */

:root {
  /* ── Surfaces (dark-first) ── */
  --bg-primary: #1c1c1c;     /* app background */
  --bg-secondary: #202020;   /* sections */
  --bg-elevated: #252525;    /* elevated cards */
  --bg-surface: #303030;     /* sheets, surfaces */
  --bg-tertiary: #2A2A2A;    /* tertiary fills */
  --bg-pure-black: #000000;  /* status bar / safe area only */

  /* Cards (preferred — translucent over dark bg, not solid) */
  --card-fill: rgba(255,255,255,0.03);
  --card-fill-hover: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.08);
  --card-border-hairline: rgba(255,255,255,0.06);

  /* Chips / pills */
  --chip-fill: rgba(255,255,255,0.05);
  --chip-border: rgba(255,255,255,0.10);

  /* ── Accent (signature lime) — sparingly ── */
  --accent: #B0EE63;
  --accent-pressed: #9AD854;
  --accent-soft-15: rgba(176,238,99,0.15);
  --accent-soft-12: rgba(176,238,99,0.12);
  --accent-soft-08: rgba(176,238,99,0.08);
  --accent-stroke-60: rgba(176,238,99,0.6);
  --accent-stroke-30: rgba(176,238,99,0.3);

  /* ── Text ── */
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250,250,250,0.70);
  --text-tertiary: rgba(250,250,250,0.50);
  --text-quaternary: rgba(250,250,250,0.35);
  --text-disabled: rgba(250,250,250,0.25);

  /* ── State ── */
  --state-amber: #F59E0B;     /* late / urgency */
  --state-red: #CC3333;       /* missed */
  --state-gray: rgba(255,255,255,0.35); /* fasted / neutral */

  /* Macro chart colors (from SwiftUI Color.blue/.orange/.yellow defaults) */
  --macro-protein: #0A84FF;
  --macro-carbs: #FF9500;
  --macro-fat: #FFD60A;

  /* ── Radii ── */
  --radius-chip: 12px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --radius-pill: 9999px;

  /* ── Spacing (4pt grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Nunito", "Inter", system-ui, sans-serif;

  /* Springs (for reference; CSS transitions approximate iOS spring r=0.4 d=0.8) */
  --spring-subtle: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-quick: 200ms;
  --duration-base: 280ms;
}

/* ── Type roles ── */
/* Numerics — calorie hero, macro values. Rounded, monospaced digits. */
.t-numeric-hero  { font-family: var(--font-rounded); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-numeric-xl    { font-family: var(--font-rounded); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.t-numeric-lg    { font-family: var(--font-rounded); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }

/* Titles */
.t-title-xl      { font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; }
.t-title-lg      { font-family: var(--font-sans); font-weight: 700; font-size: 22px; }
.t-title-md      { font-family: var(--font-sans); font-weight: 600; font-size: 18px; }
.t-title-sm      { font-family: var(--font-sans); font-weight: 600; font-size: 16px; }

/* Body */
.t-body          { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.4; }
.t-body-sm       { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.4; }

/* Labels — small, lowercase, tracked. The "lifter coach" voice. */
.t-label-pill    { font-family: var(--font-sans); font-weight: 700; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; }
.t-label-section { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.t-meta          { font-family: var(--font-sans); font-weight: 400; font-size: 11px; }
.t-meta-sm       { font-family: var(--font-sans); font-weight: 400; font-size: 10px; }