/* variables.css — the design system's single source of truth.
   Change a value here to re-theme the entire app. */

:root,
:root[data-theme="light"] {
  /* ---- Color ---- */
  --color-bg: #fbfaf8;          /* near-white, faint warmth */
  --color-surface: #ffffff;
  --color-text: #1b1a18;        /* body / headline ink */
  --color-text-soft: #5a5650;   /* secondary reading text */
  --color-text-muted: #a3a099;  /* meta, numbers, captions */
  --color-border: #e9e6df;
  --color-line: #d7d3c9;        /* quote-tree strokes */
  --color-accent: #6b6558;      /* taupe — used sparingly */
  --color-greentext: #7c8f6e;   /* muted sage, not neon green */
  --color-overlay: rgba(27, 26, 24, 0.5);
  --color-error: #a9564a;
  --shadow-panel: 0 12px 28px -14px rgba(27, 26, 24, 0.18);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-bg: #222831;
  --color-surface: #393e46;
  --color-text: #dfd0b8;
  --color-text-soft: #dfd0b8cc;   /* beige, slightly dimmed for secondary reading text */
  --color-text-muted: #948979;    /* muted warm gray-taupe for meta/captions — not beige, stays out of the text-only color */
  --color-border: #393e46;
  --color-line: #948979;
  --color-accent: #948979;
  --color-greentext: #8ba279;
  --color-overlay: rgba(0, 0, 0, 0.65);
  --color-error: #d47a6c;
  --shadow-panel: 0 12px 28px -14px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

:root {
  /* ---- Typography ---- */
  --font-serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-brand: 1.9rem;
  --fs-op-subject: 1.7rem;
  --fs-op-comment: 1.05rem;
  --fs-reply-no: 0.78rem;
  --fs-reply-body: 1.5rem;
  --fs-meta: 0.82rem;
  --fs-label: 0.68rem;

  /* ---- Spacing ---- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* ---- Layout ---- */
  --sidebar-width: 320px;
  --indicator-width: 72px;
  --content-max-width: 620px;
  --reply-gap: 4.25rem;

  /* ---- Motion ---- */
  --ease-camera: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 180ms;
  --duration-medium: 360ms;
  --duration-slow: 480ms;
}

body {
  transition: background-color var(--duration-medium) ease, color var(--duration-medium) ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}