:root {
  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Nunito Sans', Arial, sans-serif;
  --font-category: 'Nunito Sans', Arial, sans-serif;
  --font-ui: 'Nunito Sans', Arial, sans-serif;
  --font-mono: 'Nunito Sans', Arial, sans-serif;

  --text-2xs: 0.5rem;
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-tagline: clamp(0.75rem, 1.15vw, 1rem);
  --text-display-sm: clamp(2rem, 3.5vw, 3rem);
  --text-display-lg: clamp(2rem, 5vw, 4rem);

  /* Layout spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-page-inline: 1.75rem;

  /* Semantic colors */
  --color-bg-site: #f5f5f0;
  --color-bg-admin: #f6f6f3;
  --color-modal-bg: #ffffff;
  --color-surface: #fffefa;
  --color-surface-hover: #f0f0ec;
  --color-surface-subtle: #f8f8f5;
  --color-surface-muted: #eeeeee;
  --color-surface-disabled: #f5f5f5;
  --color-surface-translucent: rgba(255, 254, 250, 0.84);
  --color-text: #151514;
  --color-text-muted: #6f6f69;
  --color-text-subtle: #92928d;
  --color-text-inverse: #ffffff;
  --color-border: #deded8;
  --color-border-soft: rgba(17, 17, 17, 0.08);
  --color-primary: #2563eb;
  --color-primary-soft: #e8eeff;
  --color-primary-faint: #f0f4ff;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-media-bg: #111111;
  --color-default-accent: #888888;
  --color-grid-dot: rgba(0, 0, 0, 0.11);
  --color-backdrop: rgba(0, 0, 0, 0.72);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-primary-glow: rgba(37, 99, 235, 0.18);
  --color-focus-ring: rgba(37, 99, 235, 0.22);
  --color-wire: rgba(37, 99, 235, 0.55);
  --color-wire-preview: rgba(37, 99, 235, 0.3);
  --color-crosshair: #adadad;
  --color-scrollbar-thumb: var(--color-text-muted);
  --color-node-border: rgba(0, 0, 0, 0.35);
  --color-node-title: rgba(0, 0, 0, 0.65);
  --color-node-caption: rgba(0, 0, 0, 0.45);
  --color-node-title-inverse: rgba(255, 255, 255, 0.9);
  --color-node-caption-inverse: rgba(255, 255, 255, 0.7);
  --color-node-control: rgba(0, 0, 0, 0.22);
  --color-node-control-text: rgba(255, 255, 255, 0.85);
  --color-image-overlay-start: rgba(0, 0, 0, 0.35);
  --color-image-overlay-end: rgba(0, 0, 0, 0.4);

  /* Shape and motion */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-round: 999px;
  --border-thin: 1px;
  --border-strong: 2px;
  --shadow-menu: 0 4px 12px var(--color-shadow);
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 30px rgba(17, 17, 17, 0.055);
  --shadow-modal: 0 28px 90px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.12);
  --duration-press: 140ms;
  --duration-popover: 180ms;
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-page: 0.82s;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-page: cubic-bezier(0.77, 0, 0.175, 1);
}

body,
button,
input,
select,
textarea {
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100, 'YTLC' 500;
}