/**
 * Website UX System — design tokens
 * Link in HTML or @import in global CSS. Map these to Tailwind theme.extend once.
 */
:root {
  /* Typography — Google-like: clear hierarchy, comfortable reading */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Surfaces — light mode (default). Dark: see .theme-dark */
  --color-bg: #ffffff;
  --color-bg-subtle: #f8f9fa;
  --color-bg-muted: #f1f3f4;
  --color-surface: #ffffff;
  --color-border: #dadce0;
  --color-border-strong: #bdc1c6;

  /* Text on --color-bg / --color-surface — WCAG AA */
  --color-text: #202124;
  --color-text-secondary: #5f6368;
  --color-text-disabled: #9aa0a6;
  --color-text-on-primary: #ffffff;

  /* Brand & actions */
  --color-primary: #1a73e8;
  --color-primary-hover: #1765cc;
  --color-primary-subtle: #e8f0fe;

  --color-yes: #137333;
  --color-yes-bg: #e6f4ea;
  --color-no: #c5221f;
  --color-no-bg: #fce8e6;
  --color-maybe: #b06000;
  --color-maybe-bg: #fef7e0;
  --color-info: #1967d2;
  --color-info-bg: #e8f0fe;

  --color-selected-bg: #e8f0fe;
  --color-focus-ring: #1a73e8;

  /* Spacing — 8px rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  --content-narrow: 35rem;
  --content-wide: 70rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.1);
  --shadow-md: 0 1px 3px rgba(60, 64, 67, 0.15), 0 4px 8px rgba(60, 64, 67, 0.1);

  --btn-height-sm: 2rem;
  --btn-height-md: 2.5rem;
  --btn-height-lg: 3rem;
  --input-height: 2.5rem;
  --touch-min: 2.75rem;

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

.theme-dark {
  --color-bg: #202124;
  --color-bg-subtle: #292a2d;
  --color-bg-muted: #35363a;
  --color-surface: #292a2d;
  --color-border: #5f6368;
  --color-border-strong: #9aa0a6;
  --color-text: #e8eaed;
  --color-text-secondary: #9aa0a6;
  --color-text-disabled: #80868b;
  --color-primary: #8ab4f8;
  --color-primary-hover: #aecbfa;
  --color-primary-subtle: #394457;
  --color-yes: #81c995;
  --color-yes-bg: #1e3a2f;
  --color-no: #f28b82;
  --color-no-bg: #3c2020;
  --color-maybe: #fdd663;
  --color-maybe-bg: #3c3420;
  --color-info: #8ab4f8;
  --color-info-bg: #394457;
  --color-selected-bg: #394457;
}

/* Base utilities agents should reuse */
.ux-page {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

.ux-container-narrow { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--space-4); }
.ux-container-wide { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-4); }

.ux-h1 { font-size: var(--text-3xl); font-weight: var(--weight-normal); letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
.ux-h2 { font-size: var(--text-xl); font-weight: var(--weight-medium); margin: var(--space-8) 0 var(--space-4); }
.ux-h3 { font-size: var(--text-lg); font-weight: var(--weight-medium); margin: var(--space-5) 0 var(--space-3); }

.section-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Focus visible — always */
:where(button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}