/* 2026vote — load first: tokens.css → base.css → utilities.css.
 * Fluid endpoints assume the browser's default root size is 16px.
 * Keep root font-size at 100% so user font preferences remain respected.
 * Fluid sizes interpolate continuously; fixed spacing follows a 0.25rem grid.
 */
:root {
  --content-max: 1280px;
  --page-gutter: 0.5rem;
  /* Use on a full-width wrapper; percentages resolve against its parent. */
  --page-padding: max(
    var(--page-gutter),
    calc((100% - var(--content-max)) / 2)
  );

  /* CSS color variables */
  --neutral: #fafafa;
  --mist: #f2f2f2;
  --espresso: #3d372b;
  --apricot: #f2ceae;
  --taupe: #645b54;
  --mocha: #8c6955;
  --chustnut: #7e5946;
  --peach: #fde7da;

  --color-background: var(--mist);
  --color-surface: var(--mist);
  --color-text: var(--espresso);
  --color-muted: var(--taupe);
  --color-accent: var(--mocha);
  --color-focus: var(--espresso);

  --spacing: 0.25rem;
  --spacing-0: 0;
  --spacing-1: calc(var(--spacing) * 1);
  --spacing-2: calc(var(--spacing) * 2);
  --spacing-3: calc(var(--spacing) * 3);
  --spacing-4: calc(var(--spacing) * 4);
  --spacing-5: calc(var(--spacing) * 5);
  --spacing-6: calc(var(--spacing) * 6);
  --spacing-7: calc(var(--spacing) * 7);
  --spacing-8: calc(var(--spacing) * 8);
  --spacing-9: calc(var(--spacing) * 9);
  --spacing-10: calc(var(--spacing) * 10);
  --spacing-11: calc(var(--spacing) * 11);
  --spacing-12: calc(var(--spacing) * 12);
  --spacing-14: calc(var(--spacing) * 14);
  --spacing-16: calc(var(--spacing) * 16);
  --spacing-20: calc(var(--spacing) * 20);
  --spacing-24: calc(var(--spacing) * 24);
  --spacing-28: calc(var(--spacing) * 28);
  --spacing-32: calc(var(--spacing) * 32);
  --spacing-36: calc(var(--spacing) * 36);
  --spacing-40: calc(var(--spacing) * 40);
  --spacing-44: calc(var(--spacing) * 44);
  --spacing-48: calc(var(--spacing) * 48);
  --spacing-52: calc(var(--spacing) * 52);
  --spacing-56: calc(var(--spacing) * 56);
  --spacing-60: calc(var(--spacing) * 60);
  --spacing-64: calc(var(--spacing) * 64);
  --spacing-72: calc(var(--spacing) * 72);
  --spacing-80: calc(var(--spacing) * 80);
  --spacing-96: calc(var(--spacing) * 96);
  --space-fluid-sm: clamp(0.5rem, calc(0.292818rem + 0.883978vw), 1rem);
  --space-fluid-md: clamp(1rem, calc(0.792818rem + 0.883978vw), 1.5rem);
  --space-fluid-lg: clamp(1.5rem, calc(0.878453rem + 2.651934vw), 3rem);
  --space-fluid-xl: clamp(2rem, calc(1.171271rem + 3.535912vw), 4rem);
  --space-section: clamp(3rem, calc(1.756906rem + 5.303867vw), 6rem);
  --text-sm: clamp(0.875rem, calc(0.823204rem + 0.220994vw), 1rem);
  --text-base: clamp(1rem, calc(0.948204rem + 0.220994vw), 1.125rem);
  --text-lg: clamp(1.125rem, calc(0.969613rem + 0.662983vw), 1.5rem);
  --text-xl: clamp(1.5rem, calc(1.292818rem + 0.883978vw), 2rem);
  --text-2xl: clamp(1.75rem, calc(1.232044rem + 2.209945vw), 3rem);
  --text-3xl: clamp(2.25rem, calc(1.524862rem + 3.093923vw), 4rem);

  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Microsoft JhengHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}