/* ===================================================================
   The Wedding Broker — brand tokens
   Single source of truth for colour and type, taken from the
   "The Wedding Broker - Brand Kit" Canva export.

   The four kit swatches are --twb-lilac / --twb-cocoa / --twb-wine /
   --twb-paper. Everything else below is a supporting tone derived from
   them (muted body copy, rules, placeholders) so that panels keep an
   accessible contrast ratio in both directions.

   index.html, faq.html and same-day-wedding-planner.html all read from
   these variables — change a value here and it moves across the site.
   =================================================================== */

:root {
  /* --- Kit swatches ------------------------------------------------ */
  --twb-lilac: #ECD8F4;  /* PRIMARY  — soft lavender panels, accents on dark */
  --twb-cocoa: #280203;  /* TERTIARY — near-black maroon, deepest surface    */
  --twb-wine:  #6E062F;  /* TERTIARY — deep burgundy, the signature accent   */
  --twb-paper: #F2F0EC;  /* NEUTRAL  — off-white page background            */

  /* --- Derived tones ----------------------------------------------- */
  --twb-ink: var(--twb-cocoa);          /* body copy on paper            */
  --twb-muted-dark: #D8C9D1;            /* body copy on cocoa / wine     */
  --twb-muted-light: #79656E;           /* secondary copy on paper       */
  --twb-placeholder: #857581;           /* input placeholders            */
  --twb-rule-dark: #4C2028;             /* hairlines inside dark cards   */
  --twb-rule-soft: rgba(242, 240, 236, 0.18);
  --twb-rule-ink: rgba(40, 2, 3, 0.14);
  --twb-error: #B3261E;                 /* kept clear of the brand wine  */

  /* --- Illustration tiles ------------------------------------------ */
  /* The kit's speckled tiles, lifted from the brand board as vector and
     rewrapped so they repeat seamlessly. Each is 681x399. The lilac and
     paper tiles are exactly as the kit draws them; the cocoa tile is the
     same artwork on the kit's darkest swatch, for the site's dark panels.
     Always pair a tile with its matching background-color so the panel
     still reads correctly if the SVG has not loaded. */
  --twb-tile-lilac: url("/images/tile-lilac.svg");
  --twb-tile-paper: url("/images/tile-paper.svg");
  --twb-tile-cocoa: url("/images/tile-cocoa.svg");
  /* speckles only, no ground — layer this over a gradient or photo */
  --twb-tile-speckle: url("/images/tile-speckle.svg");
  --twb-tile-size: 681px 399px;

  /* --- Type -------------------------------------------------------- */
  /* Poppins is the kit's own text face. The kit's display faces (New
     Icon Serif Condensed and New Icon Script) are Canva-licensed and
     cannot be served from a website, so Italiana and Italianno stand in
     for them — both are narrow, high-contrast and close in feel. */
  --twb-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --twb-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --twb-logo: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --twb-script: 'Italianno', 'Cormorant Garamond', cursive;
}

/* ===================================================================
   Logo lockups
   .twb-logo   — compact horizontal mark + wordmark, used in the nav
   .twb-lockup — stacked script/caps lockup from the kit, used in footers
   Both inherit their colour, so they sit on light or dark panels.
   =================================================================== */

.twb-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--twb-ink);
}

.twb-logo-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: var(--twb-wine);
}

.twb-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.twb-logo-name {
  font-family: var(--twb-logo);
  font-size: 27px;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}

.twb-logo-sub {
  font-family: var(--twb-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.235em;
  text-transform: uppercase;
  color: var(--twb-wine);
  margin-top: 6px;
  white-space: nowrap;
}

.twb-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.twb-lockup-the {
  font-family: var(--twb-script);
  font-size: 46px;
  line-height: 0.72;
  color: var(--twb-lilac);
}

.twb-lockup-name {
  font-family: var(--twb-logo);
  font-size: 27px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--twb-paper);
  margin-top: 6px;
}

.twb-lockup-sub {
  font-family: var(--twb-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--twb-lilac);
  margin-top: 10px;
}

@media (max-width: 768px) {
  .twb-logo-mark { width: 34px; height: 34px; }
  .twb-logo-name { font-size: 21px; letter-spacing: 0.1em; }
  .twb-logo-sub { font-size: 7px; letter-spacing: 0.18em; margin-top: 5px; }
  .twb-lockup-the { font-size: 38px; }
  .twb-lockup-name { font-size: 22px; }
}

/* Below ~440px the wordmark and the menu button stop fitting on one row,
   so the lockup steps down twice more to keep the nav a single line. */
@media (max-width: 480px) {
  .twb-logo { gap: 11px; }
  .twb-logo-mark { width: 30px; height: 30px; }
  .twb-logo-name { font-size: 16px; letter-spacing: 0.08em; }
  .twb-logo-sub { font-size: 6.5px; letter-spacing: 0.16em; margin-top: 4px; }
}

@media (max-width: 375px) {
  .twb-logo { gap: 9px; }
  .twb-logo-mark { width: 26px; height: 26px; }
  .twb-logo-name { font-size: 14px; letter-spacing: 0.06em; }
  .twb-logo-sub { font-size: 5.5px; letter-spacing: 0.13em; }
}