/* Thread & Grounds — Design Tokens */
/* Tailwind handles utilities; these vars are referenced via arbitrary values */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* Color */
  --bg:           #F5F0E8;
  --surface:      #EDE8DC;
  --fg:           #1C1410;
  --muted:        #7A6E62;
  --border:       #D6CFC3;
  --accent:       #3B2A1A;
  --accent-hover: #5C3D28;
  --accent-fg:    #F5F0E8;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Shadow — flat/minimal, one tactile lift */
  --shadow-card: 0 1px 3px rgba(44, 31, 20, 0.07);
}

/* Base */
html {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* Fade-up scroll animation utility */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}