/* ============================================================
   Round — Design tokens
   Raw palette → semantic roles. Section CSS must consume only
   the semantic layer (bottom half), never --color-* raw tokens
   directly. See round/docs/design-system.md for the full system.
   ============================================================ */

:root {
  /* ---- Raw palette ------------------------------------------------ */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;

  --color-navy-900: #0F2942;
  --color-navy-800: #15385A;
  --color-navy-700: #1B3A5F;
  --color-navy-500: #3D5A7A;

  --color-orange-100: #FBE7D8;
  --color-orange-600: #E07B3E;
  --color-orange-700: #C4602A;

  --color-cyan-700: #146271;
  --color-cyan-400: #2BB8CC;

  --color-white: #FFFFFF;

  /* ---- Semantic roles ----------------------------------------------
     Section CSS consumes these. Swapping the raw palette later only
     requires editing the block above. */
  --color-bg-base: var(--color-gray-100);
  --color-bg-surface: var(--color-gray-50);
  --color-bg-inverted: var(--color-navy-900);
  --color-bg-inverted-raised: var(--color-navy-800);

  --color-text-body: var(--color-navy-900);
  --color-text-muted: var(--color-navy-500);
  --color-text-on-inverted: var(--color-gray-100);
  --color-text-muted-on-inverted: rgba(243, 244, 246, 0.64);

  --color-accent-primary: var(--color-orange-600);
  --color-accent-primary-hover: var(--color-orange-700);
  --color-text-on-accent: var(--color-navy-900);
  --color-accent-tint: var(--color-orange-100);

  --color-accent-secondary: var(--color-cyan-400);
  --color-link-on-light: var(--color-cyan-700);

  --color-border: var(--color-gray-200);
  --color-border-on-inverted: rgba(255, 255, 255, 0.14);

  --focus-ring: var(--color-navy-900);

  /* ---- Typography ---------------------------------------------------- */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-eyebrow: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-caption: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
  --text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-h2: clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --text-h1: 60px;
  --text-display: clamp(2.75rem, 1.9rem + 4.5vw, 4.25rem);
  --text-stat: clamp(2.75rem, 2rem + 4vw, 3.875rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.08em;

  /* ---- Spacing (8px base) --------------------------------------------- */
  --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;

  --space-section: clamp(64px, 24px + 6vw, 144px);
  --container-max: 1280px;
  --container-pad: clamp(20px, 12px + 4vw, 80px);
  --card-padding: clamp(24px, 20px + 1.5vw, 32px);
  --gap-default: 24px;
  --gap-tight: 16px;
  --gap-split: 48px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(15, 41, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 41, 66, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 41, 66, 0.14);
  --shadow-accent: 0 8px 24px rgba(224, 123, 62, 0.24);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;

  /* ---- Breakpoints (referenced in comments; media queries can't read custom properties) ----
     --bp-md: 639px (max-width) also doubles as the purpose-shot
     mobile-portrait photo swap for hero/problema/solucao/round-conecta/
     cta-final, see assets/images/responsive/
     --bp-sm: 480px   --bp-md: 640px   --bp-split: 900px
     --bp-lg: 1024px  --bp-xl: 1280px  --bp-2xl: 1600px */

  /* ---- Z-index map ---------------------------------------------------
     --z-header sits ABOVE --z-mobile-menu on purpose: the header bar
     (holding the toggle button) must stay clickable above the full-screen
     mobile menu overlay, or the visible "close" (X) icon becomes an
     unclickable dead button once the menu is open. */
  --z-hero-media: 5;
  --z-hero-scrim: 15;
  --z-hero-content: 20;
  --z-whatsapp-float: 55;
  --z-mobile-menu: 70;
  --z-header: 75;
  --z-cookie-consent: 90;
}