/* ============================================================
   dd studio — design tokens
   Wine + gold + cream editorial palette.
   Bebas Neue (display) · Cormorant Garamond (editorial)
   · Inter (body).
   ============================================================ */

/* Grift is a commercial geometric sans by 38.lineart Studio.
   Until the .woff2 is dropped into /fonts, Outfit (Google Fonts) is the
   closest free substitute — same geometric construction, similar single-story
   'a', round 'o'/'e', generous bowls. Drop Grift Display + Grift Text
   .woff2 into /fonts and switch the @font-face below. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Color: raw palette ---------- */
  --wine-900: #3D0818;        /* page bg, ink-on-gold */
  --wine-800: #4D1020;        /* card surface */
  --wine-700: #6B2035;        /* border, divider */
  --wine-600: #8B3045;        /* hover wine */

  --gold-500: #C9A44A;        /* primary accent */
  --gold-400: #D4B05A;        /* gold hover */
  --gold-600: #A88836;        /* gold pressed */

  --cream-50:  #F5F0E8;       /* primary text */
  --cream-100: #E8DFD2;       /* secondary text */
  --mute-500:  #8B6B6B;       /* muted, "before" copy */

  /* ---------- Color: semantic ---------- */
  --bg:           var(--wine-900);
  --bg-elevated:  var(--wine-800);
  --bg-overlay:   color-mix(in srgb, var(--wine-900) 95%, transparent);

  --fg1:          var(--cream-50);    /* primary text */
  --fg2:          var(--mute-500);    /* secondary text */
  --fg-on-gold:   var(--wine-900);    /* text on gold buttons */

  --accent:       var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-press: var(--gold-600);
  --accent-soft:  color-mix(in srgb, var(--gold-500) 20%, transparent);
  --accent-faint: color-mix(in srgb, var(--gold-500) 10%, transparent);

  --border:       var(--wine-700);
  --border-soft:  color-mix(in srgb, var(--wine-700) 50%, transparent);
  --border-gold:  color-mix(in srgb, var(--gold-500) 30%, transparent);

  /* ---------- Type: families ---------- */
  /* Grift / Outfit-substitute is now the primary editorial display face.
     Bebas Neue is retained for UPPERCASE micro labels only.
     Inter remains the body workhorse. */
  --font-display: "Outfit", "Grift", "Futura", "Avenir Next", sans-serif;
  --font-serif:   "Outfit", "Grift", "Futura", "Avenir Next", sans-serif; /* alias kept for backwards compat — now points to geometric sans */
  --font-condensed: "Bebas Neue", "Impact", sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---------- Type: scale ---------- */
  --t-xs:   0.75rem;   /* 12 — micro labels */
  --t-sm:   0.875rem;  /* 14 — meta, eyebrow */
  --t-base: 1rem;      /* 16 — body */
  --t-md:   1.125rem;  /* 18 — large body */
  --t-lg:   1.25rem;   /* 20 — h4 */
  --t-xl:   1.5rem;    /* 24 — h3 */
  --t-2xl:  1.875rem;  /* 30 — h2 small */
  --t-3xl:  2.25rem;   /* 36 — h2 */
  --t-4xl:  3rem;      /* 48 — h1 small */
  --t-5xl:  3.75rem;   /* 60 — h1 */
  --t-6xl:  4.5rem;    /* 72 — display */
  --t-7xl:  6rem;      /* 96 — hero */

  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-base:    1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.1em;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --r-none: 0;
  --r-sm:   4px;     /* buttons, tags */
  --r-md:   6px;
  --r-lg:   8px;     /* cards */
  --r-xl:   12px;
  --r-full: 9999px;  /* pills, dots */

  /* ---------- Shadows (used sparingly — system is shadowless by default) ---------- */
  --shadow-none: none;
  --shadow-card: 0 1px 0 0 color-mix(in srgb, var(--gold-500) 8%, transparent) inset,
                 0 24px 48px -24px rgba(0, 0, 0, 0.5);
  --shadow-pop:  0 8px 24px -8px rgba(0, 0, 0, 0.6);

  /* ---------- Motion ---------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --d-fast:    120ms;
  --d-base:    240ms;
  --d-slow:    400ms;

  /* ---------- Layout ---------- */
  --container:    1280px;
  --gutter:       24px;
  --gutter-lg:    48px;
}

/* ============================================================
   Semantic element styles
   Use these directly OR mirror their values with utility classes.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — display family by default, override per surface */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--fg1);
  text-transform: none;
}
/* "Editorial" was Cormorant italic; now uses the same Grift/Outfit geometric
   sans at a lighter weight to give a softer counterpoint to the bold display. */
.h-editorial {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--fg1);
}

h1, .h1 { font: 700 var(--t-6xl)/var(--leading-tight) var(--font-display); letter-spacing: -0.025em; color: var(--fg1); }
h2, .h2 { font: 700 var(--t-4xl)/var(--leading-tight) var(--font-display); letter-spacing: -0.02em; color: var(--fg1); }
h3, .h3 { font: 600 var(--t-xl)/var(--leading-snug) var(--font-sans); color: var(--fg1); }
h4, .h4 { font: 600 var(--t-lg)/var(--leading-snug) var(--font-sans); color: var(--fg1); }

p  { font: 400 var(--t-base)/var(--leading-relaxed) var(--font-sans); color: var(--fg1); }
.p-lg { font-size: var(--t-md); line-height: var(--leading-relaxed); }
.p-sm { font-size: var(--t-sm); line-height: var(--leading-base); color: var(--fg2); }

/* Eyebrow — UPPERCASE TRACKED gold label, paired with a horizontal rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: 600 var(--t-sm)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

/* Pull-quote — the only place left-border accent is used */
.pullquote {
  border-left: 4px solid var(--accent);
  padding: var(--space-2) var(--space-6);
  font: 500 var(--t-md)/var(--leading-relaxed) var(--font-sans);
  color: var(--fg1);
}
.pullquote em, .pullquote strong { color: var(--accent); font-style: normal; font-weight: 600; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 36px;
  border-radius: var(--r-full);
  font: 600 var(--t-base)/1 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: var(--fg-on-gold);
  box-shadow: 0 4px 20px rgba(180, 145, 60, 0.25);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 28px rgba(180, 145, 60, 0.38);
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost:hover {
  background: var(--accent);
  color: var(--fg-on-gold);
  box-shadow: 0 4px 20px rgba(180, 145, 60, 0.25);
}

/* Cards */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-8);
}
.card-gold-edge {
  border-color: var(--border-gold);
}

/* Tag / pill */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font: 600 var(--t-xs)/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--r-sm);
  background: var(--accent-faint);
  color: var(--accent);
}

/* Mute helper */
.mute { color: var(--fg2); }
.gold { color: var(--accent); }
.cream { color: var(--fg1); }

/* Container helper */
.container-x {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
  .container-x { padding-inline: var(--gutter-lg); }
}

/* Optional grain overlay (modernization addition, opt-in) */
.bg-grain { position: relative; }
.bg-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}