/* ════════════════════════════════════════════════════════════════════════════
   Zaera core — design tokens shared by every app in the family.

   VYRA is the benchmark: these are VYRA's own tokens ("Forest" palette plus its
   soft shape layer), copied exactly. VYRA itself is never changed to match
   this file; this file is changed to match VYRA.

   Each app keeps its own accent: it sets --primary and --primary-rgb (and
   --secondary / --secondary-rgb) in its own :root. The defaults below are
   VYRA's sage and jade.

   Edit in the zaera-core project, then from inside an app run
   `node ../core/scripts/sync.js`.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Forest: deep green backgrounds (VYRA) */
  --bg: #0a0f0c;
  --surface: #111a15;
  --surface-2: #18241d;
  --surface-3: #223128;
  --track: #18241d;

  /* Accent: the app overrides these. VYRA: sage for actions, jade for highlights. */
  --primary: #9db89a;
  --secondary: #6fcfa9;
  --primary-rgb: 157 184 154;
  --secondary-rgb: 111 207 169;
  --accent: var(--primary);
  --accent-ink: #111a10;
  --nebula: rgb(var(--primary-rgb) / 0.07);
  --tint: rgb(var(--primary-rgb) / 0.12);
  --tint-strong: rgb(var(--primary-rgb) / 0.2);

  /* Text */
  --text: #f0efed;
  --text-dim: #9a9a98;
  --text-faint: #5a5a58;

  /* Lines */
  --border: rgba(255, 255, 255, 0.09);
  --border-active: rgba(255, 255, 255, 0.20);

  /* Status. Warnings stay warm so they never read as "all good" (VYRA). */
  --warn: #e3a857;
  --success: #6fae8a;
  --warning: var(--warn);
  --error: #d96a6a;
  --danger: #d96a6a;

  /* Overlays */
  --black-28: rgba(0, 0, 0, 0.28);
  --black-55: rgba(0, 0, 0, 0.55);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-42: rgba(255, 255, 255, 0.42);

  /* Shape: VYRA's soft layer */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius: var(--radius-md);
  --pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Type: Inter 400 / 500 / 600 */
  --font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-num: var(--font);

  color-scheme: dark;
}