/* =============================================================
   ResultaHub — Design Tokens
   Estratégia. Conexão. Plano. RESULTADOS REAIS.
   ============================================================= */

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

:root {
  /* ---------- Palette: Navy (primary surface) ---------- */
  --navy-950: #06101F;
  --navy-900: #0A1830;
  --navy-800: #0F2042;
  --navy-700: #162C57;
  --navy-600: #233B6E;
  --navy-500: #3B568F;

  /* ---------- Palette: Gold (accent) ---------- */
  --gold-300: #F2D78A;
  --gold-400: #ECC568;
  --gold-500: #C9A84C;   /* primary accent */
  --gold-600: #A8883C;
  --gold-700: #A87C1F;
  --gold-800: #7C5A14;

  /* ---------- Palette: Cream / neutral light ---------- */
  --cream-50:  #F6F1E6;  /* primary light surface */
  --cream-100: #EFE7D3;
  --cream-200: #D9CFB8;
  --cream-300: #B8AC91;

  /* ---------- Palette: Ink (text on cream) ---------- */
  --ink-900: #0A1830;
  --ink-700: #29354C;
  --ink-500: #5C6878;
  --ink-300: #97A1B1;

  /* ---------- Palette: Warm secondary (photo-anchored creatives) ---------- */
  /* Pulled from the brand portrait of Tânia Ungaro: terracotta backdrop + burgundy wardrobe.
     Use when a creative leads with photography or wants a warmer, more editorial register. */
  --terra-900: #3A2014;   /* deep shadow brown — photo background, lower half */
  --terra-700: #6B4232;   /* mid brown — photo background, upper half */
  --terra-500: #A0715A;   /* warm clay — photo background highlights, accent surfaces */
  --terra-300: #C99B7E;   /* soft terracotta — tints, washes */
  --wine-900:  #3B0D14;   /* deep wine */
  --wine-700:  #6F1622;   /* burgundy — wardrobe accent, badge highlights */
  --wine-500:  #9A2D3A;   /* burgundy bright */

  /* ---------- Semantic ---------- */
  --success: #2E9A6B;
  --warning: #C9A84C;
  --danger:  #C8442B;
  --info:    #3B7BD9;

  /* ---------- Foreground tokens ---------- */
  --fg-on-dark:        var(--cream-50);
  --fg-on-dark-muted:  var(--cream-200);
  --fg-on-dark-dim:    rgba(246,241,230,.55);
  --fg-on-light:       var(--ink-900);
  --fg-on-light-muted: var(--ink-500);
  --fg-on-light-dim:   var(--ink-300);

  /* ---------- Surfaces ---------- */
  --surface-dark:        var(--navy-900);
  --surface-dark-elev:   var(--navy-800);
  --surface-light:       var(--cream-50);
  --surface-light-elev:  #FFFFFF;
  --surface-card-dark:   var(--navy-800);

  /* ---------- Borders ---------- */
  --border-on-dark:        rgba(201,168,76,.15);
  --border-on-dark-strong: rgba(201,168,76,.32);
  --border-on-light:       rgba(10,24,48,.08);
  --border-on-light-strong:rgba(10,24,48,.16);

  /* ---------- Typography families ---------- */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;

  /* ---------- Type scale (px) ---------- */
  --fs-display:  80px;
  --fs-h1:       64px;
  --fs-h2:       44px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-body-lg:  19px;
  --fs-body:     17px;
  --fs-body-sm:  15px;
  --fs-label:    13px;
  --fs-micro:    11px;

  /* ---------- Line heights ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.15;
  --lh-base:  1.5;
  --lh-relax: 1.65;

  /* ---------- Tracking ---------- */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-base:   0;
  --tr-label:  0.14em;

  /* ---------- Spacing (8pt scale) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:  0 1px 2px rgba(10,24,48,.06), 0 12px 32px -12px rgba(10,24,48,.18);
  --shadow-pop:   0 12px 48px -8px rgba(10,24,48,.35);
  --shadow-button:0 1px 0 rgba(10,24,48,.05), 0 8px 20px -8px rgba(168,124,31,.45);
  --ring-gold:    inset 0 0 0 1px rgba(201,168,76,.4);
  --ring-focus:   0 0 0 3px rgba(201,168,76,.35);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.3,1);
  --ease-in:    cubic-bezier(.7,0,.84,0);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --content-max: 1120px;
  --content-narrow: 760px;
}

/* =============================================================
   Semantic element styles — opt in via class on a wrapper, or
   apply to body for site-wide reset.
   ============================================================= */

.rh-base,
body.rh-base {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rh-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
}

.rh-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  text-wrap: balance;
}

.rh-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 700;
  text-wrap: balance;
}

.rh-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
}

.rh-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.rh-eyebrow,
.rh-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--gold-500);
}

.rh-body { font-size: var(--fs-body); line-height: var(--lh-relax); }
.rh-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relax); }
.rh-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); }

.rh-serif { font-family: var(--font-serif); font-style: italic; }
.rh-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* =============================================================
   Reusable atoms (utility classes — composable on top of tokens)
   ============================================================= */

.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.rh-btn-primary {
  background: var(--gold-500);
  color: var(--navy-900);
  box-shadow: var(--shadow-button);
}
.rh-btn-primary:hover {
  background: var(--gold-400);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(10,24,48,.05), 0 14px 28px -8px rgba(168,124,31,.55);
}
.rh-btn-primary:active { transform: translateY(0); }

.rh-btn-secondary {
  background: transparent;
  color: var(--cream-50);
  border-color: rgba(246,241,230,.25);
}
.rh-btn-secondary:hover {
  border-color: rgba(246,241,230,.55);
  background: rgba(246,241,230,.04);
}

.rh-btn-ghost {
  background: transparent;
  color: var(--cream-50);
  padding: 10px 16px;
}
.rh-btn-ghost:hover { color: var(--gold-500); }

.rh-card {
  background: var(--surface-card-dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.rh-card-light {
  background: var(--surface-light-elev);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.rh-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border: 1px solid var(--border-on-dark);
  color: var(--gold-500);
  background: rgba(201,168,76,.06);
}

.rh-star::before {
  content: '✦';
  color: var(--gold-500);
  margin-right: 0.4em;
  font-size: 0.85em;
  vertical-align: 0.05em;
}

.rh-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(246,241,230,.04);
  border: 1px solid var(--border-on-dark);
  color: var(--cream-50);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.rh-input::placeholder { color: rgba(246,241,230,.45); }
.rh-input:focus {
  outline: none;
  border-color: var(--gold-500);
  background: rgba(246,241,230,.06);
  box-shadow: var(--ring-focus);
}

/* Hero background motif — navy w/ subtle radial */
.rh-hero-bg {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(201,168,76,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(59,86,143,.35), transparent 55%),
    var(--navy-900);
}