/* 609Painter design tokens — Deep Ocean palette, Boldonse display.
   Alternate palettes/typography kept as opt-in attributes so we can ship
   variants later without refactoring component styles. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Boldonse&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Deep Ocean (default) */
  --navy:    #0A2433;
  --navy-2:  #113348;
  --sand:    #ECE3D0;
  --sand-2:  #D8C9A9;
  --cream:   #F6EFE0;
  --accent:  #E05A3A;
  --accent-2:#F2B84B;
  --ink:     #0A1A23;
  --paper:   #F6EFE0;
  --line:    rgba(10,36,51,0.14);

  --display: 'Fraunces', 'Times New Roman', serif;
  --display-weight: 900;
  --display-track: -0.035em;
  --display-leading: 0.92;
  --text: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-palette="dune"] {
  --navy:    #1E1711;
  --navy-2:  #2C2319;
  --sand:    #E8D7B4;
  --sand-2:  #C9B383;
  --cream:   #F4E8CF;
  --accent:  #C2410C;
  --accent-2:#E8A33C;
  --ink:     #1E1711;
  --paper:   #F4E8CF;
  --line:    rgba(30,23,17,0.16);
}

[data-palette="tide"] {
  --navy:    #052E3B;
  --navy-2:  #0B4252;
  --sand:    #DDEDE8;
  --sand-2:  #A9CDC5;
  --cream:   #EAF4F0;
  --accent:  #FF6B4A;
  --accent-2:#FFC857;
  --ink:     #052E3B;
  --paper:   #EAF4F0;
  --line:    rgba(5,46,59,0.14);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* Utilities */
.display {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-leading);
  text-transform: uppercase;
}
.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.wrap {
  width: min(1360px, 100% - 48px);
  margin-inline: auto;
}