/* ──────────────────────────────────────────────────────────────────
   Schmidt × Nurek Wedding 2026 — Visual Foundations
   Colors derived from the venue watercolor sketches + moodboard.
   Type uses two Adobe typefaces (Bilo Thin, Broadacre Hairline 1)
   plus Pinyon Script from Google Fonts for the script accent.
   ────────────────────────────────────────────────────────────────── */

/* @import must come before any other rules. Pinyon Script replaces
   the original Sweet Fancy Script Light. */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100&family=Pinyon+Script&family=Raleway:wght@100&display=swap");

/* ── FONT FACES ──────────────────────────────────────────────────── */
@font-face {
  font-family: "Bilo";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("/brand-assets/fonts/Bilo-Thin.otf") format("opentype");
}
@font-face {
  font-family: "Broadacre Hairline";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("/brand-assets/fonts/Broadacre-Hairline-1.otf") format("opentype");
}

:root {
  /* ── COLORS ──────────────────────────────────────────────────────
     The palette splits into three layers:
     1. Paper & Ink — the canvas everything sits on.
     2. Moodboard accents — the four named swatches from the moodboard.
     3. Watercolor wash tones — derived from the four venue sketches.
     ──────────────────────────────────────────────────────────────── */

  /* 1. Paper & Ink */
  --ivory:           #FAF7F0;   /* primary background — warm paper */
  --ivory-deep:      #F1EBDD;   /* slightly toasted paper, panels */
  --ivory-shadow:    #E8DFC9;   /* page edge / subtle vignette */
  --charcoal:        #2C2C2C;   /* primary text + all line art */
  --charcoal-soft:   #4A4640;   /* secondary text, pencil-grey */
  --charcoal-mute:   #8A857C;   /* tertiary, captions */

  /* 2. Moodboard accents (from the four swatches at top of moodboard) */
  --terracotta:      #D98B5F;   /* warm orange — feast / candlelight */
  --terracotta-deep: #B8693E;   /* deeper terracotta for emphasis */
  --butter:          #F2E5C2;   /* pale buttery cream — light wash */
  --butter-deep:     #E8D29A;   /* warm cream emphasis */
  --slate-blue:      #7B96A8;   /* dusty blue-grey — Tischdeko block */
  --slate-blue-deep: #3D4E5F;   /* deep blue-grey — dusk / pond */
  --sage:            #8A9B6E;   /* moodboard olive — Einladungen block */
  --sage-deep:       #5F6E48;   /* deeper sage for foliage shadow */

  /* 3. Hydrangea petal tones (derived from petal photographs) */
  --hydrangea-blue:    #A9B8D4;   /* soft mid blue petal */
  --hydrangea-pale:    #D4DDEA;   /* pale petal edge */
  --hydrangea-lavender:#B0A4C2;   /* lavender flush */
  --hydrangea-violet:  #6F5E8E;   /* deeper violet bloom */
  --hydrangea-stem:    #93A878;   /* leaf green */

  /* 4. Semantic surfaces */
  --bg:              var(--ivory);
  --bg-panel:        var(--ivory-deep);
  --fg:              var(--charcoal);
  --fg-muted:        var(--charcoal-soft);
  --fg-subtle:       var(--charcoal-mute);
  --line:            var(--charcoal);          /* for line-art rings + doves */
  --hairline:        rgba(44, 44, 44, 0.18);   /* dividers, fine borders */
  --hairline-soft:   rgba(44, 44, 44, 0.10);

  /* ── TYPE FAMILIES ─────────────────────────────────────────────── */
  --font-display: "Bilo", "Cormorant Garamond", "Times New Roman", serif;
  --font-script:  "Pinyon Script", "Allura", cursive;
  --font-body:    "Broadacre Hairline", "Jost", "Helvetica Neue", sans-serif;

  /* ── TYPE SCALE ────────────────────────────────────────────────── */
  /* The display face (Bilo Thin) is set with very generous tracking
     because thin serifs need air to breathe. Body face is set tighter
     and at moderate size — Broadacre Hairline reads as "set in stone"
     small caps when uppercased with ~0.18em tracking. */

  --t-display-xl: 88px;     /* couple names on print */
  --t-display-lg: 64px;
  --t-display-md: 44px;
  --t-display-sm: 32px;

  --t-script-xl:  72px;     /* dates set in script */
  --t-script-lg:  56px;
  --t-script-md:  40px;
  --t-script-sm:  28px;

  --t-body-lg:    18px;
  --t-body-md:    15px;
  --t-body-sm:    13px;
  --t-caption:    11px;     /* ALL CAPS, tracked, tertiary metadata */

  /* ── LETTER-SPACING TOKENS ─────────────────────────────────────── */
  --track-display: 0.06em;   /* Bilo Thin display, modest tracking */
  --track-display-wide: 0.18em;
  --track-body: 0.01em;
  --track-caps: 0.22em;      /* uppercase Broadacre — "stone-cut" feel */
  --track-caps-wide: 0.34em; /* hero metadata lines */

  /* ── LINE-HEIGHT TOKENS ────────────────────────────────────────── */
  --lh-display: 1.05;
  --lh-script:  1.0;
  --lh-body:    1.6;
  --lh-tight:   1.2;

  /* ── SPACING (in units of the body grid: 4px) ──────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ── BORDERS / RADII / SHADOW ──────────────────────────────────── */
  /* The system is intentionally low on rounding — paper edges are
     square. Where rounding appears, it's small and editorial. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* No drop shadows in the brand. Depth comes from torn-edge masks
     and vellum overlays, not from box-shadow. We expose ONE soft
     shadow for elevated cards on screen, used sparingly. */
  --shadow-paper: 0 12px 28px -18px rgba(60, 50, 30, 0.35),
                  0 2px 4px rgba(60, 50, 30, 0.04);

  /* Hairline divider used between editorial sections */
  --rule: 1px solid var(--hairline);
  --rule-charcoal: 1px solid var(--charcoal);
}

/* ── SEMANTIC TYPE STYLES ──────────────────────────────────────────
   Apply via the .ds-* classes; these map directly to the components
   you'll use across cards, slides, and the Save-the-Date.
   ──────────────────────────────────────────────────────────────── */

.ds-display-xl,
.ds-display-lg,
.ds-display-md,
.ds-display-sm {
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--fg);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}
.ds-display-xl { font-size: var(--t-display-xl); }
.ds-display-lg { font-size: var(--t-display-lg); }
.ds-display-md { font-size: var(--t-display-md); }
.ds-display-sm { font-size: var(--t-display-sm); }

.ds-script-xl,
.ds-script-lg,
.ds-script-md,
.ds-script-sm {
  font-family: var(--font-script);
  font-weight: 300;
  color: var(--fg);
  letter-spacing: 0;
  line-height: var(--lh-script);
}
.ds-script-xl { font-size: var(--t-script-xl); }
.ds-script-lg { font-size: var(--t-script-lg); }
.ds-script-md { font-size: var(--t-script-md); }
.ds-script-sm { font-size: var(--t-script-sm); }

.ds-body-lg,
.ds-body-md,
.ds-body-sm {
  font-family: var(--font-body);
  font-weight: 100;
  color: var(--fg);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}
.ds-body-lg { font-size: var(--t-body-lg); }
.ds-body-md { font-size: var(--t-body-md); }
.ds-body-sm { font-size: var(--t-body-sm); }

.ds-caption {
  font-family: var(--font-body);
  font-weight: 100;
  font-size: var(--t-caption);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
.ds-caption-wide {
  font-family: var(--font-body);
  font-weight: 100;
  font-size: var(--t-caption);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps-wide);
}

/* The "monogram rule" — a hairline horizontal rule with a centered
   ornament, used between sections (e.g. between names and dates). */
.ds-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--charcoal);
}
.ds-rule::before,
.ds-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Page background utility — warm paper */
.ds-paper {
  background-color: var(--ivory);
  color: var(--fg);
}

/* ── POLISH FONT OVERRIDE ──────────────────────────────────────────────────────
   Bilo (display) and Broadacre Hairline (body) are local OTF files without
   Latin Extended glyphs. For lang=pl we redirect the CSS variables to Google
   Fonts with full Polish diacritic support. Pinyon Script unchanged (already OK).
   ────────────────────────────────────────────────────────────────────────────── */
html[lang="pl"] {
  --font-display: "Jost", sans-serif;
  --font-body:    "Raleway", "Jost", sans-serif;
}