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

:root {
  /* Design Tokens */
  --color-ink:         #1c1a16;
  --color-ink-soft:    #4a4740;
  --color-ink-muted:   #8a8780;
  --color-ink-faint:   #c8c5be;
  --color-sand:        #f0ece4;
  --color-sand-mid:    #e5e0d6;
  --color-sand-deep:   #cdc8bc;
  --color-white:       #faf8f4;
  --color-thread:      #3d7a68;
  --color-thread-lt:   #6aaa94;
  --color-thread-pale: #ddf0ea;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  8px;

  /* Legacy aliases */
  --bg:          var(--color-white);
  --bg2:         var(--color-sand);
  --bg3:         var(--color-sand-deep);
  --border:      var(--color-sand-mid);
  --txt:         var(--color-ink);
  --txt2:        var(--color-ink-soft);
  --txt3:        var(--color-ink-muted);
  --accent:      var(--color-thread);
  --accent-h:    var(--color-thread-lt);
  --accent-pale: var(--color-thread-pale);
}

html {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-sand);
  color: var(--color-ink);
  height: 100dvh;
  display: flex;
  overflow: hidden;
}