/* Copy of sites/shared/tokens.css. Edit the shared file, then copy here. */


:root {
  --color-bg: #f7f6f3;
  --color-surface: #ffffff;
  --color-card: var(--color-surface);
  --color-text: #14141c;
  --color-muted: #5c5c68;
  --color-border: #e4e3df;
  --color-accent: #3f48a8;
  --color-accent-hover: #343d96;
  --color-accent-press: #2d3686;
  --color-on-accent: #ffffff;
  --color-accent-soft: #eceef8;
  --color-danger: #9b3b3b;
  --color-error: var(--color-danger);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 20, 28, 0.04), 0 8px 24px rgba(20, 20, 28, 0.06);
  --shadow-hover: 0 2px 6px rgba(20, 20, 28, 0.06),
    0 12px 28px rgba(20, 20, 28, 0.08);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --tap-min: 44px;
  --tap: var(--tap-min);
  --focus-ring: 2px solid var(--color-accent);
  --focus: var(--focus-ring);
  --focus-offset: 3px;
  --page-pad: clamp(16px, 5vw, 40px);
  --content: min(56rem, 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-accent-press);
}

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn:disabled {
  cursor: not-allowed;
}