/* =================================================================
   Local Font Declarations (Self-Hosted for Performance)
   ================================================================= */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jost-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jost-400-italic.woff2') format('woff2');
}

:root {
  /* ---- Brand seeds ---- */
  --c-teal:  #0E4A48;   /* Teal Blue   */
  --c-gold:  #B8872E;   /* Gold        */

  /* ---- Semantic colour tokens — LIGHT theme ---- */
  --c-bg:         #FFFFFF;  /* white page                  */
  --c-surface:    #F0F6F5;  /* pale teal-wash alt-section   */
  --c-ink:        #12302E;  /* primary text on bg/surface   */
  --c-muted:      #5B7674;  /* secondary text               */
  --c-border:     #DCE6E5;  /* hairlines, field borders     */

  --c-primary:    #0E4A48;  /* teal-blue surfaces           */
  --c-on-primary: #FFFFFF;  /* text/icons on teal           */

  --c-accent:     #B8872E;  /* gold accent / highlights     */
  --c-on-accent:  #241705;  /* text on gold                 */

  --c-deep:       #072B2A;  /* deep teal band/footer        */
  --c-on-deep:    #F3EFE4;  /* warm text on deep             */
  --c-deep-muted: #9DBAB6;  /* muted text on deep            */

  --c-warning:    #B3261E;  /* form error                    */

  /* scrim for text over garment photography (theme-tied) */
  --scrim: linear-gradient(180deg, rgba(7,43,42,0) 0%, rgba(7,43,42,.74) 100%);

  /* ---- Shape & depth ---- */
  --r-card: 18px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(7,43,42,.08), 0 8px 24px -12px rgba(7,43,42,.18);
  --shadow-lift: 0 2px 4px rgba(7,43,42,.10), 0 24px 48px -20px rgba(14,74,72,.35);

  /* ---- Section rhythm ---- */
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);
}

[data-theme="dark"] {
  --c-bg:         #071E1D;  /* deep teal-black              */
  --c-surface:    #0E2E2C;  /* raised teal surface          */
  --c-ink:        #F3EFE4;
  --c-muted:      #A9C4C1;
  --c-border:     #1E4341;

  --c-primary:    #4FA69F;  /* lifted teal for contrast     */
  --c-on-primary: #06201F;

  --c-accent:     #D9AE4E;  /* brighter gold for dark bg    */
  --c-on-accent:  #201203;

  --c-deep:       #040F0F;  /* near-black band              */
  --c-on-deep:    #F3EFE4;
  --c-deep-muted: #7FA29E;

  --c-warning:    #F2938C;

  --scrim: linear-gradient(180deg, rgba(3,10,10,0) 0%, rgba(3,10,10,.82) 100%);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.6);
}

/* Stronger palette when the visitor asks for high contrast */
@media (prefers-contrast: more) {
  :root               { --c-ink:#081C1B; --c-muted:#33504D; --c-border:#9DB6B3; }
  [data-theme="dark"] { --c-ink:#FFFFFF; --c-muted:#D8E8E6; --c-border:#5B8683; }
}

/* =====================  Allowed plain-CSS (Rule 2i)  ===================== */

/* Scroll-reveal primitive (driven by main.js IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Text-over-image scrim (theme-tied, see --scrim) */
.scrim::after { content:""; position:absolute; inset:0; background: var(--scrim); border-radius: inherit; }

/* Marquee for the trust strip */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__track { animation: drift 34s linear infinite; }

/* Honour reduced-motion: stop everything that moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* Save-Data: drop the heavy decoration on slow connections */
@media (prefers-reduced-data: reduce) {
  .deco-img { display: none !important; }
  .marquee__track { animation: none !important; }
}

/* Keep keyboard focus obvious everywhere */
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

/* Google Map embed (third-party markup — allowed tweak) */
.map-embed { filter: grayscale(.15) contrast(1.02); }
[data-theme="dark"] .map-embed { filter: grayscale(.35) invert(.9) hue-rotate(160deg) contrast(.9); }

/* Header scroll state — smooth tint + shadow (stateful, tokens only) */
#site-header { transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease; }
#site-header.is-scrolled { background-color: color-mix(in srgb, var(--c-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); border-color: var(--c-border); }

/* Form field error state (tinted from the warning token) */
.field-error { border-color: var(--c-warning) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-warning) 28%, transparent); }

/* Native FAQ accordion chevron rotate */
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }