/* Atrium design tokens — the single source of truth for PeopleCheck's look.
   The feel: the calm and warmth of a good hotel, not a cold HR portal.
   Brass is reserved exclusively for the signing moment, the sealed state,
   and the current step. */

:root {
  /* Surfaces */
  --paper: #FAF7F1;        /* warm linen — app background */
  --surface: #FFFFFF;      /* cards / panels */
  --surface-warm: #FCFAF5; /* secondary panels */

  /* Anchor — deep pine = growth / development */
  --pine: #1E3A30;
  --pine-soft: #2C4F42;

  /* Ink */
  --ink: #23201C;
  --muted: #6B655C;
  --faint: #9A9388;

  /* Brass accent — ONLY for the signing moment, sealed state, current step */
  --brass: #B07F32;
  --brass-soft: #C9A05A;
  --brass-glow: rgba(176, 127, 50, 0.18);

  /* Soft greens & hairlines */
  --sage: #E7EDE5;         /* labels / tags */
  --line: #E7E0D3;         /* warm hairlines */
  --line-strong: #D8CFBE;

  /* Status semantics (calm, not loud) */
  --status-planned: #6B655C;
  --status-filled: #2C4F42;
  --status-signed: #B07F32;
  --status-registered: #1E3A30;

  /* Typography families */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (fluid) */
  --text-mono: 0.72rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-display: clamp(2rem, 1.4rem + 2.6vw, 3rem);

  /* Spacing rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-section: clamp(2rem, 1.5rem + 3vw, 4rem);

  /* Geometry */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 8px 30px rgba(35, 32, 28, 0.06);
  --shadow-raised: 0 14px 40px rgba(35, 32, 28, 0.10);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Reading measure */
  --measure: 760px;
}