/* ARETE Metabolic and Performance - design tokens.
   GENERATED by scripts/build_tokens.py from tokens.json. Do not edit by hand;
   edit tokens.json in the design system and regenerate, or the two drift.

   Source: Brand supplied as raster artwork — gold wordmark on black, packaging photography and a price list. Colour values sampled from the supplied logo and packaging; type is a substitution, see README.
   Theme:  Dark only. A light theme is deliberately out of scope for v1; see README.
*/

:root {
  /* colour - 37 tokens, theme: dark */
  --surface-000: #07070a;  /* The deepest ground. Status bar, behind modal sheets, and the gutter either side of the phone frame on desktop. */
  --surface-100: #0e0e12;  /* Default screen background. Every screen starts here. */
  --surface-200: #16161b;  /* Resting card and list-row background. One step up from the screen. */
  --surface-300: #1e1e25;  /* Inputs, segmented controls, chips at rest, and cards sitting on top of another card. */
  --surface-400: #2a2a33;  /* Pressed and hovered state of anything built on surface-200 or surface-300. */
  --surface-inverse: #f6f3ee;  /* Rare light panel — used only for the add-to-calendar sheet and printable confirmations. */
  --line-100: #23232b;  /* Hairline between list rows. Decorative only, never the sole indicator of a boundary. */
  --line-200: #33333e;  /* Card border and section divider. Carries slightly more weight than line-100. */
  --line-300: #6a6a78;  /* Border of an interactive control — input, checkbox, radio, unselected chip. Clears 3:1 against surface-100 through surface-300, so it may carry meaning on its own. */
  --ink-100: #f6f3ee;  /* Primary text and active icons. 17.4:1 on surface-100. Warm off-white, never pure #fff — pure white reads blue against the gold. */
  --ink-200: #b9b4ab;  /* Secondary text: supporting copy, list subtitles, input values before focus. 9.3:1 on surface-100. */
  --ink-300: #8a857d;  /* Muted text: placeholders, timestamps, helper lines, disabled labels. 5.3:1 on surface-100 — still passes AA, so it is safe for real content, not just decoration. */
  --ink-on-gold: #150f03;  /* Text and icons sitting on any gold fill. 8.2:1 on gold-400. Never put ink-100 on gold. */
  --gold-100: #f7ecd0;  /* Lightest gold. Reserved for the highlight edge along the top of a gold fill, mimicking the bevel in the wordmark. */
  --gold-200: #f2dca2;  /* Gold text at small sizes and gold icons that need to beat surrounding ink. 14.3:1 on surface-100. */
  --gold-300: #e8c374;  /* The default gold for text, icons and active tab labels. 11.5:1 on surface-100. Use this, not gold-400, whenever gold is being read rather than looked at. */
  --gold-400: #d4a24c;  /* The brand accent. Primary button fills, active indicators, progress arcs, focus rings. This is the one accent colour in the product — if something is gold, it is actionable or it is the brand. */
  --gold-500: #b4873a;  /* Pressed state of a gold-400 fill, and the lower stop of the two-stop gold used on large surfaces. */
  --gold-600: #8a6528;  /* Gold at low emphasis: the rail of a progress track, a disabled gold button, the hairline around a gold-tinted card. */
  --gold-700: #4e3912;  /* Deepest gold. Tinted backgrounds for gold-flagged cards, where a full gold-400 fill would shout. */
  --success-400: #3ddc97;  /* Completed sets, met targets, confirmed bookings, paid orders. 10.9:1 on surface-100. */
  --success-700: #0d3b2a;  /* Background of a success banner or a completed set row. */
  --warn-400: #ffb02e;  /* Approaching a limit — 85 to 100 percent of the daily calorie target, a booking inside 24 hours. Distinct from gold-400 by being materially more saturated; never place the two side by side. */
  --warn-700: #43300a;  /* Background of a warning banner, including the over-limit state on the food diary. */
  --danger-400: #ff5a5f;  /* Over the calorie limit, failed payment, destructive confirmation. 6.3:1 on surface-100. */
  --danger-700: #4a1416;  /* Background of a danger banner or an over-limit calorie ring track. */
  --info-400: #7cb0ff;  /* Neutral informational notices, including the regulatory notice on a consultation-gated product. Deliberately cool and quiet so compliance copy reads as calm, not alarming. */
  --info-700: #13263f;  /* Background of an informational or regulatory notice. */
  --rx-tirzepatide: #3d8ff0;  /* Product identity for Tirzepatide, taken from its packaging spine. Identity only — tints the product header and the dot on a catalogue card, never a button. */
  --rx-retatrutide: #f5697a;  /* Product identity for Retatrutide. Lightened from the packaging red to clear 4.5:1 on card surfaces. */
  --rx-nad: #f0a83d;  /* Product identity for NAD+. */
  --rx-dsip: #a8d94a;  /* Product identity for DSIP. */
  --rx-kpv: #b479f9;  /* Product identity for KPV. Lightened from the packaging purple, which failed contrast on surface-300. */
  --rx-ghkcu: #22c58a;  /* Product identity for GHK-Cu. */
  --rx-glutathione: #f36cc0;  /* Product identity for Glutathione. */
  --scrim-soft: #07070a33;  /* Top stop of the gradient laid over photography. Keeps the brightest part of an image readable without flattening it. */
  --scrim-hard: #07070acc;  /* Lower stop of the photographic scrim, where text actually sits. Every photograph in the product carries both stops — an image that only works without them is the wrong image. */

  /* spacing - 10 tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* radius - 6 tokens */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* shadow - 4 tokens */
  --shadow-card: inset 0 1px 0 0 #ffffff0f;
  --shadow-raised: inset 0 1px 0 0 #ffffff14, 0 12px 28px -14px #000000e6;
  --shadow-gold: inset 0 1px 0 0 #f7ecd066, 0 8px 24px -14px #d4a24c80;
  --shadow-sheet: 0 -24px 60px -24px #000000f2;

  /* type families */
  --font-display: "Saira", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-numeric: "Saira Semi Condensed", "Saira", ui-sans-serif, sans-serif;
}

/* type styles - one class per named style in tokens.json */

/* Display (display) */
.t-display-xl { font-family: var(--font-display); font-size: 40px; line-height: 40px; font-weight: 800; letter-spacing: -0.015em; }
.t-display-l { font-family: var(--font-display); font-size: 32px; line-height: 34px; font-weight: 800; letter-spacing: -0.01em; }
.t-display-m { font-family: var(--font-display); font-size: 25px; line-height: 28px; font-weight: 700; letter-spacing: -0.005em; }
.t-display-s { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; }
.t-eyebrow { font-family: var(--font-display); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

/* Text (body) */
.t-body-l { font-family: var(--font-body); font-size: 17px; line-height: 26px; font-weight: 400; }
.t-body-m { font-family: var(--font-body); font-size: 15px; line-height: 23px; font-weight: 400; }
.t-body-s { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 400; }
.t-label-m { font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 600; }
.t-label-s { font-family: var(--font-body); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; }

/* Numeric (numeric) */
.t-metric-xl { font-family: var(--font-numeric); font-size: 46px; line-height: 46px; font-weight: 700; }
.t-metric-l { font-family: var(--font-numeric); font-size: 30px; line-height: 32px; font-weight: 700; }
.t-metric-m { font-family: var(--font-numeric); font-size: 20px; line-height: 22px; font-weight: 600; }
.t-metric-s { font-family: var(--font-numeric); font-size: 15px; line-height: 18px; font-weight: 600; }
.t-price { font-family: var(--font-numeric); font-size: 17px; line-height: 20px; font-weight: 700; }