@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,900&family=DM+Sans:wght@400;500&display=swap');

:root {
  --red: #E4002B;
  --cream: #FFF8F0;
  --yellow: #F9C31F;
  --charcoal: #1A1A1A;

  --bg: #FFFFFF;
  --bg2: #f5efe6;
  --text: var(--charcoal);
  --text2: #4a3f38;
  --text3: rgba(26,26,26,0.4);
  --accent: var(--red);
  --accent2: var(--yellow);
  --accent-dot: var(--red);
  --border: rgba(26,26,26,0.1);
  --border2: rgba(26,26,26,0.06);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font: var(--font-body);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --shadow-sm: 0 1px 4px rgba(26,26,26,0.08);
  --shadow-md: 0 4px 14px rgba(26,26,26,0.12);
  --shadow-lg: 0 8px 28px rgba(26,26,26,0.16);

  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease: cubic-bezier(0.16,1,0.3,1);

  --cell0: #ede0d0;
  --cell1: #fde68a;
  --cell2: #F9C31F;
  --cell3: #f05c2a;
  --cell4: #E4002B;
}

[data-theme="dark"] {
  --bg: var(--charcoal);
  --bg2: #2a2118;
  --text: var(--cream);
  --text2: rgba(255,248,240,0.65);
  --text3: rgba(255,248,240,0.3);
  --border: rgba(255,248,240,0.1);
  --border2: rgba(255,248,240,0.06);
  --cell0: #2a2118;
  --cell1: #7a5c1a;
  --cell2: #F9C31F;
  --cell3: #f05c2a;
  --cell4: #E4002B;
}