/* Elorigo semantic tokens. Source of truth: ../DESIGN.md, version 0.2.0. */
@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-variable.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #F7F8F3;
  --light: #FDFEF9;
  --mist: #EAF0E7;
  --petrol: #163B32;
  --muted-ink: #52665D;
  --deep-green: #214E3D;
  --shoot: #CBEF89;
  --line: #D5DED2;
  --control-line: #7C8D80;
  --focus: #356D52;
  --hypothesis: #785B1D;
  --hypothesis-bg: #F9F1DD;
  --error: #9E382E;
  --error-bg: #FCF0EB;

  --color-background: var(--paper);
  --color-surface: var(--light);
  --color-surface-secondary: var(--mist);
  --color-foreground: var(--petrol);
  --color-muted: var(--muted-ink);
  --color-primary: var(--deep-green);
  --color-on-primary: var(--paper);
  --color-accent: var(--shoot);
  --color-on-accent: var(--petrol);
  --color-border: var(--line);
  --color-control-border: var(--control-line);
  --color-focus: var(--focus);
  --color-hypothesis: var(--hypothesis);
  --color-hypothesis-background: var(--hypothesis-bg);
  --color-error: var(--error);
  --color-error-background: var(--error-bg);
  --color-demo-surface: var(--mist);
  --color-inverse-surface: var(--petrol);
  --color-on-inverse: var(--paper);
  --color-inverse-muted: color-mix(in srgb, var(--paper) 76%, var(--petrol));
  --color-inverse-line: color-mix(in srgb, var(--paper) 19%, var(--petrol));

  --font-body: Manrope, sans-serif;
  --font-display: Manrope, sans-serif;
  --text-caption: .75rem;
  --text-small: .875rem;
  --text-body: 1.125rem;
  --text-title: 1.5rem;
  --text-headline: clamp(2rem, 3.1vw, 2.5rem);
  --text-display: clamp(2.75rem, 4.8vw, 4.5rem);
  --leading-body: 1.6;
  --leading-headline: 1.16;
  --leading-display: 1.06;
  --tracking-display: -.04em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --container: 1248px;
  --gutter: var(--space-12);
  --section-space: var(--space-28);

  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-group: 16px;
  --radius-media: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgb(22 59 50 / 5%);
  --shadow-md: 0 1px 2px rgb(22 59 50 / 4%), 0 12px 32px -16px rgb(22 59 50 / 16%);
  --shadow-lg: 0 2px 4px rgb(22 59 50 / 4%), 0 24px 64px -24px rgb(22 59 50 / 15%);
  --duration-feedback: 140ms;
  --duration-enter: 240ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 1023px) {
  :root { --gutter: var(--space-8); }
}
@media (max-width: 599px) {
  :root { --gutter: var(--space-5); --section-space: var(--space-16); }
}