/* Direction 05 — Premium Dark.
   Loaded AFTER components.css so these dark overrides win.
   Display: Fraunces. Body: Inter. Accent: refined gold. */

:root {
  /* Premium gold accent */
  --color-accent: #c8a04a;
  --color-accent-hover: #d9b566;
  --color-accent-contrast: #14110a;

  /* Dark neutrals (override the light baseline) */
  --color-bg: #0d1014;
  --color-surface: #161b22;
  --color-border: #2a313b;
  --color-text: #f3f1ea;
  --color-text-muted: #a6adb8;
  --color-text-invert: #0d1014;

  /* Keep dark-section tokens consistent with the global dark bg */
  --color-dark-bg: #090b0e;
  --color-dark-text: #f3f1ea;
  --color-dark-muted: #a6adb8;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Deeper shadows read better on dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --shadow: 0 8px 24px rgba(0,0,0,0.45), 0 18px 48px rgba(0,0,0,0.4);
}

/* Tighter, more editorial display headings */
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Header: dark glass with gold underline accent */
.site-header { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }

/* Cards sit on the elevated surface tone, subtle gold edge on hover */
.card { background: var(--color-surface); }
.card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }

/* Reviews on dark surface */
.review { background: var(--color-surface); border: 1px solid var(--color-border); }

/* Form fields on dark */
.field input, .field select, .field textarea { background: #0f141a; color: var(--color-text); }
.field input::placeholder, .field textarea::placeholder { color: #6b7480; }
/* native select dropdown stays readable */
.field select option { background: #0f141a; color: var(--color-text); }

/* Form status colors tuned for dark bg */
.form__status[data-state="success"] { background: #10261b; color: #6fd99b; }
.form__status[data-state="error"] { background: #2a1414; color: #f08a82; }

/* Area chips on dark */
.areas li { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }

/* Ghost button reads as gold outline on dark */
.btn--ghost { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }

/* Hero gradient block helper (dark, premium) */
.hero {
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(200,160,74,0.16), transparent 60%),
    linear-gradient(180deg, #0d1014 0%, #0a0d11 100%);
}

/* Generic dark placeholder block for "swap: client photo" spots */
.media-ph {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(140% 120% at 80% 0%, rgba(200,160,74,0.18), transparent 55%),
    linear-gradient(160deg, #11161d 0%, #0a0d11 100%);
  min-height: 320px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}
.media-ph::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.media-ph span { position: relative; z-index: 1; padding: 0 var(--space-4); text-align: center; }

/* Stat band */
.stats { display: grid; gap: var(--space-8); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--color-accent); line-height: 1; }
.stat__label { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--space-2); }

/* Gold rule */
.rule-gold { width: 64px; height: 3px; background: var(--color-accent); border: 0; border-radius: 2px; }

/* Footer keeps its own dark tone; tighten link hover to gold */
.site-footer a:hover { color: var(--color-accent); }

/* Checklist with gold checks */
.checks { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; }
.checks svg { width: 22px; height: 22px; color: var(--color-accent); margin-top: 2px; }

/* ---- Roman Stone Surfaces additions (client-specific) ---- */

/* Thin top utility bar above the header */
.topbar { background: #090b0e; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: 8px; flex-wrap: wrap; }
.topbar a { color: var(--color-text); }
.topbar a:hover { color: var(--color-accent); }
.topbar strong { color: var(--color-accent); }
.topbar__badges { display: flex; flex-wrap: wrap; gap: var(--space-5); color: var(--color-text-muted); }
.topbar__badges strong { color: var(--color-text); }
@media (max-width: 640px) { .topbar__badges { display: none; } }

/* 4-up grid (how-it-works steps) */
@media (min-width: 560px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Numbered step badge */
.step__n {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 999px; margin-bottom: var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* Slightly warmer gold review stars on dark */
.review__stars { color: var(--color-accent); }

/* Brand wordmark: keep the serif tight on the nav */
.nav__brand span { letter-spacing: -0.01em; }

/* Section heading rule helper already exists (.rule-gold). Give intro stacks breathing room. */
.section .stack.center .eyebrow { margin-bottom: 2px; }