:root {
  color-scheme: light;

  --brand-charcoal: #171715;
  --brand-paper: #f2eee6;
  --brand-wine: #782f3a;
  --brand-gray: #92918b;
  --brand-white: #ffffff;

  --color-bg: var(--brand-paper);
  --color-surface: var(--brand-white);
  --color-surface-subtle: #e8e3da;
  --color-text: var(--brand-charcoal);
  --color-text-muted: #625f59;
  --color-text-inverse: var(--brand-white);
  --color-accent: var(--brand-wine);
  --color-accent-hover: #5e202a;
  --color-accent-strong: var(--brand-wine);
  --color-border: #c8c2b8;
  --color-border-strong: #8d887f;
  --color-focus: var(--brand-wine);
  --color-overlay: rgb(23 23 21 / 72%);
  --color-disabled-bg: #ded9d0;
  --color-disabled-text: #5d5a55;
  --color-success-bg: #e2efe6;
  --color-success-text: #174c31;
  --color-error-bg: #f5dfe1;
  --color-error-text: #711c27;
  --color-warning-bg: #f3e8c9;
  --color-warning-text: #624600;
  --color-info-bg: #ddecf1;
  --color-info-text: #174d60;

  --button-primary-bg: var(--color-accent);
  --button-primary-text: var(--brand-white);
  --button-primary-border: var(--button-primary-bg);
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-text);
  --button-secondary-border: var(--color-border-strong);
  --input-bg: var(--color-surface);
  --input-text: var(--color-text);
  --input-border: var(--color-border-strong);
  --input-error: var(--color-error-text);

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-editorial: "Fraunces", Georgia, "Times New Roman", serif;

  --text-display: clamp(3rem, 9.5vw, 5.5rem);
  --text-h1: clamp(2.5rem, 7vw, 4.25rem);
  --text-h2: clamp(2rem, 5vw, 3rem);
  --text-h3: clamp(1.5rem, 3vw, 2rem);
  --text-title-ui: clamp(1.25rem, 2vw, 1.5rem);
  --text-body-lg: clamp(1.125rem, 1.7vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;
  --text-rank: clamp(4rem, 9vw, 7rem);

  --space-0: 0;
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-11: 8rem;

  --size-control-sm: 2.5rem;
  --size-control: 3rem;
  --size-target-min: 2.75rem;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --border-hairline: 1px;
  --border-emphasis: 2px;
  --shadow-float: 0 16px 48px rgb(23 23 21 / 18%);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-cinematic: 420ms;
  --duration-title: 340ms;
  --duration-wipe-in: 240ms;
  --duration-wipe-out: 300ms;
  --duration-settle: 640ms;
  --duration-roll-out: 120ms;
  --duration-roll-in: 180ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --motion-distance-sm: .5rem;
  --motion-distance-md: 1.25rem;
  --motion-title-offset: 102%;
  --motion-roll-offset: 70%;
  --motion-settle-scale: 1.045;

  --content-max: 82.5rem;
  --page-margin: 1rem;
  --grid-columns: 4;
  --grid-gap: 0.75rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #171715;
  --color-surface: #232320;
  --color-surface-subtle: #30302c;
  --color-text: #f2eee6;
  --color-text-muted: #b5b0a8;
  --color-text-inverse: #171715;
  --color-accent: #d67b8b;
  --color-accent-hover: #e494a2;
  --color-accent-strong: #782f3a;
  --color-border: #4d4b46;
  --color-border-strong: #827f78;
  --color-focus: #d67b8b;
  --color-overlay: rgb(0 0 0 / 82%);
  --color-disabled-bg: #393833;
  --color-disabled-text: #c5c0b7;
  --color-success-bg: #203a2b;
  --color-success-text: #b9e2c6;
  --color-error-bg: #46272b;
  --color-error-text: #ffc2c8;
  --color-warning-bg: #443a22;
  --color-warning-text: #f5dda0;
  --color-info-bg: #25383d;
  --color-info-text: #b9e3ee;
  --button-primary-bg: #d67b8b;
  --button-primary-text: #171715;
  --button-primary-border: #d67b8b;
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-text);
  --button-secondary-border: var(--color-border-strong);
  --input-bg: var(--color-surface);
  --input-text: var(--color-text);
  --input-border: var(--color-border-strong);
  --input-error: var(--color-error-text);
  --shadow-float: 0 16px 48px rgb(0 0 0 / 38%);
}

@media (min-width: 30rem) {
  :root {
    --page-margin: 1.5rem;
    --grid-gap: 1rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --page-margin: 2rem;
    --grid-columns: 8;
    --grid-gap: 1.25rem;
  }
}

@media (min-width: 64.0625rem) {
  :root {
    --page-margin: clamp(2.5rem, 5vw, 4.5rem);
    --grid-columns: 12;
    --grid-gap: 1.5rem;
  }
}