/* ============================================================
   base.css — design tokens, reset, fonts, body defaults
   Bow and Banner Co. — palette refactor (May 2026)
   ============================================================
   This file is the single source of visual truth. Every other
   stylesheet (components / layout / pages / admin) reads from
   the custom properties declared here.

   Old token names (--clay, --sage, --butter, --cream, --paper,
   --rose, --radius-*, --space-*, --font-*…) are preserved as
   aliases so existing PHP views (which use inline
   style="…var(--clay)…" etc.) keep working untouched.
   ============================================================ */

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

:root {
  /* ── BRAND ── ROSE ──────────────────────────────────────── */
  --rose-50:        #FFF0F6;
  --rose-100:       #FCDCEA;
  --rose-300:       #F2A8C4;
  --rose-500:       #D97FA6;   /* primary brand action */
  --rose-600:       #C26890;   /* primary hover */
  --rose-700:       #9D4F73;   /* deep, text on light */

  /* ── BRAND ── TEAL (Deep Pine) ──────────────────────────── */
  --teal-50:        #EDF4F2;
  --teal-100:       #D6EAE6;
  --teal-300:       #87BFB9;
  --teal-500:       #2F8F89;   /* secondary brand */
  --teal-600:       #237772;   /* hover */
  --teal-700:       #1B5A56;   /* deep, on dark surfaces */

  /* ── SURFACES ───────────────────────────────────────────── */
  --bg-canvas:      #FAF6F0;   /* warm cream — body bg */
  --bg-card:        #FFFFFF;   /* white cards */
  --bg-mist:        #EDF4F2;   /* pale teal alt surface */
  --bg-blush:       #FCDCEA;   /* rose tinted surface */

  /* ── INK (teal-tinted neutrals) ─────────────────────────── */
  --ink:            #1F3E3B;   /* primary text */
  --ink-mid:        #4E6B68;   /* secondary text */
  --ink-soft:       #8AA09D;   /* tertiary, captions */
  --ink-on-dark:    #F2EEE8;   /* text on ink-dark backgrounds */

  /* ── BORDER ─────────────────────────────────────────────── */
  --border-soft:    #ECE0DA;   /* default 1px rules */
  --border-strong:  #D7C7BF;   /* form controls, dividers */
  --border-mist:    #D6E1DE;   /* on mist surfaces */

  /* ── FUNCTIONAL ─────────────────────────────────────────── */
  --success:        #5FA67D;
  --success-bg:     #E5F2EA;
  --warn:           #E89B5A;
  --warn-bg:        #FBEBDA;
  --danger:         #C8485A;
  --danger-bg:      #F8E1E4;

  /* ── SHADOWS — warm, teal-tinted ────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(31,62,59,.06);
  --shadow-sm:      0 2px 4px rgba(31,62,59,.06), 0 1px 2px rgba(31,62,59,.04);
  --shadow-md:      0 6px 14px rgba(31,62,59,.08), 0 2px 4px rgba(31,62,59,.04);
  --shadow-lg:      0 14px 32px rgba(31,62,59,.14), 0 4px 8px rgba(31,62,59,.06);
  --shadow-rose:    0 6px 14px rgba(217,127,166,.32);
  --shadow-teal:    0 6px 14px rgba(47,143,137,.25);

  /* ── RADII ──────────────────────────────────────────────── */
  --r-xs:           3px;
  --r-sm:           6px;
  --r-md:           10px;
  --r-lg:           16px;
  --r-xl:           24px;
  --r-pill:         999px;

  /* ── SPACING (4-pt scale) ───────────────────────────────── */
  --s-1:            4px;
  --s-2:            8px;
  --s-3:            12px;
  --s-4:            16px;
  --s-5:            24px;
  --s-6:            32px;
  --s-7:            48px;
  --s-8:            72px;

  /* ── TYPE ───────────────────────────────────────────────── */
  --font-display:   "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:      "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script:    "Caveat", cursive;
  --font-mono:      "DM Mono", ui-monospace, "JetBrains Mono", monospace;

  --tracking-eyebrow: .22em;
  --tracking-tight:   -.02em;
  --tracking-normal:  0;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max:  1180px;
  --container-pad:  24px;

  /* ── MOTION ─────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-mid:  240ms cubic-bezier(.16,1,.3,1);

  /* ──────────────────────────────────────────────────────────
     LEGACY ALIASES — kept so existing PHP inline-styles like
     style="color:var(--clay)" or style="background:var(--cream)"
     resolve to the new palette without view changes.
     ────────────────────────────────────────────────────────── */
  --clay:           var(--rose-500);
  --clay-light:     var(--rose-300);
  --rose:           var(--rose-100);
  --sage:           var(--teal-500);
  --butter:         var(--teal-300);

  --cream:          var(--bg-mist);        /* alt section bg */
  --paper:          var(--bg-canvas);      /* body / primary bg */
  --white:          var(--bg-card);
  --border:         var(--border-soft);

  --shadow-soft:    var(--shadow-sm);
  --shadow-polaroid: var(--shadow-lg);

  --font-serif:     var(--font-display);
  --font-sans:      var(--font-body);

  --radius-sm:      var(--r-sm);
  --radius-md:      var(--r-md);
  --radius-lg:      var(--r-lg);

  --space-xs:       var(--s-1);
  --space-sm:       var(--s-2);
  --space-md:       var(--s-4);
  --space-lg:       var(--s-6);
  --space-xl:       var(--s-7);
  --space-2xl:      var(--s-8);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { color: inherit; }
strong, b { font-weight: 700; }

/* ── UTILITIES ──────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.script-accent {
  font-family: var(--font-script);
  font-weight: 600;
  color: var(--teal-600);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-600);
}

.section { padding-block: var(--s-8); }
.section-paper { background: var(--bg-mist); }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  gap: var(--s-4);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--ink);
}
.section-sub {
  color: var(--ink-mid);
  margin-block: 8px var(--s-6);
  font-size: 1rem;
  max-width: 56ch;
}
.section-link {
  color: var(--rose-700);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.section-link:hover { color: var(--rose-500); text-decoration: underline; text-underline-offset: 3px; }

/* ── FOCUS RING ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rose-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── SR-ONLY ────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── PREFERS REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}