/* Alpine Punk design system: shared foundations and typography roles. */

:root {
  --color-paper: #e9e3d4;
  --color-ivory: #f3f0e5;
  --color-ink: #25362f;
  --color-pine: #263b37;
  --color-acid: #d4eb81;
  --color-rust: #a84c31;
  --color-muted: #5d665c;
  --color-form: #f3ebda;
  --color-field: #fffaf0;
  --color-notebook: #ded0af;
  --color-boundary: #788077;
  --color-error: #8e3e28;

  --font-body: 'DM Sans', Arial, sans-serif;
  --font-display: 'Barlow Condensed', Impact, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-hand: 'Caveat', cursive;

  --type-hero: clamp(3.5rem, calc(1.5rem + 6vw), 8rem);
  --type-section: clamp(2.75rem, calc(1.5rem + 3vw), 5rem);
  --type-project: clamp(2rem, calc(1.5rem + 1vw), 2.75rem);
  --type-component: 1.75rem;
  --type-intro: 1.125rem;
  --type-body: 1rem;
  --type-support: .875rem;
  --type-control: .8125rem;
  --type-meta: .75rem;
  --type-hand: 1.75rem;
  --type-service-caption: 2rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 80rem;
  --measure-body: 65ch;
  --measure-intro: 48ch;
  --control-hit-min: 2.75rem; 
  --field-height-min: 3rem;
  --textarea-height-min: 9rem;
  --focus-width: 3px;
  --shadow-paper: 0 4px 12px rgb(37 54 47 / .12);
  --duration-ui: 180ms;
}


.type-hero { font:600 var(--type-hero)/1 var(--font-display); letter-spacing:-.015em; }
.type-section { font:600 var(--type-section)/1.05 var(--font-display); letter-spacing:-.015em; }
.type-project { font:700 var(--type-project)/1.1 var(--font-display); letter-spacing:-.01em; }
.type-component { font:600 var(--type-component)/1.15 var(--font-display); letter-spacing:0; }
.type-intro { font:400 var(--type-intro)/1.6666667 var(--font-body); letter-spacing:0; }
.type-body { font:400 var(--type-body)/1.75 var(--font-body); letter-spacing:0; }
.type-support { font:400 var(--type-support)/1.5714286 var(--font-body); letter-spacing:0; }
.type-label { font:500 var(--type-body)/1.5 var(--font-body); letter-spacing:0; }
.type-input { font:400 var(--type-body)/1.5 var(--font-body); letter-spacing:0; }
.type-control { font:500 var(--type-control)/1.5384615 var(--font-mono); letter-spacing:.06em; }
.type-meta { font:500 var(--type-meta)/1.5 var(--font-mono); letter-spacing:.08em; }
.type-hand { font:500 var(--type-hand)/1.2142857 var(--font-hand); letter-spacing:0; }
.type-service-caption { font:600 var(--type-service-caption)/1.125 var(--font-hand); letter-spacing:0; }