/* ============================================================================
 * BeGolden Design System — colors_and_type.css
 *
 * Single source of truth for tokens. Drop into any project, @import at root.
 *
 * Sections:
 *   1. Fonts
 *   2. Color tokens
 *   3. Type scale
 *   4. Spacing, radius, shadow
 *   5. Motion
 *   6. Semantic element defaults
 *   7. Utilities
 * ========================================================================== */


/* ---------- 1. Fonts -------------------------------------------------------
 * SUBSTITUTION FLAG: Production font not provided. Using Manrope from Google
 * Fonts as the closest match to the live site's display + UI face. Please
 * replace the @import below with @font-face referencing the licensed family.
 * ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800;900&family=Noto+Sans+Display:wght@400;500;600;700;800;900&display=swap');


/* ---------- 2. Color tokens ----------------------------------------------- */
:root {
  /* Brand surface — deep midnight navy, slightly purple-leaning */
  --bg-navy:          #0A0930;
  --bg-navy-2:        #110F3E;   /* card / panel on navy */
  --bg-navy-3:        #1A1850;   /* hover surface */
  --bg-black:         #050418;   /* footer, deepest band */

  /* Gold — the only accent that earns its place */
  --gold-50:          #F8F1DD;
  --gold-100:         #EFE0B8;
  --gold-300:         #D6BC7E;
  --gold-500:         #C9A66B;   /* PRIMARY GOLD — logo, CTA, eyebrow rule */
  --gold-600:         #B58F4E;
  --gold-700:         #8E6E36;
  --gold-glow:        rgba(201, 166, 107, 0.18);

  /* Ink — white-led on navy */
  --fg-white:         #FFFFFF;
  --fg-mute:          rgba(255, 255, 255, 0.72);
  --fg-quiet:         rgba(255, 255, 255, 0.48);
  --fg-faint:         rgba(255, 255, 255, 0.20);

  /* Strokes */
  --stroke:           rgba(255, 255, 255, 0.10);
  --stroke-strong:    rgba(255, 255, 255, 0.18);
  --stroke-gold:      rgba(201, 166, 107, 0.45);

  /* Semantic — kept tight, no rainbow */
  --success:          #4DB585;
  --warning:          #E0A954;
  --danger:           #D8584F;
  --info:             #6B8BC7;

  /* Star rating gold (Google reviews use a warmer yellow than brand gold) */
  --star-gold:        #F5B400;

  /* Inverted (rare — for documents printed on paper) */
  --ink-on-light:     #0A0930;
  --bg-light:         #F6F3EC;

  /* Brand semantic aliases */
  --fg1: var(--fg-white);
  --fg2: var(--fg-mute);
  --fg3: var(--fg-quiet);
  --bg1: var(--bg-navy);
  --bg2: var(--bg-navy-2);
  --accent: var(--gold-500);
}


/* ---------- 3. Type tokens ------------------------------------------------ */
:root {
  --font-sans: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans Display', 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Scale — modular, fluid-ish (clamp where it matters) */
  --fs-12: 0.75rem;       /* 12 — micro labels */
  --fs-13: 0.8125rem;     /* 13 — eyebrows */
  --fs-14: 0.875rem;      /* 14 — caption */
  --fs-16: 1rem;          /* 16 — body */
  --fs-18: 1.125rem;      /* 18 — lead */
  --fs-20: 1.25rem;       /* 20 — subhead */
  --fs-24: 1.5rem;        /* 24 — h4 */
  --fs-32: 2rem;          /* 32 — h3 */
  --fs-48: 3rem;          /* 48 — h2 */
  --fs-72: 4.5rem;        /* 72 — h1 */
  --fs-96: 6rem;          /* 96 — hero display */

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.65;
  --lh-loose: 1.8;

  --tracking-wide: 0.18em;     /* eyebrows */
  --tracking-loose: 0.06em;
  --tracking-normal: 0em;
  --tracking-tight: 0.005em;   /* big display — breathing letter-spacing */
  --tracking-tighter: -0.01em;
}


/* ---------- 4. Spacing / radius / shadow ---------------------------------- */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* Marketing site stays square. Inputs and review cards are the exceptions. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;       /* inputs, small chips */
  --radius-3: 8px;       /* uncommon */
  --radius-4: 16px;      /* review cards ONLY */
  --radius-full: 999px;

  /* Shadows — soft, distant, premium. Used sparingly. */
  --shadow-1: 0 1px 0 0 var(--stroke);
  --shadow-2: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 80px -10px var(--gold-glow);
}


/* ---------- 5. Motion ------------------------------------------------------ */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-hero: 700ms;
}


/* ---------- 6. Semantic element defaults ---------------------------------- */
html, body {
  background: var(--bg-navy);
  color: var(--fg-white);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-mute);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg-mute);
}

.eyebrow {
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-white);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.caption {
  font-size: var(--fs-14);
  color: var(--fg-quiet);
}

small, .micro {
  font-size: var(--fs-12);
  color: var(--fg-quiet);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-in-out);
}

a:hover { color: var(--gold-500); }

::selection {
  background: var(--gold-500);
  color: var(--bg-navy);
}

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ---------- 7. Utility primitives ---------------------------------------- */
.surface-navy   { background: var(--bg-navy); color: var(--fg-white); }
.surface-card   { background: var(--bg-navy-2); border: 1px solid var(--stroke); }
.surface-deep   { background: var(--bg-black); color: var(--fg-white); }

.gold           { color: var(--gold-500); }
.mute           { color: var(--fg-mute); }
.quiet          { color: var(--fg-quiet); }

.divider        { height: 1px; background: var(--stroke); width: 100%; }
.divider-gold   { height: 1px; background: var(--gold-500); width: 28px; }

/* Primary CTA — gold fill on hover, ghost otherwise */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-2);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-in-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gold-500);
  color: var(--bg-navy);
}
.btn-primary:hover { background: var(--gold-300); color: var(--bg-navy); }

.btn-ghost {
  background: transparent;
  color: var(--fg-white);
  border-color: var(--stroke-strong);
}
.btn-ghost:hover { border-color: var(--gold-500); color: var(--gold-500); }

.btn-text {
  background: transparent;
  color: var(--fg-white);
  height: auto;
  padding: 0;
  border: 0;
}
.btn-text:hover { color: var(--gold-500); }

/* Input */
.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-2);
  color: var(--fg-white);
  font: inherit;
  transition: border-color var(--dur-base) var(--ease-in-out);
}
.input::placeholder { color: var(--fg-quiet); }
.input:focus { outline: none; border-color: var(--gold-500); }

/* Card */
.card {
  background: var(--bg-navy-2);
  border: 1px solid var(--stroke);
  padding: 24px;
  transition: border-color var(--dur-base) var(--ease-in-out);
}
.card:hover { border-color: var(--stroke-gold); }
.card-review {
  background: var(--bg-navy-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-4);
  padding: 20px;
}