:root {
  /* ─── Brand · Atelier palette (warm paper · mineral teal accent) ──── */
  --color-bone:       #FAFAF8;   /* warm paper */
  --color-bone-deep:  #EDECE7;   /* slightly toasted paper */
  --color-cream:      #FDFCFA;   /* clean paper for surfaces */
  --color-cream-soft: #F6F5F1;
  --color-ink:        #1A1815;   /* warm near-black */
  --color-ink-soft:   #3A352E;
  --color-graphite:   #6B655B;   /* mid */
  --color-stone:      #A39C90;   /* muted */
  --color-mist:       #C9C2B5;   /* hairlines */
  --color-fog:        #E2DBCB;   /* fills */

  /* Single calm accent — mineral teal */
  --color-accent:        #2E6F70;
  --color-accent-deep:   #1E5253;
  --color-accent-soft:   #5C9596;
  --color-accent-tint:   #DCE9E9;

  /* Secondary — sage for "done" (kept distinct from accent) */
  --color-sage:        #5C7457;
  --color-sage-deep:   #455B41;
  --color-sage-tint:   #DCE3D6;

  /* Status */
  --color-error:       #B53A2B;
  --color-warning:     #C58A2C;

  /* Filters for SVG recoloring */
  --filter-ink:     invert(8%) sepia(7%) saturate(900%) hue-rotate(355deg) brightness(95%) contrast(88%);
  --filter-cream:   invert(98%) sepia(7%) saturate(167%) hue-rotate(7deg) brightness(101%) contrast(96%);
  --filter-stone:   invert(64%) sepia(8%) saturate(265%) hue-rotate(11deg) brightness(95%) contrast(86%);
  --filter-accent:  invert(38%) sepia(22%) saturate(797%) hue-rotate(135deg) brightness(92%) contrast(86%);
  --filter-sage:    invert(46%) sepia(13%) saturate(636%) hue-rotate(57deg) brightness(91%) contrast(82%);
  --filter-white:   brightness(0) invert(1);

  /* Legacy mapping — keep existing variable names alive */
  --color-white:       #FFFFFF;
  --color-primary:        var(--color-accent);
  --color-primary-dark:   var(--color-accent-deep);
  --color-primary-light:  var(--color-accent-soft);
  --color-secondary:        var(--color-bone-deep);
  --color-secondary-dark:   var(--color-fog);
  --color-secondary-light:  var(--color-cream);
  --color-success:        var(--color-sage);
  --color-success-dark:   var(--color-sage-deep);
  --color-success-light:  var(--color-sage);
  --color-error-dark:     #8E2D22;
  --color-error-light:    #D5604F;

  --color-gray-50:  #F4EFE7;
  --color-gray-100: #E2DBCB;
  --color-gray-200: #C9C2B5;
  --color-gray-300: #A39C90;
  --color-gray-400: #8A8478;
  --color-gray-500: #6B655B;
  --color-gray-600: #4E4942;
  --color-gray-700: #3A352E;
  --color-gray-800: #261F1B;
  --color-gray-900: #1A1815;

  --filter-success-light: var(--filter-sage);
  --filter-gray-400: var(--filter-stone);

  --color-text:        var(--color-ink);
  --color-text-muted:  var(--color-graphite);

  /* ─── Typography ──────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --font-family-sans: var(--font-sans);

  --display-axes: "opsz" 144, "SOFT" 100, "WONK" 1;
  --display-axes-tight: "opsz" 48, "SOFT" 50, "WONK" 0;

  /* Sizes */
  --font-size-xxs:  0.625rem;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md:   1rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.625rem;
  --font-size-xxl:  2.25rem;
  --font-size-3xl:  3rem;
  --font-size-4xl:  4.5rem;
  --font-size-5xl:  6rem;

  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* ─── Space & rhythm ──────────────────────────────────────────────── */
  --spacing-xxs: 0.25rem;
  --spacing-xs:  0.5rem;
  --spacing-sm:  0.75rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-xxl: 3rem;
  --spacing-3xl: 4.5rem;
  --spacing-4xl: 7rem;

  --border-radius-sm:   3px;
  --border-radius-base: 6px;
  --border-radius-lg:   12px;
  --border-radius-xl:   20px;
  --border-radius-pill: 9999px;

  --border-base:    1px solid var(--color-fog);
  --border-light:   1px solid var(--color-bone-deep);
  --border-strong:  1px solid var(--color-mist);
  --border-ink:     1px solid var(--color-ink);

  --box-shadow-thin: 0 1px 2px rgba(38, 31, 27, 0.04);
  --box-shadow-base: 0 1px 2px rgba(38, 31, 27, 0.04), 0 4px 16px -8px rgba(38, 31, 27, 0.06);
  --box-shadow-lift: 0 2px 4px rgba(38, 31, 27, 0.06), 0 12px 32px -12px rgba(38, 31, 27, 0.12);
  --box-shadow-card: 0 1px 0 var(--color-bone-deep), 0 8px 24px -16px rgba(38, 31, 27, 0.18);
  --box-shadow-focus: 0 0 0 3px rgba(46, 111, 112, 0.18);

  /* Paper grain */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.45'/></svg>");

  --transition-base: 200ms cubic-bezier(0.32, 0.72, 0.18, 1);
  --transition-quick: 120ms cubic-bezier(0.32, 0.72, 0.18, 1);
}