/* Impulse Design Tokens - Fase 8 extended (from 08-LANDING-DESIGN secao 5) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ============ CORES ============ */
  /* Primaria */
  --color-primary: #FF6B35;
  --color-primary-hover: #E85A2A;
  --color-primary-active: #D14E22;
  --color-primary-soft: #FFE5DA;

  --color-navy: #1B2A4E;
  --color-navy-hover: #14203D;
  --color-navy-soft: #E4E8F1;

  /* Secundaria */
  --color-yellow: #FFC857;
  --color-yellow-soft: #FFF3D6;
  --color-teal: #2EC4B6;
  --color-teal-soft: #D6F3F0;

  /* Neutras - escala 50-950 */
  --color-white: #FFFFFF;
  --color-gray-50:  #F7F8FA;
  --color-gray-100: #EDEFF3;
  --color-gray-200: #DDE1E9;
  --color-gray-300: #C7CDD6;
  --color-gray-400: #A8AFBB;
  --color-gray-500: #8A93A2;
  --color-gray-600: #6B7486;
  --color-gray-700: #4A5264;
  --color-gray-800: #303747;
  --color-gray-900: #1C2030;
  --color-gray-950: #12151F;
  --color-black:    #0A0D14;

  /* Semanticas */
  --color-success: #22C55E;
  --color-success-soft: #DCFCE7;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-error:   #EF4444;
  --color-error-soft: #FEE2E2;
  --color-info:    #3B82F6;
  --color-info-soft: #DBEAFE;

  /* Aliases semanticos */
  --bg-app:      var(--color-gray-50);
  --bg-surface:  var(--color-white);
  --bg-elevated: var(--color-white);
  --bg-inverse:  var(--color-navy);

  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted:     var(--color-gray-500);
  --text-inverse:   var(--color-white);
  --text-brand:     var(--color-primary);

  --border-subtle:  var(--color-gray-100);
  --border-default: var(--color-gray-300);
  --border-strong:  var(--color-gray-500);
  --focus-ring:     rgba(255, 107, 53, 0.35);
  --focus-ring-lg:  rgba(255, 107, 53, 0.18);

  /* ============ SPACING (base 4px) ============ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */

  /* Section padding aliases */
  --section-y-sm: var(--space-16);  /* 64  */
  --section-y-md: var(--space-24);  /* 96  */
  --section-y-lg: var(--space-32);  /* 128 */

  /* ============ TIPOGRAFIA ============ */
  --font-headline: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala type-0 a type-10 (fluid via clamp quando relevante) */
  --type-0:  0.75rem;    /* 12 - caption */
  --type-1:  0.875rem;   /* 14 - body-sm */
  --type-2:  1rem;       /* 16 - body */
  --type-3:  1.125rem;   /* 18 - body-lg */
  --type-4:  1.25rem;    /* 20 - h5 */
  --type-5:  1.5rem;     /* 24 - h4 */
  --type-6:  1.875rem;   /* 30 - h3 */
  --type-7:  clamp(2rem, 4vw, 2.5rem);      /* 32-40 - h2 */
  --type-8:  clamp(2.5rem, 5.5vw, 3.5rem);  /* 40-56 - h1 */
  --type-9:  clamp(3rem, 6vw, 4.5rem);      /* 48-72 - display */
  --type-10: clamp(3.5rem, 7.5vw, 5.5rem);  /* 56-88 - hero */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --tracking-tightest: -0.035em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;

  --weight-regular:   400;
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ============ SHADOWS ============ */
  --shadow-xs:    0 1px 2px rgba(28, 32, 48, 0.04);
  --shadow-sm:    0 1px 2px rgba(28, 32, 48, 0.06), 0 1px 3px rgba(28, 32, 48, 0.04);
  --shadow-md:    0 4px 12px rgba(28, 32, 48, 0.08), 0 2px 4px rgba(28, 32, 48, 0.04);
  --shadow-lg:    0 12px 32px rgba(28, 32, 48, 0.12), 0 4px 8px rgba(28, 32, 48, 0.06);
  --shadow-xl:    0 24px 56px rgba(28, 32, 48, 0.18), 0 8px 16px rgba(28, 32, 48, 0.08);
  --shadow-focus: 0 0 0 4px var(--focus-ring);
  --shadow-glow:  0 8px 24px rgba(255, 107, 53, 0.28);
  --shadow-glow-primary: 0 8px 24px rgba(255, 107, 53, 0.28);
  --shadow-glow-navy:    0 8px 24px rgba(27, 42, 78, 0.28);

  /* ============ RADII ============ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ============ TRANSITIONS ============ */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast: 150ms var(--ease-in-out);
  --transition-base: 200ms var(--ease-in-out);
  --transition-slow: 400ms var(--ease-out);

  /* ============ BREAKPOINTS (uso em JS; CSS usa @media direto) ============ */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-laptop:  1024px;
  --bp-desktop: 1280px;
  --bp-wide:    1440px;

  /* ============ LAYOUT ============ */
  --container-max: 1200px;
  --container-narrow: 720px;
  --container-wide: 1440px;
  --container-padding: clamp(1.25rem, 4vw, 2rem);

  --header-height: 72px;
  --z-sticky: 40;
  --z-modal:  60;
  --z-toast:  70;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg-app);
  margin: 0;
  font-size: var(--type-2);
  line-height: var(--lh-relaxed);
  font-family: var(--font-body);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-headline);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--type-8); font-weight: var(--weight-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--type-7); font-weight: var(--weight-bold); line-height: var(--lh-snug); }
h3 { font-size: var(--type-6); font-weight: var(--weight-bold); line-height: var(--lh-snug); }
h4 { font-size: var(--type-5); font-weight: var(--weight-semibold); line-height: 1.3; }
h5 { font-size: var(--type-4); font-weight: var(--weight-semibold); line-height: 1.4; letter-spacing: 0; }

p { margin: 0; }

a { color: var(--color-navy); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }

::selection { background: var(--color-primary-soft); color: var(--color-navy); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

img { max-width: 100%; height: auto; display: block; }

/* Container helper */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Section helpers */
.section { padding-block: var(--section-y-lg); }
@media (max-width: 768px) {
  .section { padding-block: var(--section-y-sm); }
}

/* Brand class utilitaria pra CTA primario (preservado fase 7) */
.btn-brand-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.625rem 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.btn-brand-primary:hover { background: var(--color-primary-hover); }
.btn-brand-primary:active { background: var(--color-primary-active); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}