/*
 * Every color, size and space the site uses. Colors are named for their role,
 * not their hue, so a dark scheme can later wrap each value in light-dark().
 */
@layer tokens {
  :root {
    color-scheme: light;

    --color-text: #212529;
    --color-text-muted: #595c5f;
    --color-bg: #fff;
    --color-surface: #eee;
    --color-surface-subtle: #f8f9fa;
    --color-surface-strong: #e9ecef;
    --color-border: #dee2e6;

    --color-link: #0d6efd;
    --color-link-hover: #0a58ca;
    --color-nav-link: #737373;
    --color-nav-link-current: #1a1a1a;

    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-on-primary: #fff;
    --color-focus-border: #86b7fe;
    --color-focus-ring: rgb(13 110 253 / 25%);

    --color-warning: #fa9a00;

    /* Solid rather than translucent, so a sticky cell hides what scrolls under it. */
    --color-row-stripe: #fafafa;
    --color-row-hover: #f2f2f2;
    --color-row-target: #feebcc;

    --color-info-text: #055160;
    --color-info-bg: #cff4fc;
    --color-info-border: #9eeaf9;
    --color-success-text: #0a3622;
    --color-success-bg: #d1e7dd;
    --color-success-border: #a3cfbb;
    --color-danger-text: #58151c;
    --color-danger-bg: #f8d7da;
    --color-danger-border: #f1aeb5;
    --color-warning-text: #643e00;
    --color-warning-bg: #feebcc;
    --color-warning-border: #fdd799;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.875rem;
    --font-size-md: 1.09375rem;
    --font-size-h4: 1.3125rem;
    --font-size-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.53125rem);
    --font-size-h2: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
    --line-height: 1.5;
    --line-height-tight: 1.2;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --radius-sm: 0.25rem;
    --radius: 0.375rem;

    --border-width: 1px;
    --border: var(--border-width) solid var(--color-border);

    --content-width: 1140px;
    --gutter: var(--space-3);
  }
}