/* ==========================================================================
   Pockets of Sunshine — Design System Tokens
   colors_and_type.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color — raw palette ---------- */
  --pos-sunflower: #F5B700;
  --pos-sunflower-deep: #D89E00;
  --pos-amber: #E07A1F;
  --pos-amber-deep: #B85F10;
  --pos-terracotta: #B8432A;
  --pos-terracotta-deep: #8F3520;
  --pos-meadow: #6B8E3D;
  --pos-cream: #FBF3E1;
  --pos-cream-deep: #F4E7C8;
  --pos-dust: #E8D9B8;
  --pos-ink: #2A1F17;
  --pos-ink-soft: rgba(42, 31, 23, 0.72);
  --pos-ink-muted: rgba(42, 31, 23, 0.55);
  --pos-ink-quiet: rgba(42, 31, 23, 0.35);
  --pos-ink-hair: rgba(42, 31, 23, 0.12);

  /* ---------- Semantic surface tokens ---------- */
  --bg: var(--pos-cream);
  --bg-raised: #FFFDF5;
  --bg-sunk: var(--pos-cream-deep);
  --bg-accent: var(--pos-sunflower);
  --bg-accent-deep: var(--pos-terracotta);

  --fg: var(--pos-ink);
  --fg-on-accent: var(--pos-ink);          /* Ink on Sunflower is legible & warm */
  --fg-on-deep: var(--pos-cream);          /* Cream on Terracotta/Amber */
  --fg-secondary: var(--pos-ink-soft);
  --fg-tertiary: var(--pos-ink-muted);

  --border: var(--pos-ink);
  --border-hair: var(--pos-ink-hair);
  --border-quiet: var(--pos-ink-quiet);

  --focus-ring: var(--pos-amber);

  /* ---------- Typography — families ---------- */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Typography — scale ---------- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 18px;
  --text-md: 20px;
  --text-lg: 24px;
  --text-xl: 32px;
  --text-2xl: 44px;
  --text-3xl: 60px;
  --text-4xl: 80px;
  --text-5xl: 112px;

  /* ---------- Line height ---------- */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.5;
  --lh-loose: 1.7;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* ---------- Borders ---------- */
  --stroke: 2px;
  --stroke-bold: 3px;

  /* ---------- Shadows (warm-tinted) ---------- */
  --shadow-sm: 0 2px 6px -2px rgba(42, 31, 23, 0.12);
  --shadow-md: 0 8px 24px -8px rgba(42, 31, 23, 0.18);
  --shadow-lg: 0 20px 48px -16px rgba(42, 31, 23, 0.22);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 400ms;
}

/* ==========================================================================
   Base typography — semantic
   ========================================================================== */

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(48px, 7vw, var(--text-4xl)); }
h2 { font-size: clamp(36px, 5vw, var(--text-3xl)); }
h3 { font-size: clamp(28px, 3.5vw, var(--text-2xl)); }

h4, h5 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
}
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  text-wrap: pretty;
  max-width: 62ch;
}

.eyebrow,
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-secondary);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ==========================================================================
   Component primitives
   ========================================================================== */

.pos-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  color: var(--fg);
  background: var(--pos-sunflower);
  border: var(--stroke) solid var(--pos-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pos-btn:hover { background: var(--pos-sunflower-deep); box-shadow: var(--shadow-md); }
.pos-btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.pos-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.pos-btn--secondary { background: var(--pos-cream); }
.pos-btn--secondary:hover { background: var(--pos-dust); }
.pos-btn--terra { background: var(--pos-terracotta); color: var(--fg-on-deep); }
.pos-btn--terra:hover { background: var(--pos-terracotta-deep); }
.pos-btn--ghost { background: transparent; border-color: var(--border-quiet); }

.pos-card {
  background: var(--bg-raised);
  border: var(--stroke) solid var(--pos-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.pos-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--pos-dust);
  border: var(--stroke) solid var(--pos-ink);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Seed-scatter dot texture
   ========================================================================== */

.pos-dots {
  background-image: radial-gradient(circle, rgba(42, 31, 23, 0.18) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
}