/* =========================================================
   Ato Performance — Colors & Type
   Single source of truth for tokens used across the system.
   ========================================================= */

/* ---- Fonts ---- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&family=Inter:wght@400;500;600;700&display=swap");
/* Sansation is not on Google Fonts; nearest match is Jura / Audiowide.
   We use locally-served Sansation if available, fallback to Jura. */
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@500;700&display=swap");

@font-face {
  font-family: "Sansation";
  src: local("Sansation"), url("fonts/Sansation-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: local("Sansation Bold"), url("fonts/Sansation-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ============ BRAND PALETTE ============ */
  --ato-orange:        #F97316;  /* primária — CTAs, destaques */
  --ato-orange-vivid:  #FB923C;  /* texto sobre laranja / hover claro */
  --ato-orange-deep:   #EA6B0E;  /* hover do botão primário (~10% darker) */
  --ato-orange-tint:   rgba(249,115,22,0.15); /* fundo de tag/chip */

  --midnight:          #0F172A;  /* fundo dark principal */
  --slate-800:         #1E293B;  /* card / seção secundária */
  --slate-700:         #334155;  /* bordas, separadores */
  --slate-500:         #64748B;  /* parágrafo sobre fundo claro */
  --slate-400:         #94A3B8;  /* texto secundário, legendas */
  --slate-50:          #F8FAFC;  /* fundo claro suave */
  --white:             #FFFFFF;

  /* ---- State palette ---- */
  --green-dark:        #166534;
  --green-light:       #BBF7D0;
  --red-dark:          #991B1B;
  --red-light:         #FECACA;

  /* ============ SEMANTIC (light surface) ============ */
  --bg:                var(--white);
  --bg-soft:           var(--slate-50);
  --surface:           var(--white);
  --surface-2:         var(--slate-50);
  --border:            #E2E8F0;
  --border-strong:     var(--slate-700);

  --fg:                var(--midnight);
  --fg-muted:          var(--slate-500);
  --fg-faint:          var(--slate-400);
  --fg-inverse:        var(--white);

  --accent:            var(--ato-orange);
  --accent-fg:         var(--white);
  --accent-hover:      var(--ato-orange-deep);

  --success-bg:        var(--green-dark);
  --success-fg:        var(--green-light);
  --danger-bg:         var(--red-dark);
  --danger-fg:         var(--red-light);

  /* ============ TYPOGRAPHY ============ */
  --font-display:      "Poppins", "Arial", system-ui, sans-serif;
  --font-body:         "Inter", "Arial", system-ui, sans-serif;
  --font-signature:    "Sansation", "Jura", "Poppins", sans-serif;
  --font-mono:         ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* size scale (web) */
  --fs-display:        clamp(48px, 6vw, 64px);
  --fs-h1:             clamp(36px, 4vw, 48px);
  --fs-h2:             clamp(24px, 2.4vw, 30px);
  --fs-h3:             20px;
  --fs-body:           16px;
  --fs-small:          14px;
  --fs-label:          12px;

  --lh-tight:          1.2;
  --lh-body:           1.6;
  --tracking-label:    0.05em;
  --tracking-display:  -0.01em;

  /* ============ ELEVATION / SHAPE ============ */
  --radius-xs:         4px;
  --radius-sm:         6px;
  --radius:            8px;       /* botões */
  --radius-lg:         12px;      /* cards */
  --radius-xl:         20px;
  --radius-pill:       999px;

  --shadow-xs:         0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:         0 2px 4px rgba(15, 23, 42, 0.08);
  --shadow-md:         0 6px 16px rgba(15, 23, 42, 0.10);
  --shadow-lg:         0 18px 40px -8px rgba(15, 23, 42, 0.25);
  --shadow-glow:       0 8px 24px -6px rgba(249, 115, 22, 0.45);

  /* ============ SPACING (8px base) ============ */
  --s-1:               4px;
  --s-2:               8px;
  --s-3:               12px;
  --s-4:               16px;
  --s-5:               24px;
  --s-6:               32px;
  --s-7:               48px;
  --s-8:               64px;
  --s-9:               96px;

  /* ============ MOTION ============ */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:          120ms;
  --dur:               200ms;
  --dur-slow:          400ms;
}

/* Dark surface override — apply via [data-theme="dark"] or .on-dark */
[data-theme="dark"], .on-dark {
  --bg:                var(--midnight);
  --bg-soft:           var(--slate-800);
  --surface:           var(--slate-800);
  --surface-2:         var(--midnight);
  --border:            var(--slate-700);
  --border-strong:     var(--slate-500);

  --fg:                var(--white);
  --fg-muted:          var(--slate-400);
  --fg-faint:          var(--slate-500);
  --fg-inverse:        var(--midnight);
}

/* =========================================================
   Base element styles — opt in by including this stylesheet
   ========================================================= */

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0;
}

h1     { font-size: var(--fs-h1);      font-weight: 700; }
h2     { font-size: var(--fs-h2);      font-weight: 700; }
h3     { font-size: var(--fs-h3);      font-weight: 600; font-family: var(--font-body); }
.display { font-size: var(--fs-display); font-weight: 900; line-height: var(--lh-tight); font-family: var(--font-display); letter-spacing: -0.02em; }

p      { margin: 0 0 var(--s-4); color: var(--fg); }
small  { font-size: var(--fs-small); color: var(--fg-muted); }

.label, .eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.signature {
  font-family: var(--font-signature);
  letter-spacing: 0.02em;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

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