:root {

  --bg:        #f7faff;
  --surface:   #ffffff;
  --surface-2: #eceef2;

  --ink:          #191919;
  --ink-2:        #3a3d43;

  --ink-3:        #5b5f67;
  --ink-disabled: #61656d;

  --border:        #dcdee2;
  --border-strong: #c3c7cd;

  --accent:        #cc2a2a;
  --accent-strong: #a61f1f;
  --accent-soft:   rgba(204, 42, 42, 0.10);

  --hover:  rgba(25, 25, 25, 0.04);
  --active: rgba(25, 25, 25, 0.07);
  --focus:  rgba(204, 42, 42, 0.45);

  --danger:       #8f2447;
  --danger-soft:  rgba(143, 36, 71, 0.10);
  --warning:      #87621a;
  --warning-soft: rgba(135, 98, 26, 0.10);

  --shadow: 0 4px 12px rgba(25, 25, 25, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero:  #191919;
  --ink-hero:      #f7faff;
  --surface-inset: #ffffff;
  --ink-inset:     #191919;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs:     14px;
  --fs-md:  15px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  --lh-tight: 1.25;
  --lh:       1.45;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --r-none: 0;
  --r-sm:   4px;
  --r:      6px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-full: 999px;

  --ink-on-strong: #ffffff;

  --t-fast: 120ms ease;
  --t:      180ms ease;
  --t-mid:  240ms ease;
  --t-slow: 400ms ease;

  --control-h:    32px;
  --control-h-sm: 24px;

  --nav-h:       56px;
  --rail-w:      240px;

  --rail-w-min:  calc(var(--sp-4) * 3 + 1px);
  --content-max: 2560px;
}

:root[data-radius="classic"] {
  --r-none: 0;
  --r-sm:   0;
  --r:      0;
  --r-lg:   0;
  --r-xl:   0;
}

:root[data-radius="modern"] {
  --r-none: 0;
  --r-sm:   4px;
  --r:      6px;
  --r-lg:   12px;
  --r-xl:   18px;
}

:root[data-radius="deadly-darling"] {
  --r-none: 0;
  --r-sm:   3px;
  --r:      4px;
  --r-lg:   6px;
  --r-xl:   8px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t:      0ms;
    --t-mid:  0ms;
    --t-slow: 0ms;
  }
}