/* ============================================================
   10Passos × GePro · Design System (unified)
   ============================================================
   Single source of truth for the visual identity across the
   marketing site (10Passos) and the app (GePro).

   Brands:
   - 10Passos (marca-mãe)  — Bodoni didone, big "10" + caps wordmark
   - GePro    (marca-irmã) — Bodoni "Ge" + italic "Pro" gold

   Tokens cover: colors, type, spacing, radii, shadows, motion.
   Components cover: buttons, inputs, cards, badges, tables,
   wordmarks. Names are kept backwards-compatible with the
   existing code so we don't break anything that already binds
   to these CSS variables or class names.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   01 · TOKENS — colors, type, space, radii, motion
   ============================================================ */
:root {
  /* -------- Brand color (gold family) -------- */
  --gold-50:  #FBF3DE;
  --gold-100: #F5E2A8;
  --gold-200: #EDCB68;
  --gold-300: #E2B83A;
  --gold-400: #DAA520;   /* WORDMARK GOLD — the brand gold */
  --gold-500: #C99219;
  --gold-600: #A87A10;
  --gold-700: #8A630B;
  --gold-800: #6B4D08;

  /* The energetic amber (used in CTAs on marketing) */
  --amber-300: #FFC838;
  --amber-400: #FFB600;
  --amber-500: #E89F00;

  /* Copper (warm accent, support) */
  --copper-300: #E48E3A;
  --copper-400: #D6771F;
  --copper-500: #B5651D;

  /* -------- Neutrals — ink to paper -------- */
  --ink-900: #0E0F12;    /* primary dark surface */
  --ink-800: #15161A;    /* elevated surface */
  --ink-700: #1C1D22;    /* deepest elevated */
  --ink-600: #26282E;
  --ink-500: #3A3D44;

  --paper-100: #F4EFDF;  /* primary light surface (marfim) */
  --paper-50:  #FAF6EB;
  --paper-200: #ECE4CC;

  --white: #FFFFFF;

  /* Semantic surfaces (dark theme default) */
  --bg:           var(--ink-900);
  --bg-elev-1:    var(--ink-800);
  --bg-elev-2:    var(--ink-700);
  --bg-elev-3:    var(--ink-600);
  --surface-light: var(--paper-100);

  /* Foreground colors */
  --fg:           var(--paper-100);
  --fg-muted:     rgba(244,239,223, 0.72);
  --fg-subtle:    rgba(244,239,223, 0.50);
  --fg-faint:     rgba(244,239,223, 0.30);

  --fg-on-light:        var(--ink-900);
  --fg-on-light-muted:  rgba(14,15,18, 0.70);
  --fg-on-light-subtle: rgba(14,15,18, 0.48);

  --fg-on-brand:  var(--ink-900);    /* gold buttons → ink text */

  /* Borders & dividers */
  --border:        rgba(244,239,223, 0.10);
  --border-strong: rgba(244,239,223, 0.18);
  --divider:       rgba(244,239,223, 0.06);
  --border-light:  rgba(14,15,18, 0.10);

  /* Brand role aliases — what code reads as "brand color" */
  --brand:         var(--gold-400);
  --brand-hover:   var(--gold-500);
  --brand-soft:    rgba(218,165,32, 0.12);
  --brand-glow:    rgba(218,165,32, 0.18);

  /* Status colors */
  --green-400:     #5BB48F;
  --green-500:     #3D9B73;
  --green-soft:    rgba(91,180,143, 0.10);

  --red-400:       #E5645A;
  --red-500:       #C9483F;
  --red-soft:      rgba(229,100,90, 0.10);

  --blue-400:      #6BA4E5;
  --blue-soft:     rgba(107,164,229, 0.10);

  --purple-400:    #A78BFA;
  --purple-soft:   rgba(167,139,250, 0.10);

  /* -------- Type families -------- */
  --font-serif:   'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-display: 'Helvetica Neue', Helvetica, 'Arial Black', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* Type scale */
  --fs-9:   9px;
  --fs-10:  10px;
  --fs-11:  11px;
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-22:  22px;
  --fs-24:  24px;
  --fs-28:  28px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-48:  48px;
  --fs-56:  56px;
  --fs-72:  72px;
  --fs-96:  96px;
  --fs-128: 128px;

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --tracking-tight:    -0.025em;
  --tracking-display:  -0.035em;
  --tracking-loose:    0.18em;
  --tracking-mono:     0.22em;

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

  /* -------- Radii -------- */
  --r-4:  4px;
  --r-6:  6px;
  --r-8:  8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-18: 18px;
  --r-22: 22px;
  --r-pill: 999px;

  /* -------- Shadows -------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:    0 4px 18px rgba(0,0,0,0.30);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.45);
  --shadow-xl:    0 24px 80px rgba(0,0,0,0.55);
  --shadow-brand: 0 8px 24px rgba(218,165,32,0.25);

  /* -------- Motion -------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* -------- Legacy aliases (keep for back-compat) -------- */
  --ouro:        var(--amber-400);   /* old code reads --ouro */
  --ouro-rico:   var(--gold-400);
  --ouro-quente: var(--amber-300);
  --ouro-cobre:  var(--copper-400);
  --preto:       #000000;
  --preto-soft:  var(--ink-900);
  --preto-card:  var(--ink-800);
  --preto-borda: var(--ink-700);
  --texto-inv:   var(--fg);
  --texto-dim:   var(--fg-subtle);
  --texto-muted: var(--fg-faint);
  --verde:       var(--green-500);
  --vermelho:    var(--red-500);
  --grad-ouro:   linear-gradient(135deg, var(--amber-300), var(--gold-400));
  --grad-ouro-h: linear-gradient(135deg, var(--amber-400), var(--gold-500));
  --r:           var(--r-10);
  --r2:          var(--r-18);
  --pill:        var(--r-pill);
  --fh:          var(--font-sans);
}

/* ============================================================
   02 · BASE — reset, body, typography defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* Editorial italic helper — used inside headings */
.em, em.em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}

/* ============================================================
   03 · BRAND MARKS — pure CSS wordmarks
   ============================================================
   .ds-10p   → 10Passos.com (didone)
   .ds-gepro → GePro (Direction D — Ge romano + Pro italic gold)
   Size variants: -xs -sm -md -lg -xl, default = md
   Background variants: .on-dark (default) / .on-light
   ============================================================ */

/* GePro wordmark */
.ds-gepro {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  color: var(--fg);
}
.ds-gepro::before { content: 'Ge'; }
.ds-gepro::after {
  content: 'Pro';
  font-weight: 600;
  font-style: italic;
  color: var(--gold-400);
  font-size: 0.85em;
  letter-spacing: -0.01em;
  margin-left: 0.04em;
}
.ds-gepro.on-light { color: var(--ink-900); }
.ds-gepro.size-xs { font-size: 22px; }
.ds-gepro.size-sm { font-size: 36px; }
.ds-gepro.size-md { font-size: 64px; }
.ds-gepro.size-lg { font-size: 120px; }
.ds-gepro.size-xl { font-size: 168px; }

/* GePro app-icon (used for favicons / avatars / PWA) */
.ds-gepro-icon {
  display: grid;
  place-items: center;
  background: var(--ink-900);
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
  letter-spacing: -0.04em;
  border-radius: 22%;
}
.ds-gepro-icon::before { content: 'Ge'; }
.ds-gepro-icon.size-16  { width:16px;  height:16px;  border-radius:4px;  font-size:11px; }
.ds-gepro-icon.size-24  { width:24px;  height:24px;  border-radius:5px;  font-size:15px; }
.ds-gepro-icon.size-32  { width:32px;  height:32px;  border-radius:7px;  font-size:20px; }
.ds-gepro-icon.size-48  { width:48px;  height:48px;  border-radius:11px; font-size:30px; }
.ds-gepro-icon.size-64  { width:64px;  height:64px;  border-radius:14px; font-size:40px; }
.ds-gepro-icon.size-96  { width:96px;  height:96px;  border-radius:22px; font-size:58px; }
.ds-gepro-icon.size-160 { width:160px; height:160px; border-radius:36px; font-size:96px; }

/* 10Passos wordmark — keeps original didone equity. PNG is canonical;
   this CSS render is for when an inline mark is more practical. */
.ds-10p {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 0.85;
  display: inline-flex;
  align-items: baseline;
  color: var(--fg);
}
.ds-10p::before {
  content: '10';
  letter-spacing: -0.07em;
  font-variant-numeric: lining-nums;
}
.ds-10p::after {
  content: 'Passos.com';
  font-size: 0.54em;
  color: var(--gold-400);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-left: 0.02em;
}
.ds-10p.on-light { color: var(--ink-900); }
.ds-10p.size-xs { font-size: 24px; }
.ds-10p.size-sm { font-size: 40px; }
.ds-10p.size-md { font-size: 64px; }
.ds-10p.size-lg { font-size: 120px; }

/* ============================================================
   04 · TYPOGRAPHY — display + body
   ============================================================ */
.ds-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brand);
}

.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ds-h1, h1.ds {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.ds-h1 em, h1.ds em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}

.ds-h2, h2.ds {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
}
.ds-h2 em, h2.ds em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}

.ds-h3, h3.ds {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}

.ds-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  max-width: 60ch;
}

.ds-tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-11);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ============================================================
   05 · BUTTONS — primary, ghost, link
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  background: transparent;
  color: inherit;
}
.ds-btn-primary {
  background: var(--gold-400);
  color: var(--ink-900);
}
.ds-btn-primary:hover {
  background: var(--gold-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}
.ds-btn-ghost {
  border-color: var(--border);
  color: var(--fg-muted);
}
.ds-btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.ds-btn-ghost-light {
  border-color: var(--border-light);
  color: var(--fg-on-light-muted);
}
.ds-btn-ghost-light:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.ds-btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--brand);
  font-weight: 600;
}
.ds-btn-link:hover { text-decoration: underline; }

.ds-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   06 · INPUTS — form fields
   ============================================================ */
.ds-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--fg);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
  border-radius: 0;
  -webkit-appearance: none;
}
.ds-input:focus { border-bottom-color: var(--brand); }
.ds-input::placeholder { color: var(--fg-subtle); font-weight: 400; }

.ds-input-boxed {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-8);
  padding: 12px 14px;
}
.ds-input-boxed:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.ds-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--fg-subtle);
  margin-bottom: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   07 · CARDS — surfaces
   ============================================================ */
.ds-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  padding: var(--s-6);
}
.ds-card-light {
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  border-radius: var(--r-14);
  padding: var(--s-6);
  color: var(--fg-on-light);
}
.ds-card-elev {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   08 · BADGES & CHIPS
   ============================================================ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.ds-badge-brand {
  background: var(--brand-soft);
  border-color: rgba(218,165,32, 0.30);
  color: var(--brand);
}
.ds-badge-success {
  background: var(--green-soft);
  border-color: rgba(91,180,143, 0.30);
  color: var(--green-400);
}
.ds-badge-danger {
  background: var(--red-soft);
  border-color: rgba(229,100,90, 0.30);
  color: var(--red-400);
}
.ds-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   09 · LAYOUT HELPERS
   ============================================================ */
.ds-container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
.ds-stack > * + * { margin-top: var(--s-4); }
.ds-stack-lg > * + * { margin-top: var(--s-8); }
.ds-row { display: flex; align-items: center; gap: var(--s-3); }
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
@media(max-width: 880px){
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   10 · DIVIDERS
   ============================================================ */
.ds-divider {
  height: 1px;
  background: var(--border);
  margin: var(--s-8) 0;
  border: 0;
}
.ds-divider-strong {
  height: 1px;
  background: var(--border-strong);
  margin: var(--s-8) 0;
  border: 0;
}

/* ============================================================
   11 · MARKETING — ambient & section helpers (10Passos)
   ============================================================ */
.ds-ambient::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 600px at 85% 10%, rgba(218,165,32, 0.10), transparent 55%),
    radial-gradient(700px 500px at 10% 90%, rgba(214,119,31, 0.05), transparent 60%);
}
.ds-section {
  padding: clamp(64px, 10vh, 140px) 0;
  position: relative;
}

/* ============================================================
   12 · A11Y & FOCUS
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-4);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   13 · LEGACY OVERRIDES — keep existing pages cohesive
   ============================================================
   These match class names that already exist in index.html /
   assinar.html / app.html so the DS visually unifies them
   without requiring a full HTML rewrite.
   ============================================================ */

/* Marketing buttons (index.html, assinar.html) */
.btn-primary {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  background: var(--gold-400) !important;
  color: var(--ink-900) !important;
  padding: 14px 26px !important;
  border-radius: var(--r-8) !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out) !important;
}
.btn-primary:hover {
  background: var(--gold-500) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand) !important;
}
.btn-ghost {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--fg-muted) !important;
  padding: 14px 22px !important;
  border-radius: var(--r-8) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
}
.btn-ghost:hover {
  color: var(--fg) !important;
  border-color: var(--border-strong) !important;
}

/* Marketing nav (10Passos site) */
.nav-links a {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--fg-subtle) !important;
}
.nav-links a:hover { color: var(--brand) !important; }

.btn-nav-ghost {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  background: transparent !important;
}
.btn-nav-ghost:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

.btn-nav-acesso {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--ink-900) !important;
  background: var(--gold-400) !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
}
.btn-nav-acesso:hover {
  background: var(--gold-500) !important;
  box-shadow: var(--shadow-brand);
}

/* Marketing titles — switch to italic Bodoni for the highlighted word */
.hero-title em,
.section-title .g,
.section-title em {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--gold-400) !important;
}

.hero-eyebrow-text,
.section-label,
.brands-strip-label {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   END OF DESIGN SYSTEM
   ============================================================ */