/* ============================================================
   MotoChefe Calculadora — Design Tokens
   Extraídos da identidade da marca (logo monocromático,
   posicionamento moderno-urbano-energético).
   ============================================================ */

:root {
  /* === BRAND IDENTITY === */
  --mc-black: #0A0A0A;
  --mc-white: #FFFFFF;

  /* === SURFACES (dark premium) === */
  --bg-0: #08080A;          /* canvas — quase preto */
  --bg-1: #101013;          /* surface base */
  --bg-2: #16161A;          /* surface elevated */
  --bg-3: #1E1E23;          /* surface high */
  --bg-overlay: rgba(8, 8, 10, 0.74);

  /* === LINES & DIVIDERS === */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.18);

  /* === TEXT === */
  --text-1: #FFFFFF;
  --text-2: #B6B6BE;
  --text-3: #7C7C84;
  --text-disabled: #44444A;

  /* === ACCENTS — Paleta dourada MotoChefe === */
  --accent-electric: #A8966A;          /* dourado médio — utility (badges, borders, CTA) */
  --accent-electric-soft: #C9B98C;     /* dourado claro */
  --accent-savings: #C9B98C;           /* champagne — hero highlight */
  --accent-savings-soft: #E0D2A5;      /* champagne claro */
  --accent-combustion: #C76B58;        /* cobre — combustão (negativo) */
  --accent-combustion-soft: #D88A78;
  --mc-gold-deep: #876F36;             /* dourado profundo — hover/active */
  --mc-gold-mute: rgba(168, 150, 106, 0.16);

  /* === GLOWS === */
  --glow-electric: 0 0 0 1px rgba(168, 150, 106, 0.28), 0 0 32px rgba(168, 150, 106, 0.22);
  --glow-savings:  0 0 0 1px rgba(201, 185, 140, 0.30), 0 0 36px rgba(201, 185, 140, 0.20);

  /* === GRADIENTS === */
  --grad-bg-hero:
    radial-gradient(80% 60% at 50% -10%, rgba(168, 150, 106, 0.10) 0%, rgba(168, 150, 106, 0) 60%),
    radial-gradient(60% 40% at 90% 100%, rgba(135, 111, 54, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, #08080A 0%, #0B0B0E 100%);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0) 100%);
  --grad-electric: linear-gradient(135deg, #C9B98C 0%, #876F36 100%);
  --grad-savings:  linear-gradient(135deg, #E0D2A5 0%, #A8966A 100%);

  /* === SHADOWS === */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 72px rgba(0, 0, 0, 0.65);

  /* === TYPOGRAPHY === */
  --font-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter',   system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Fluid scale (Utopia-style) */
  --step--2: clamp(0.78rem, 0.76rem + 0.10vw, 0.83rem);
  --step--1: clamp(0.88rem, 0.83rem + 0.25vw, 1.00rem);
  --step-0:  clamp(1.00rem, 0.91rem + 0.45vw, 1.20rem);
  --step-1:  clamp(1.13rem, 0.99rem + 0.71vw, 1.44rem);
  --step-2:  clamp(1.27rem, 1.06rem + 1.06vw, 1.73rem);
  --step-3:  clamp(1.42rem, 1.11rem + 1.55vw, 2.07rem);
  --step-4:  clamp(1.60rem, 1.15rem + 2.22vw, 2.49rem);
  --step-5:  clamp(1.80rem, 1.18rem + 3.12vw, 2.99rem);
  --step-6:  clamp(2.03rem, 1.14rem + 4.42vw, 3.58rem);
  --step-7:  clamp(2.28rem, 1.06rem + 6.07vw, 4.30rem);

  /* === SPACE === */
  --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;

  /* === RADIUS === */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 22px;
  --r-5: 28px;
  --r-pill: 999px;

  /* === MOTION === */
  --d-instant: 90ms;
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 480ms;
  --d-deliberate: 720ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX === */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 20;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;

  /* === LAYOUT === */
  --container: 1180px;
  --content: 720px;
  --header-h: 72px;
}

/* Light mode override (future-proof; default mantém dark) */
@media (prefers-color-scheme: light) {
  /* Mantemos dark sempre por consistência de marca premium */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-deliberate: 1ms;
  }
}