/* ============================================================
   Dystopia Mail — design tokens
   Flat, hairline-driven, single brass accent used sparingly.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-0: #0b0c0e;        /* page */
  --bg-1: #101114;        /* raised: header, sidebar, dialogs */
  --bg-2: #15171b;        /* panels */
  --bg-3: #1b1e23;        /* hover */
  --bg-4: #22252b;        /* inputs, active */
  --bg-5: #292d34;        /* pressed */

  /* Text */
  --text-1: #e4e6e9;
  --text-2: #99a0ab;
  --text-3: #6a7280;
  --text-4: #4e555f;

  /* Accent — brass. Deliberately scarce. */
  --accent: #c9a24d;
  --accent-hover: #d6b160;
  --accent-ink: #171004;
  --accent-dim: rgba(201, 162, 77, 0.10);
  --accent-line: rgba(201, 162, 77, 0.30);

  /* Semantic */
  --danger: #d95f4e;
  --danger-dim: rgba(217, 95, 78, 0.10);
  --success: #63a86c;
  --info: #6f9fd8;
  --warning: #c9a24d;

  /* Hairlines */
  --line-1: #1a1c21;
  --line-2: #24272e;
  --line-3: #2f333b;

  /* Typography */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.625rem;
  --fs-hero: clamp(2.1rem, 3.2vw + 1.2rem, 3rem);

  --lh-tight: 1.22;
  --lh-body: 1.6;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* Radii — sharp */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-full: 999px;

  /* Elevation — dialogs only */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.5);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-med: 200ms;

  /* Layout */
  --shell: 66rem;
  --shell-narrow: 42rem;
  --sidebar-w: 15rem;
  --list-w: 23rem;
  --topbar-h: 3.25rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
  }
}