/* Shared design tokens and base reset for every GOAT surface: the public
   SSR pages link it first, the SPA bundles it through styles.scss. See
   /DESIGN.md for the semantic meaning of each token. */

:root {
  color-scheme: light;

  --background: #ffffff;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-subtle: #effaf3;
  --border: #dce5df;
  --border-strong: #aebbad;

  --text: #172b24;
  --text-muted: #58645c;
  --text-subtle: #6c786e;

  --primary: #073d2c;
  --primary-hover: #12533e;
  --primary-active: #0d432f;
  --primary-strong: var(--primary-active);
  --focus: #247a5a;
  --success: #166b4a;
  --warning: #996b11;
  --danger: #aa3f34;
  --danger-strong: #8b332a;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-raised: 0 12px 28px rgba(22, 39, 29, 0.12);
  --control-height: 2.5rem;

  --layout-max: 70rem;
  --layout-gutter: clamp(var(--space-4), 3.5vw, var(--space-6));
  --layout-prose: 62ch;
  --layout-hero-space: clamp(var(--space-6), 5vw, var(--space-8));
  --layout-section-space: clamp(var(--space-7), 7vw, var(--space-8));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--background);
}

/* Project typography shared by SSR and the Angular workspace. */
body { font-family: Arial, Helvetica, sans-serif; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }