/**
 * Macro tracker — design tokens.
 *
 * DIRECTION: the Nutrition Facts panel.
 *
 * This app's whole job is "how much of today's allowance have I used" — which is
 * the exact question the FDA panel was designed to answer, and it already has a
 * typographic system for it: graduated black rules (hairline / 4px / 8px), a
 * grotesque set tight, tabular figures, uppercase micro-labels, and a right-hand
 * **% DAILY VALUE** column. So the interface is built as that panel rather than
 * as a generic dashboard, and %DV is the connective tissue across every tab:
 * Today's totals, the meal planner's remaining budget, and a recipe portion.
 *
 * Consequences to keep: surfaces are white (not tinted), rules — not boxes or
 * shadows — do the separating, and color appears only where it encodes data:
 * one ink per macro. The 2026 redesign softened the letterforms of that idea
 * without changing its grammar: interactive elements take a modest 8–12px
 * radius (print stays square, controls are touched), the mid/thick rules
 * dropped from 4/8px to 2/3px, and field borders are a quiet neutral rather
 * than full ink — the panel's hierarchy, at conversational volume.
 *
 * Overrides the base server's variables.css (public roots load base-first,
 * downstream wins). Keeps every variable name the base web-component templates
 * read so their fallbacks never kick in.
 */

:root {
  /* Brand / accents — ink, not decoration */
  --color-primary: #121212;          /* panel black: actions, active state */
  --color-primary-dark: #000000;
  --color-secondary: #5E5E5E;
  --color-success: #1B7A45;
  --color-danger: #C8102E;           /* over budget — the one alarm color */
  /* Warning is its own hue — it must never be mistakable for the carbs
   * ink (#C86A12), which is data, not a judgement. */
  --color-warning: #8A5A00;
  --color-info: #2340C8;

  /* Macro inks — the only hues in the system; each encodes one macro */
  --macro-protein: #2340C8;
  --macro-carbs:   #C86A12;
  --macro-fat:     #16795A;
  --macro-calories:#121212;

  /* Text */
  --color-text: #121212;
  --color-text-light: #5E5E5E;
  --color-text-white: #FFFFFF;
  --ink: #121212;
  --ink-soft: #5E5E5E;
  --ink-faint: #949494;

  /* Surfaces — white paper; the only fill is a track behind a bar */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FFFFFF;
  --color-bg-dark: #121212;
  --paper: #FFFFFF;
  --paper-raised: #FFFFFF;
  --paper-sunken: #F0EFEC;

  /* Rules — the panel's structural device, in three deliberate weights.
   * Field/control borders are a quiet neutral; ink is reserved for the
   * structural rules and for focus. */
  --color-border: #C9C7C2;
  --color-border-focus: #121212;
  --hairline: #D9D7D2;
  --rule-hair: 1px;
  --rule-mid: 2px;
  --rule-thick: 3px;

  /* Scrollbar */
  --color-scrollbar-track: #F0EFEC;
  --color-scrollbar-thumb: #C4C2BC;
  --color-scrollbar-thumb-hover: #949494;
  --color-scrollbar-thumb-active: #5E5E5E;

  /* Typography — a grotesque, set tight. No serif: the panel has none, and a
   * high-contrast serif display is the one thing this design is not. */
  --font-primary: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  /* Condensed for the big figures — the panel's calorie number is narrow and heavy */
  --font-numeric: "Helvetica Neue Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-accent: var(--font-primary);
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5rem;
  --line-height-base: 1.45;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 0.375rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 3rem;

  /* Layout — print stays square; CONTROLS are rounded (they are touched,
   * not printed): search fields, buttons, dialogs, menus. */
  --border-radius-sm: 8px;
  --border-radius: 10px;
  --border-radius-lg: 12px;
  --container-max-sm: 720px;
  --container-max-md: 860px;
  --container-max-lg: 920px;
  --container-padding: 1.25rem;

  /*
   * CONTROLS — the one place a button's size is decided.
   *
   * Custom properties pierce shadow DOM, which is why colour and radius
   * already look the same in every component. Sizes did not: each
   * component re-declared `.btn { height: 44px; padding: 0 1.35rem }`
   * with its own numbers, and one-off overrides ("this header's button
   * is 36px") then drifted from a pattern that was never written down.
   * These tokens ARE the pattern; a component that needs a smaller
   * button asks for the small variant rather than inventing a height.
   */
  --control-h: 44px;              /* the touch target every primary control uses */
  --control-h-sm: 36px;           /* the secondary variant, e.g. a button inside a section head */
  --control-pad-x: 1.35rem;
  --control-pad-x-sm: 0.95rem;
  --control-font: 0.95rem;
  --control-font-sm: 0.85rem;

  /* Shadows — none; separation comes from rules */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.10);

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.22s cubic-bezier(.2,.7,.3,1);
  --transition-slow: 0.5s ease;

  /* Component defaults kept for base templates */
  --input-color: var(--ink);
  --input-bg: #FFFFFF;
  --input-shadow: none;
  --input-shadow-focus: 0 0 0 3px rgba(18, 18, 18, 0.14);

  --btn-shadow: none;
  --btn-shadow-focus: 0 0 0 3px rgba(18, 18, 18, 0.14);
  --btn-shadow-active: inset 0 2px 4px rgba(18, 18, 18, 0.18);

  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* Quality floor: honor a reduced-motion preference everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}