/* ═══════════════════════════════════════════════════════════════════════
   Velros design tokens — THE single source of truth (canonical:
   docs/DESIGN.md). The whole app renders on this one brand system:
   the warm paper / deep-green-ink palette. Loaded by every layout (standard
   + immersive), so app-shell semantic tokens (--background, --foreground, …)
   and the brand palette resolve from the same place. Change a value here and
   it ripples everywhere — no per-surface duplication.

   Legacy app shells are kept under _backup for reference; active surfaces use
   these tokens directly.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette ───────────────────────────────────────── */
  --paper: #f8f1e7;
  --paper-deep: #eadfce;
  --paper-warm: #fffaf2;
  --ink: #123f32;
  --ink-soft: rgba(18, 63, 50, 0.72);
  --ink-muted: rgba(18, 63, 50, 0.46);
  --line: rgba(18, 63, 50, 0.14);
  --line-strong: rgba(18, 63, 50, 0.24);
  --green: #4f6e58;
  --green-bright: #3fcf8e;
  --amber: #e0982f;
  --moss: #dcebd4;
  --sky: #dceaf6;
  --rose: #f7ded7;
  --honey: #f7e7ad;
  --lilac: #ebe2f4;
  --shadow: rgba(18, 63, 50, 0.14);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);

  --brand-serif: ui-serif, Georgia, "Times New Roman", serif;
  --brand-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  /* ── Interaction roles ───────────────────────────────────── */
  --nav-link: var(--ink-soft);
  --nav-link-hover: var(--green);

  /* ── Fonts (app shell) ───────────────────────────────────── */
  --font-sans: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", "SF Mono", "Fira Mono", monospace;
  --font-logo: "Playfair Display", "Didot", "Georgia", serif;

  /* ── Semantic app tokens → brand. Every Tailwind utility and bespoke
        rule (bg-background, text-foreground, border-border, …) resolves
        through these, so the whole app adopts the brand automatically. ── */
  --background: var(--paper);
  --bg-elevated: var(--paper-warm);
  --bg-surface: var(--paper-deep);
  --bg-surface-hover: #e3d6c0;
  --bg-sunken: var(--paper-deep);

  --foreground: var(--ink);
  --fg-secondary: var(--ink-soft);
  --fg-muted: var(--ink-muted);

  --border: var(--line);
  --border-hover: var(--line-strong);

  --base-blue: var(--green);
  --base-blue-hover: var(--green-bright);
  --base-blue-light: rgba(79, 110, 88, 0.1);

  --success: var(--green);
  --warning: #b07a16;
  --danger: #b3433a;
  --accent-info: #3f6e9e;
  --accent-review: #b07a16;

  --overlay: rgba(18, 63, 50, 0.18);
  --bubble-user-bg: var(--green);
  --bubble-user-fg: var(--paper-warm);
  --bubble-user-meta: var(--ink-muted);

  --lz-fg-dim: var(--ink-muted);
  --lz-accent: var(--green);
  --lz-accent-fg: var(--paper-warm);
  --lz-border-active: var(--line-strong);
  --lz-bg-ghost: rgba(18, 63, 50, 0.02);

  /* ── Layout scaffolding ──────────────────────────────────── */
  --sidebar-width: 15.5rem;
  --content-max: 1440px;
  --grid-gap: min(2.25vw, 32px);

  color-scheme: light;
}