/**
 * Base styles – reset, variables, global typography
 * Load this first; page-specific CSS loads after.
 */

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

* {
  margin: 0;
  padding: 0;
}

/* Root variables – design tokens */
:root {
  --color-text: #1f2937;
  --color-text-muted: #4b5563;
  --color-text-muted-light: #9ca3af;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-focus: rgba(0, 0, 0, 0.3);
  --color-input-bg: #f3f3f5;
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-white: #fff;
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --line-height: 1.5;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 1rem;
  --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.08);
  --focus-ring-primary: 0 0 0 3px rgba(13, 148, 136, 0.3);
}

/* Base typography and body */
html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-white);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}