:root {
  /* Hatchable brand palette — warm amber on cream.
     Runtime overrides come from form_config.theme via app.js, but these
     are the SSR defaults and the fallback when no schema is loaded. */
  --brand: #C95F2C;
  --brand-soft: #F4DAC4;
  --brand-ink: #A24A1F;
  --bg: #F7F2E9;
  --surface: #FFFDF8;
  --text: #1A1410;
  --text-dim: #4A3F36;
  --text-faint: #8B7E70;
  --border: #D9CFBE;
  --border-soft: #EAE2D2;
  --danger: #B5371F;
  --success: #4F6B47;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 3px rgba(26,20,16,.06), 0 1px 2px rgba(26,20,16,.04);
  --shadow-pop: 0 12px 32px rgba(26,20,16,.14);
  --font-display: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ring: rgba(201, 95, 44, .35);
  --transition-step: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-step: 0ms; }
  * { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

html, body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Raleway defaults to old-style numerals; use lining figures so numbers read cleanly. */
  font-feature-settings: 'lnum' 1;
}

input, textarea, select, button {
  font-family: inherit;
  font-feature-settings: inherit;
}

body.bg-style-gradient {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 60%);
  background-attachment: fixed;
}
body.bg-style-solid { background: var(--bg); }
body.bg-style-tint { background: var(--brand-soft); }

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

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

button, [role="button"] { cursor: pointer; }