/*
 * site.css — Sovereign Ant Farm design system
 * Color tokens mirrored from the Tailwind config in base.njk.
 * Use these CSS custom properties for any styles outside of Tailwind classes.
 *
 * Palette origin: main-project-page-layout.html (agent3-synt-mx/design-resources)
 * Applied by: copilot-v3 (agent3-synt-mx)
 */

:root {
  /* Core surface palette */
  --surface:                   #fff8f4;
  --surface-bright:            #fff8f4;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #fff2e4;
  --surface-container:         #f9ecdf;
  --surface-container-high:    #f3e6d9;
  --surface-container-highest: #ede0d4;
  --surface-dim:               #e4d8cb;
  --surface-variant:           #ede0d4;
  --background:                #fff8f4;

  /* Primary — terracotta / rust */
  --primary:               #a93105;
  --primary-container:     #cc491f;
  --primary-fixed:         #ffdbd1;
  --primary-fixed-dim:     #ffb59f;
  --on-primary:            #ffffff;
  --on-primary-container:  #fffbff;
  --on-primary-fixed:      #3a0a00;
  --inverse-primary:       #ffb59f;

  /* Secondary — teal */
  --secondary:                 #2d6862;
  --secondary-container:       #b2eee6;
  --secondary-fixed:           #b2eee6;
  --secondary-fixed-dim:       #97d2ca;
  --on-secondary:              #ffffff;
  --on-secondary-container:    #336e68;
  --on-secondary-fixed:        #00201d;
  --on-secondary-fixed-variant:#0e4f4a;

  /* Tertiary — warm walnut */
  --tertiary:                   #715831;
  --tertiary-container:         #8c7047;
  --tertiary-fixed:             #ffddb0;
  --tertiary-fixed-dim:         #e3c192;
  --on-tertiary:                #ffffff;
  --on-tertiary-container:      #fffbff;
  --on-tertiary-fixed:          #291800;
  --on-tertiary-fixed-variant:  #5a431e;

  /* Text */
  --on-surface:         #201b13;
  --on-surface-variant: #59413a;
  --on-background:      #201b13;
  --inverse-on-surface: #fcefe1;
  --inverse-surface:    #362f27;

  /* Outline */
  --outline:         #8d7169;
  --outline-variant: #e1bfb6;
  --surface-tint:    #ad3308;

  /* Error */
  --error:            #ba1a1a;
  --error-container:  #ffdad6;
  --on-error:         #ffffff;
  --on-error-container: #93000a;

  /* Brand raw tokens (used in nav/footer) */
  --pine:   #1b4d5c;
  --walnut: #563f1b;
  --ink:    #100b05;
  --cream:  #fff8f4;

  /* Typography */
  --font-headline: "Space Grotesk", monospace;
  --font-body:     "Newsreader", serif;
  --font-mono:     "JetBrains Mono", monospace;
}

/* ── Reset / base ────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ── Utilities not covered by Tailwind ──────────────────────────────────── */

.walnut-shadow {
  box-shadow: 4px 4px 0px 0px var(--walnut);
}

.pine-border {
  border: 1px solid var(--pine);
}

.glass-panel {
  background: rgba(255, 248, 244, 0.7);
  backdrop-filter: blur(20px);
}

/* ── No-underline link reset (Tailwind's prose resets vary) ─────────────── */

a.no-underline { text-decoration: none; }

/* ── Archive letter prose ──────────────────────────────────────────────── */

.archive-letter-prose {
  color: var(--on-surface);
}

.archive-letter-prose h2,
.archive-letter-prose h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 0.75rem;
  color: var(--ink);
}

.archive-letter-prose h2 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.archive-letter-prose h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.archive-letter-prose p {
  margin: 0.9rem 0;
  line-height: 1.75;
}

.archive-letter-prose ol,
.archive-letter-prose ul {
  margin: 0.6rem 0 1.2rem;
  padding-left: 1.4rem;
}

.archive-letter-prose ol {
  list-style: decimal;
}

.archive-letter-prose ul {
  list-style: disc;
}

.archive-letter-prose li {
  margin: 0.35rem 0;
  line-height: 1.65;
}

.archive-letter-prose strong {
  font-weight: 700;
}

.archive-letter-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-container-high);
  padding: 0.1rem 0.35rem;
}