/* TinyPlate — Design Tokens */
:root {
  /* Palette — warm cream + terracotta + sage + deep forest */
  --tp-cream: #FFF8EE;
  --tp-cream-2: #FAF1E0;
  --tp-cream-3: #F4E8D2;
  --tp-ink: #2E3B2E;           /* deep forest */
  --tp-ink-2: #4A5848;
  --tp-ink-3: #6B7A68;
  --tp-muted: #9AA597;

  --tp-terracotta: #E8A87C;
  --tp-terracotta-2: #D4886A;  /* darker tone for text/accents */
  --tp-terracotta-3: #FAD7BE;  /* tint for bg */

  --tp-sage: #6B8E5A;
  --tp-sage-2: #54744A;
  --tp-sage-3: #C8D7BC;

  --tp-butter: #E8C87C;
  --tp-butter-3: #F5E4B8;

  --tp-berry: #B85C5C;
  --tp-berry-3: #ECC4C4;

  --tp-sky: #7FA6B8;
  --tp-sky-3: #CBDCE4;

  /* Semantic safety colors — medium-emphasis, not alarming */
  --tp-safe-bg: #E8F0DF;
  --tp-safe-fg: #3A5A2A;
  --tp-modify-bg: #FBEBD3;
  --tp-modify-fg: #8B5A20;
  --tp-avoid-bg: #F0D5D5;
  --tp-avoid-fg: #8B3A3A;

  /* Borders & surfaces */
  --tp-border: #E8DDC8;
  --tp-border-strong: #D4C5A8;
  --tp-surface: #FFFCF5;
  --tp-surface-2: #F7EFDD;

  /* Radius — rounded, kitchen-soft but not infant-cute */
  --tp-r-sm: 10px;
  --tp-r-md: 16px;
  --tp-r-lg: 22px;
  --tp-r-xl: 32px;
  --tp-r-full: 999px;

  /* Shadow */
  --tp-shadow-sm: 0 1px 2px rgba(46,59,46,0.06), 0 0 0 0.5px rgba(46,59,46,0.04);
  --tp-shadow-md: 0 4px 12px rgba(46,59,46,0.08), 0 0 0 0.5px rgba(46,59,46,0.04);
  --tp-shadow-lg: 0 12px 32px rgba(46,59,46,0.12), 0 0 0 0.5px rgba(46,59,46,0.04);

  /* Type */
  --tp-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --tp-font-body: 'DM Sans', -apple-system, system-ui, sans-serif;
  --tp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* Dark mode — warm, not cold. Text tokens brightened for AA contrast. */
.tp-dark {
  --tp-cream: #161812;
  --tp-cream-2: #1F221B;
  --tp-cream-3: #2A2E26;
  --tp-ink: #FBF3DE;           /* brightened */
  --tp-ink-2: #E4D7B8;         /* brightened */
  --tp-ink-3: #B8B6A0;         /* brightened (was too dim) */
  --tp-muted: #8A8D7E;
  --tp-border: #3A3E34;
  --tp-border-strong: #555B4D;
  --tp-surface: #22251D;
  --tp-surface-2: #2A2E26;

  /* Safety — light fg on dark-tinted bg, high contrast */
  --tp-safe-bg: #2C3D22;
  --tp-safe-fg: #DCE8CE;
  --tp-modify-bg: #3E311C;
  --tp-modify-fg: #F7E4B8;
  --tp-avoid-bg: #3E2424;
  --tp-avoid-fg: #F2CECE;

  /* Accent tints — darker for dark mode so text overlay reads */
  --tp-terracotta-3: #5A3A2A;
  --tp-sage-3: #2E4424;
  --tp-butter-3: #4A3A1C;
  --tp-sky-3: #2A3F4A;
  --tp-berry-3: #4A2626;
}

/* Placeholder stripes re-tinted for dark mode — keep text legible */
.tp-dark .tp-placeholder {
  background-image: repeating-linear-gradient(135deg, #2A2E26 0 8px, #32362D 8px 16px);
  color: #C8C6B0;
}
.tp-dark .tp-placeholder.tone-sage {
  background-image: repeating-linear-gradient(135deg, #2E4424 0 8px, #3A5030 8px 16px);
  color: #C8D7BC;
}
.tp-dark .tp-placeholder.tone-terracotta {
  background-image: repeating-linear-gradient(135deg, #5A3A2A 0 8px, #6A4632 8px 16px);
  color: #F4C7A8;
}
.tp-dark .tp-placeholder.tone-butter {
  background-image: repeating-linear-gradient(135deg, #4A3A1C 0 8px, #574628 8px 16px);
  color: #F0D79A;
}

/* Global reset-ish */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--tp-font-body);
  color: var(--tp-ink);
  background: var(--tp-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Striped placeholder — for "drop real photo here" imagery */
.tp-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    var(--tp-cream-3) 0 8px,
    var(--tp-cream-2) 8px 16px
  );
  color: var(--tp-ink-3);
  font-family: var(--tp-font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  border-radius: var(--tp-r-md);
  text-transform: uppercase;
}
.tp-placeholder.tone-sage {
  background-image: repeating-linear-gradient(135deg, var(--tp-sage-3) 0 8px, #D6E0CC 8px 16px);
  color: var(--tp-sage-2);
}
.tp-placeholder.tone-terracotta {
  background-image: repeating-linear-gradient(135deg, var(--tp-terracotta-3) 0 8px, #F5C7A8 8px 16px);
  color: var(--tp-terracotta-2);
}
.tp-placeholder.tone-butter {
  background-image: repeating-linear-gradient(135deg, var(--tp-butter-3) 0 8px, #EED69E 8px 16px);
  color: #8B6A20;
}

/* Type scale */
.tp-display-xl { font-family: var(--tp-font-display); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 144; }
.tp-display-lg { font-family: var(--tp-font-display); font-weight: 500; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 50, 'opsz' 144; }
.tp-display-md { font-family: var(--tp-font-display); font-weight: 500; font-size: 32px; line-height: 1.1;  letter-spacing: -0.015em; font-variation-settings: 'SOFT' 50, 'opsz' 144; }
.tp-display-sm { font-family: var(--tp-font-display); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 50, 'opsz' 72; }
.tp-title { font-family: var(--tp-font-body); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.tp-body { font-family: var(--tp-font-body); font-weight: 400; font-size: 15px; line-height: 1.45; }
.tp-caption { font-family: var(--tp-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: var(--tp-ink-3); }
.tp-mono { font-family: var(--tp-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-ink-3); }