/* ── DESIGN TOKENS ─────────────────────────────────────────
   Palette, typography, and shared layout/shadow tokens used
   across all pages. Do not redefine these in page-level
   <style> blocks. */

:root {
   color-scheme: light only;
}

:root {
   /* Palette — named by role, not hue. */
   --color-bg: #ffffff;
   /* main page surface */
   --color-bg-accent: #faf8f3;
   /* accent surface (cards, nav, bands) */
   --color-bg-accent-strong: #f2ede2;
   /* stripes/bands on --color-bg-accent */
   --color-primary-deep: #1b3a5c;
   --color-primary: #2c5f8a;
   --color-primary-light: #6f9ec4;
   --color-primary-pale: #d6e6f2;
   --color-primary-wash: #edf4fa;
   --color-accent: #b8912e;
   --color-accent-light: #d4a84b;
   --color-text: #1a1410;
   --color-text-muted: #5a5248;
   --color-text-subtle: #9a9088;
   --color-border: #ddd8cc;
   --color-error: #8b2020;
   --color-error-bg: #fdf0f0;

   /* Status colors — for badges/callouts (yes / warning / no). */
   --color-success: #1a6b3a;
   --color-success-bg: #edf7f1;
   --color-warning: #5a4a20;
   --color-warning-bg: #fdf6e3;

   /* Typography */
   --font-serif: 'Lora', Georgia, serif;
   --font-sans: 'DM Sans', system-ui, sans-serif;
   --font-cursive: 'Great Vibes', cursive;

   /* Spacing */
   --radius: 4px;
   --section-gap: 24px;
   /* vertical rhythm for .section (and the bands built on it) */

   /* Shadows */
   --shadow-sm: 0 1px 4px rgba(27, 58, 92, 0.08);
   --shadow-md: 0 4px 20px rgba(27, 58, 92, 0.12);

   /* Layout */
   --drawer-w: 290px;

   /* Site nav bar — kept identical across the mobile top bar and the desktop
     top nav so the brand and bar height don't jump across the breakpoint. */
   --nav-bar-height: 56px;
   /* bar thickness */
   --nav-bar-pad-x: clamp(14px, 1vw, 20px);
   /* horizontal padding (left padding before the brand) */
   --brand-mark-size: 48px;
   /* bird logo width */
   --brand-title-size: 20px;
   /* "Steph & Bryan" font size */
   --nav-brand-gap: 8px;
   /* min gap between brand and the desktop nav links */
   --nav-fade-dur: 1s;
   /* slim-bar fade speed across the breakpoint */

   /* Azulejo tile patterns — ink (dark on light) for heroes; white for the
     deep-blue bands, all kept at one shade by --azulejo-band-opacity. */
   --azulejo-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='none'/%3E%3Crect x='2' y='2' width='76' height='76' fill='none' stroke='%231b3a5c' stroke-width='1.5'/%3E%3Cpolygon points='40,6 74,40 40,74 6,40' fill='none' stroke='%231b3a5c' stroke-width='1'/%3E%3Ccircle cx='2' cy='2' r='6' fill='none' stroke='%231b3a5c' stroke-width='1'/%3E%3Ccircle cx='78' cy='2' r='6' fill='none' stroke='%231b3a5c' stroke-width='1'/%3E%3Ccircle cx='2' cy='78' r='6' fill='none' stroke='%231b3a5c' stroke-width='1'/%3E%3Ccircle cx='78' cy='78' r='6' fill='none' stroke='%231b3a5c' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%231b3a5c' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%231b3a5c' opacity='0.4'/%3E%3C/svg%3E");
   --azulejo-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='none'/%3E%3Crect x='2' y='2' width='76' height='76' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpolygon points='40,6 74,40 40,74 6,40' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='2' cy='2' r='6' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='78' cy='2' r='6' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='2' cy='78' r='6' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='78' cy='78' r='6' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%23ffffff' opacity='0.5'/%3E%3C/svg%3E");
   --azulejo-band-opacity: 0.12;
}