/*
 * Design tokens — Palette A (teal). Source of truth: docs/views.md.
 * Every visual value in component CSS must reference a token from here.
 */
:root {
  /* Color — brand */
  --color-accent: #0E6E5C;
  --color-accent-strong: #0B5748;
  --color-accent-tint: #E4F0EC;
  --gradient-agent: linear-gradient(158deg, #159A80, #0B5A4B);

  /* Agent hero surface — the dark, always-on agent card (Home) and chrome. */
  --color-agent-surface: #14201C;
  --color-agent-muted: #9DB2AA;
  --color-agent-accent: #7FD8C3;

  /* Color — grounds & ink (neutrals biased toward the accent) */
  --color-bg: #DFEDE4;
  --color-surface: #FFFFFF;
  --color-ink: #16211D;
  --color-muted: #5F6B64;
  --color-line: #DFE5E1;

  /* Color — inline references (a catalog food linked inside a meal's text).
     Blue, so a link never reads as a brand accent or a state. */
  --color-reference: #12518F;
  --color-reference-tint: #E4ECF8;

  /* Color — semantic */
  --color-danger: #C0392B;
  --color-danger-tint: #FBEBE8;
  --color-warn: #B8791F;
  --color-warn-tint: #FBF0DF;

  /* Typography — families */
  --font-ui: "Adwaita Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Typography — scale (mobile) */
  --text-display: 1.625rem;  /* 26 */
  --text-h: 1.375rem;        /* 22 */
  --text-title: 1.125rem;    /* 18 */
  --text-body: 0.9375rem;    /* 15 */
  --text-small: 0.8125rem;   /* 13 */
  --text-eyebrow: 0.6875rem; /* 11 */

  /* Typography — weights */
  --weight-body: 400;
  --weight-label: 500;
  --weight-label-strong: 600;
  --weight-heading: 700;
  --weight-heading-strong: 750;

  /* Typography — rhythm */
  --leading-body: 1.5;
  --leading-agent: 1.55;
  --leading-heading: 1.15;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.08em;

  /* Space scale — 4, 8, 12, 16, 20, 24, 32, 40, 48, 64 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Radius */
  --radius-control: 13px;
  --radius-card: 18px;
  --radius-bubble: 16px;
  --radius-pill: 999px;

  /* Elevation — soft, low-contrast */
  --shadow-raised: 0 1px 2px rgba(22, 33, 29, .06), 0 2px 8px rgba(22, 33, 29, .05);
  --shadow-floating: 0 8px 24px rgba(22, 33, 29, .12);
  --shadow-agent: 0 8px 20px rgba(14, 110, 92, .32);

  /* Controls */
  --control-input-h: 48px;
  --control-btn-h: 50px;
  --focus-ring: 0 0 0 4px rgba(14, 110, 92, .14);

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}