/* ══════════════════════════════════════════════════════════════════════════
   ARETE BRAND TOKENS
   Every color, typeface, type size and easing in the app comes from here.
   style.css and the screens' scripts use the role names further down
   (--bg, --text, --accent ...), never a raw value.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette: these values and nothing else ── */
  --c-ink: #0B0B0B;
  --c-surface: #161616;
  --c-line: #262422;
  --c-white: #F8F8F8;
  --c-muted: #8A8580;
  --c-divider: #707070;
  --c-cream: #F2EEE6;
  --c-orange: #FF561E;

  /* The same, as channels, for the few places that need transparency */
  --c-ink-rgb: 11,11,11;
  --c-white-rgb: 248,248,248;
  --c-line-rgb: 38,36,34;
  --c-divider-rgb: 112,112,112;
  --c-orange-rgb: 255,86,30;

  /* Errors and success. Kept, but quiet, so they never compete with orange.
     Each theme has the shade that still reads at 4.5:1 on its own ground. */
  --c-danger: #C47A6E;
  --c-danger-rgb: 196,122,110;
  --c-success: #8FAD8B;
  --c-success-rgb: 143,173,139;
  --c-danger-light: #9A4F44;
  --c-danger-light-rgb: 154,79,68;
  --c-success-light: #4F6B4B;
  --c-success-light-rgb: 79,107,75;

  /* ── Type: one family. Inter switches to its Display cut on its own at
        large sizes (font-optical-sizing: auto, opsz axis 14..32). ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-eyebrow: 12px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-h3: 20px;
  --fs-h2: 26px;
  --fs-h1: 40px;
  --fs-display: 56px;
  --fw-head: 900;
  --track-head: -0.035em;
  --track-eyebrow: 0.2em;
  --lh-head: 0.95;
  --lh-body: 1.5;

  /* ── Motion ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-rise: 600ms;
  --dur-draw: 800ms;
  --stagger: 40ms;

  /* ══ Roles, dark (the default) ══ */
  --bg: var(--c-ink);
  --surface: var(--c-surface);
  --surface-rgb: 22,22,22;
  /* Chips, tiles and inputs: the line colour at 55%, which keeps muted text
     at 4.5:1 (on the solid line colour it was 4.2:1). Floating controls use
     --raised, which is solid, so nothing shows through them. */
  --surface2: rgba(var(--c-line-rgb), 0.55);
  --raised: var(--c-line);
  --border: var(--c-line);
  --border2: rgba(var(--c-divider-rgb), 0.22);
  --text: var(--c-white);
  --text-rgb: var(--c-white-rgb);
  --text-dim: var(--c-muted);
  --text-muted: var(--c-muted);
  --overlay: rgba(var(--c-ink-rgb), 0.82);
  --card-shadow: none;

  /* Orange, only where the brand allows it: progress, the one primary
     action, the active tab, and small accent dots. */
  --orange: var(--c-orange);
  --orange-rgb: var(--c-orange-rgb);
  --on-orange: var(--c-ink);

  /* What used to be the gold accent is now a neutral highlight: selected
     chips, links, emphasised numbers. Orange is opted into, never inherited. */
  --accent: var(--text);
  --accent-b: var(--text);
  --accent-rgb: var(--text-rgb);
  --accent-b-rgb: var(--text-rgb);
  --accent-d-rgb: var(--text-rgb);
  --accent-hi-rgb: var(--text-rgb);
  --accent-glow-rgb: var(--text-rgb);
  --on-accent: var(--bg);

  /* Macros: calories is the progress ring and takes the orange; the other
     three are told apart by their labels, not by color. */
  --cal: var(--orange);
  --pro: var(--text);
  --carb: var(--text);
  --fat: var(--text);
  --danger: var(--c-danger);
  --danger-rgb: var(--c-danger-rgb);
  --success: var(--c-success);
  --success-rgb: var(--c-success-rgb);
}

/* ══ Roles, light: cream ground, ink text ══
   The palette's muted grey is too light to read on cream (3.1:1), so muted
   text here is ink at reduced strength (6.2:1). */
[data-theme="light"] {
  --bg: var(--c-cream);
  --surface: var(--c-white);
  --surface-rgb: var(--c-white-rgb);
  --surface2: rgba(var(--c-ink-rgb), 0.06);
  --raised: var(--c-white);
  --border: rgba(var(--c-ink-rgb), 0.12);
  --border2: rgba(var(--c-ink-rgb), 0.08);
  --text: var(--c-ink);
  --text-rgb: var(--c-ink-rgb);
  --text-dim: rgba(var(--c-ink-rgb), 0.68);
  --text-muted: rgba(var(--c-ink-rgb), 0.68);
  --overlay: rgba(var(--c-ink-rgb), 0.55);
  --danger: var(--c-danger-light);
  --danger-rgb: var(--c-danger-light-rgb);
  --success: var(--c-success-light);
  --success-rgb: var(--c-success-light-rgb);
}

/* ══ AuBs: a light theme in pinks ══
   Five pinks and a warm near-black. It sits on top of the light theme
   (data-theme="light" data-palette="aubs"), so every light-ground fix in
   style.css applies to it as well. The pinks are too light to read as text,
   so text stays dark everywhere, the labels on pink buttons included
   (ink on Petal Rouge is 6:1, white would be 2.7:1). The pinks go on fills:
   see the AuBs section at the end of style.css. Share images keep the brand
   palette above, whichever theme is chosen. */
[data-theme="light"][data-palette="aubs"] {
  --aubs-blush: #FFE5EC;
  --aubs-pastel: #FFC2D1;
  --aubs-cherry: #FFB3C6;
  --aubs-candy: #FF8FAB;
  --aubs-rouge: #FB6F92;
  --aubs-ink: #2B1E20;
  --aubs-ink-rgb: 43,30,32;
  --aubs-rouge-rgb: 251,111,146;

  --bg: var(--aubs-pastel);
  --surface: var(--aubs-blush);
  --surface-rgb: 255,229,236;
  --surface2: rgba(var(--aubs-rouge-rgb), 0.14);
  --raised: var(--aubs-blush);
  --border: var(--aubs-cherry);
  --border2: rgba(var(--aubs-rouge-rgb), 0.22);
  --text: var(--aubs-ink);
  --text-rgb: var(--aubs-ink-rgb);
  /* 5.1:1 on the background, 4.8:1 on a chip */
  --text-dim: rgba(var(--aubs-ink-rgb), 0.72);
  --text-muted: rgba(var(--aubs-ink-rgb), 0.72);
  --overlay: rgba(var(--aubs-ink-rgb), 0.45);
  /* Petal Rouge takes orange's place: progress, the main action, the active tab */
  --orange: var(--aubs-rouge);
  --orange-rgb: var(--aubs-rouge-rgb);
  --on-orange: var(--aubs-ink);
  /* The accent itself stays ink, since it is used as text. Its tints (washes
     behind pills and chips, the activity heat map, faint marks) are pink. */
  --accent-rgb: var(--aubs-rouge-rgb);
  --accent-b-rgb: var(--aubs-rouge-rgb);
  --accent-d-rgb: var(--aubs-rouge-rgb);
  --accent-hi-rgb: var(--aubs-rouge-rgb);
  --accent-glow-rgb: var(--aubs-rouge-rgb);
  /* The light theme's shades read 3.9:1 on pastel; these read 5:1 */
  --danger: #843D33;
  --danger-rgb: 132,61,51;
  --success: #40593D;
  --success-rgb: 64,89,61;
}