/* ============================================
   THE FEMALE QUOTIENT — Brand base styles
   Pulls in Inter + 2026 design tokens, then sets
   brand typography defaults and texture helpers.

   Usage: <link rel="stylesheet" href="brand/css/fq-brand.css">
   Sourced from ladies-who-code/female-quotient-rebuild (css/variables.css, css/fonts.css)
   ============================================ */

@import url('./fonts.css');
@import url('./tokens.css');

/* ---------- Base ---------- */

body {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--fq-obsidian);
  background-color: var(--fq-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings: Thin, 85% leading, -5% tracking, uppercase ---------- */

h1, .fq-h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); text-transform: var(--h1-transform); }
h2, .fq-h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); text-transform: var(--h2-transform); }
h3, .fq-h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); text-transform: var(--h3-transform); }
h4, .fq-h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); text-transform: var(--h4-transform); }
h5, .fq-h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); text-transform: var(--h5-transform); }

/* Kicker / eyebrow: Medium, -3% tracking, uppercase */
h6, .fq-kicker { font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); text-transform: var(--h6-transform); }

/* ---------- Buttons: Medium, 100% leading, 5% tracking ---------- */

.fq-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.6em;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--btn-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fq-ivory);
  background: var(--fq-obsidian);
  border: 1px solid var(--fq-obsidian);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.fq-btn:hover { background: transparent; color: var(--fq-obsidian); }

/* Filled ivory variant — for use on rose gold / dark textures */
.fq-btn--ivory { color: var(--fq-obsidian); background: var(--fq-ivory); border-color: var(--fq-ivory); }
.fq-btn--ivory:hover { background: transparent; color: var(--fq-ivory); }

/* ---------- Textures ----------
   Brand rule: overlays max 40% black on dark textures, max 20% on light textures. */

.fq-bg-rosegold {
  background-color: var(--fq-rosegold);
  background-image: url('../textures/rose-gold-desktop.webp');
  background-size: cover;
  background-position: center;
}
@media (max-width: 1199px) {
  .fq-bg-rosegold { background-image: url('../textures/rose-gold-mobile.webp'); }
}

.fq-bg-rosegold-nav {
  background-color: var(--fq-rosegold);
  background-image: url('../textures/rose-gold-nav.webp');
  background-size: 100% 100%;
}

.fq-bg-stone  { background: var(--fq-dark-ivory) url('../textures/stone-texture.webp') center / cover; }
.fq-bg-tan    { background: var(--fq-dark-ivory) url('../textures/tan-texture.webp') center / cover; }
.fq-bg-ivory-flower { background: var(--fq-ivory) url('../textures/ivory-flower-texture.webp') center / cover; }
.fq-bg-rose-petal   { background: var(--fq-dark-ivory) url('../textures/rose-petal-texture.jpg') center / cover; }
.fq-bg-marble { background: var(--fq-white) url('../textures/white-marble.webp') center / cover; }

/* Compliant overlays (apply to a ::before or a wrapper) */
.fq-overlay-dark  { background-color: rgba(0, 0, 0, 0.4); }
.fq-overlay-light { background-color: rgba(0, 0, 0, 0.2); }