/* =============================================================
   Prieto's - design tokens extracted from the Vercel/React build
   Source: github.com/Adkirf/prietos (src/index.css), reconciled
   with the consultant's dark mockups.
   Values tagged (mockup) must be confirmed against the Figma.

   USAGE: single source of truth for the WordPress rebuild.
   Wire these into Rey/Elementor GLOBAL styles (colors + fonts),
   not element by element. Add the helper classes via custom CSS
   for the effects Elementor won't do natively.
   ============================================================= */

:root {
  /* ---- Color (Stockholm Luxury House palette - client-approved 23 Jun) ---- */
  --color-bg:             #0B0B0B; /* body background (deep black)   */
  --color-surface:        #1A1A1A; /* cards / raised sections        */
  --color-surface-2:      #131313; /* header / deep panels           */
  --color-gold:           #C8A46B; /* accent: text, hairlines, icons */
  --color-gold-dark:      #9C7E4F; /* gold on light bands            */
  --color-gold-cta:       #C8A46B; /* primary button fill (solid gold)*/
  --color-gold-cta-hover: #B8945C; /* primary button hover           */
  --color-on-gold:        #111111; /* text/icon on gold fill         */
  --color-muted:          #3A3A3A; /* dividers, muted UI             */
  --color-text:           #C9C3B8; /* body text on dark (warm)       */
  --color-text-strong:    #F2EDE6; /* high-emphasis text (ivory)     */
  --color-text-soft:      #D9D1C7; /* soft warm text (hero tagline)  */
  --color-placeholder:    #8A857C; /* input placeholders             */

  /* One light editorial band (e.g. Journal section) */
  --color-band-light:      #ECE5DC; /* cream */
  --color-band-light-text: #1A1A1A;

  /* ---- Radius ---- */
  --radius-main:    8px;
  --radius-section: 6px;

  /* ---- Type ----
     DECISION (23 Jun 2026): client locked the type system to match the
     approved "Stockholm Luxury House" mockup (frontend.jpeg):
     Display/headings/wordmark/italics = Cormorant Garamond (fine, high-end).
     UI/menu/buttons = Montserrat. Replaces the earlier Playfair + Jost pick. */
  --font-display: "Cormorant Garamond", "Didot", Georgia, serif;
  --font-sans:    "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tracking:        0.02em; /* base letter-spacing site-wide       */
  --tracking-label:  0.2em;  /* uppercase nav / labels              */
  --weight-thin:   100;
  --weight-light:  300;      /* the build leans on very light weights */

  /* ---- Vertical rhythm (generous but not empty; tightened 21 Jun) ---- */
  --section-py:      8vh; /* mobile  */
  --section-py-md:  10vh; /* tablet  */
  --section-py-lg:  12vh; /* desktop */
}

/* ---------- Helper classes (custom CSS; not native in Elementor) ---------- */

/* Sticky header: translucent black + blur + thin gold hairline */
.prietos-header {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: .5px solid var(--color-gold-cta);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

/* Primary button - solid gold, dark text, sharp corners (luxury) */
.prietos-btn {
  display: inline-block;
  background: var(--color-gold-cta);
  color: var(--color-on-gold);
  border: 1px solid var(--color-gold-cta);
  border-radius: 0;
  padding: 16px 38px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.prietos-btn:hover { background: var(--color-gold-cta-hover); border-color: var(--color-gold-cta-hover); color: var(--color-on-gold); }

/* Secondary / outline button (e.g. PRIVATE CLIENT) */
.prietos-btn--outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}
.prietos-btn--outline:hover { background: var(--color-gold); color: var(--color-on-gold); border-color: var(--color-gold); }

/* Underline-only input (matches the React build) */
.prietos-input {
  background: transparent;
  border: 0;
  border-bottom: 2px solid #fff;
  color: #fff;
  padding: .75rem 0;
  width: 100%;
  outline: none;
}

/* Section spacing + small utilities */
.prietos-section { padding: var(--section-py) .5rem; }
@media (min-width: 768px)  { .prietos-section { padding: var(--section-py-md) .5rem; } }
@media (min-width: 1024px) { .prietos-section { padding: var(--section-py-lg) .5rem; } }

.prietos-gold    { color: var(--color-gold); }
.prietos-divider { height: 1px; background: var(--color-muted); margin: 1.5rem 0; }

/* Gold / textured heading via background-clip (decorative headings) */
.prietos-text-clip {
  background-image: url('/wp-content/uploads/brand/texture-gold.jpg');
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: cover;
  background-position: center;
}