/* ============================================================
   Avance Performance Digital — Design Tokens
   ============================================================
   Colors, typography and semantic variables.
   Import this file from any HTML artifact you build for Avance.
   ============================================================ */

/* ---------- Fonts ----------
   Primary: Satoshi — self-hosted variable TTF (weights 300–900).
   Complementary: Inter — via Google Fonts.
---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.ttf") format("truetype-variations"),
       url("fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-VariableItalic.ttf") format("truetype-variations"),
       url("fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     CORE PALETTE
     Only these colors are allowed in any Avance artifact.
     --------------------------------------------------------- */
  --avance-navy:        #100937;  /* primary brand navy — the "roxo profundo" */
  --avance-navy-deep:   #0a0a1a;  /* deep blue for gradient start */
  --avance-black:       #000000;  /* only for shadows / gradient end  */
  --avance-gold:        #b38e5a;  /* accent — CTAs, lines, highlights */
  --avance-gold-soft:   #d3b58d;  /* lighter gold for subtle tints    */
  --avance-gold-deep:   #6d4b1d;  /* deep gold — rarely used          */
  --avance-cream:       #f5f3ec;  /* off-white — text on dark, bg on light */
  --avance-white:       #ffffff;  /* pure white — use sparingly */
  --avance-gray:        #8a8a8a;  /* secondary text, legends */

  /* Card / surface tints (over dark backgrounds) */
  --avance-surface-1:   #1a1145;                       /* slight navy lift */
  --avance-surface-2:   rgba(245, 243, 236, 0.05);     /* 5% cream         */
  --avance-surface-3:   rgba(245, 243, 236, 0.08);     /* 8% cream         */
  --avance-hairline:    rgba(179, 142, 90, 0.35);      /* gold hairline    */
  --avance-hairline-soft: rgba(245, 243, 236, 0.12);   /* cream hairline   */

  /* ---------------------------------------------------------
     BACKGROUND GRADIENTS — always preferred over flat fills
     --------------------------------------------------------- */
  --avance-bg-dark:
    radial-gradient(ellipse at 30% 0%, #1a1145 0%, #100937 40%, #050510 100%);
  --avance-bg-dark-diagonal:
    linear-gradient(135deg, #100937 0%, #0a0a1a 55%, #000000 100%);
  --avance-bg-dark-vertical:
    linear-gradient(180deg, #0d1117 0%, #100937 50%, #000000 100%);
  --avance-bg-light:   var(--avance-cream);
  --avance-bg-white:   var(--avance-white);

  /* ---------------------------------------------------------
     SEMANTIC COLOR TOKENS — use these in components, not raw hex
     --------------------------------------------------------- */
  --fg-primary:         var(--avance-cream);   /* main text on dark */
  --fg-secondary:       rgba(245, 243, 236, 0.72);
  --fg-muted:           rgba(245, 243, 236, 0.52);
  --fg-accent:          var(--avance-gold);
  --fg-inverse:         var(--avance-navy);    /* text on light */
  --fg-inverse-muted:   rgba(16, 9, 55, 0.6);

  --bg-primary:         var(--avance-navy);
  --bg-elevated:        var(--avance-surface-1);
  --bg-card:            var(--avance-surface-2);
  --bg-card-hover:      var(--avance-surface-3);

  --border-default:     var(--avance-hairline-soft);
  --border-accent:      var(--avance-hairline);
  --border-strong:      rgba(179, 142, 90, 0.6);

  /* ---------------------------------------------------------
     TYPOGRAPHY STACKS
     --------------------------------------------------------- */
  --font-display:
    "Satoshi", "General Sans", "SF Pro Display",
    "Plus Jakarta Sans", "Outfit", "Geist",
    system-ui, -apple-system, sans-serif;
  --font-body:
    "Inter", "Satoshi", "SF Pro Text",
    system-ui, -apple-system, sans-serif;
  --font-mono:
    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Type scale (1920px reference, scales fine to smaller) */
  --fs-hero:        clamp(56px, 6.5vw, 120px);
  --fs-display:     clamp(44px, 4.8vw, 88px);
  --fs-h1:          clamp(36px, 3.6vw, 64px);
  --fs-h2:          clamp(28px, 2.4vw, 44px);
  --fs-h3:          clamp(22px, 1.6vw, 30px);
  --fs-h4:          20px;
  --fs-body-lg:     19px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-eyebrow:     11px;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.035em;   /* titles, tracking +2-5% */
  --tracking-xwide:   0.18em;    /* eyebrows / labels, ALL CAPS */

  /* Line-height */
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* ---------------------------------------------------------
     SPACING (8pt base, with a couple of finer steps)
     --------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ---------------------------------------------------------
     RADII — "TODAS as bordas devem ser arredondadas"
     --------------------------------------------------------- */
  --radius-xs:   8px;     /* tiny elements, chips */
  --radius-sm:   12px;    /* inputs, small cards  */
  --radius-md:   16px;    /* default card radius  */
  --radius-lg:   24px;    /* large cards, modals  */
  --radius-xl:   32px;    /* hero containers      */
  --radius-pill: 999px;   /* buttons, pills       */

  /* ---------------------------------------------------------
     ELEVATION — subtle only. Never dramatic drop-shadows.
     --------------------------------------------------------- */
  --shadow-soft:    0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
  --shadow-lifted:  0 2px 4px rgba(0,0,0,.3),  0 18px 48px rgba(0,0,0,.35);
  --shadow-gold:    0 0 0 1px rgba(179,142,90,.35), 0 8px 28px rgba(179,142,90,.18);
  --shadow-inset-hairline: inset 0 1px 0 rgba(245,243,236,.06);

  /* Motion */
  --ease-out:     cubic-bezier(.2,.7,.2,1);
  --ease-in-out:  cubic-bezier(.4,0,.2,1);
  --dur-fast:     160ms;
  --dur-base:     240ms;
  --dur-slow:     420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Use these classes (or the bare tag) to get on-brand defaults.
   ============================================================ */

html, body {
  background: var(--avance-bg-dark);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium);  letter-spacing: var(--tracking-normal); }

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: .96;
  letter-spacing: -0.03em;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}
.body-lg  { font-size: var(--fs-body-lg); line-height: 1.55; }
.body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.caption  { font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: 0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.metric-number {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 5vw, 96px);
  color: var(--fg-accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-feature-settings: "tnum";
}

/* Hairline separators */
.hairline       { height: 1px; background: var(--border-accent); border: 0; }
.hairline-soft  { height: 1px; background: var(--border-default); border: 0; }