:root {
  /* Brand */
  --eq-brand-primary: #12343B;
  --eq-brand-secondary: #2F6670;
  --eq-accent: #D66A2C;
  --eq-accent-strong: #B95322;

  /* Surfaces */
  --eq-canvas: #F6F5F1;
  --eq-surface: #FFFFFF;
  --eq-surface-alt: #EDF2F1;
  --eq-border: #D3DEDC;

  /* Text */
  --eq-text: #172326;
  --eq-text-secondary: #526166;
  --eq-text-inverse: #FFFFFF;

  /* Semantic states */
  --eq-success-fg: #166534;
  --eq-success-bg: #ECFDF3;
  --eq-info-fg: #175CD3;
  --eq-info-bg: #EFF6FF;
  --eq-warning-fg: #92400E;
  --eq-warning-bg: #FFF7E6;
  --eq-danger-fg: #B42318;
  --eq-danger-bg: #FEF3F2;
  --eq-review-fg: #6D28D9;
  --eq-review-bg: #F5F3FF;
  --eq-blocked-fg: #475569;
  --eq-blocked-bg: #F1F5F9;

  /* Focus */
  --eq-focus: #2F6670;
  --eq-focus-offset: #FFFFFF;

  /* Typography */
  --eq-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --eq-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Type scale */
  --eq-text-xs: 0.8125rem;
  --eq-text-sm: 0.875rem;
  --eq-text-md: 1rem;
  --eq-text-lg: 1.125rem;
  --eq-text-xl: 1.5rem;
  --eq-text-2xl: 1.875rem;
  --eq-text-3xl: 2.5rem;
  --eq-text-display: 3rem;

  /* Spacing */
  --eq-space-1: 0.25rem;
  --eq-space-2: 0.5rem;
  --eq-space-3: 0.75rem;
  --eq-space-4: 1rem;
  --eq-space-6: 1.5rem;
  --eq-space-8: 2rem;
  --eq-space-12: 3rem;
  --eq-space-16: 4rem;
  --eq-space-24: 6rem;

  /* Radius */
  --eq-radius-sm: 0.375rem;
  --eq-radius-md: 0.625rem;
  --eq-radius-lg: 0.875rem;
  --eq-radius-pill: 9999px;

  /* Shadows */
  --eq-shadow-sm: 0 1px 2px rgba(23, 35, 38, 0.08);
  --eq-shadow-md: 0 8px 24px rgba(23, 35, 38, 0.10);

  /* Layout */
  --eq-content-readable: 48rem;
  --eq-content-tool: 60rem;
  --eq-content-wide: 75rem;
}

html {
  font-family: var(--eq-font-sans);
  color: var(--eq-text);
  background: var(--eq-canvas);
}

body {
  font-size: var(--eq-text-lg);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--eq-brand-primary);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
}

button, input, select, textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--eq-focus);
  outline-offset: 3px;
}

.eq-button-primary {
  background: var(--eq-brand-primary);
  color: var(--eq-text-inverse);
  border: 1px solid var(--eq-brand-primary);
}

.eq-button-secondary {
  background: var(--eq-surface);
  color: var(--eq-brand-primary);
  border: 1px solid var(--eq-brand-primary);
}

/* Copper is a signal/accent color, not the default text or warning color. */
.eq-accent {
  color: var(--eq-accent-strong);
}

.eq-accent-fill {
  background: var(--eq-accent);
}

.eq-result-value {
  color: var(--eq-brand-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.eq-technical-value,
.eq-formula,
code,
kbd,
samp {
  font-family: var(--eq-font-mono);
}