/* ============================================================
   DS-APPLE — Design Tokens
   Inspirado na Apple.com | Criado em 2026
   ============================================================ */

:root {

    /* ──────────────────────────────────────────
     PALETA DE CORES — Apple Design Language
  ─────────────────────────────────────────── */

    /* Fundos */
    --color-bg-primary: #ffffff;
    /* Branco puro — seções principais */
    --color-bg-secondary: #f5f5f7;
    /* Cinza suave — seções alternadas */
    --color-bg-dark: #000000;
    /* Preto — hero sections / darkmode */
    --color-bg-dark-alt: #1d1d1f;
    /* Cinza meia-noite — overlays */
    --color-bg-card: #ffffff;
    /* Card em fundo claro */
    --color-bg-card-dark: #1c1c1e;
    /* Card em fundo escuro */
    --color-bg-card-gray: #f5f5f7;
    /* Card cinza neutro */
    --color-bg-nav: rgba(255, 255, 255, 0.85);
    /* Header translúcido — claro */
    --color-bg-nav-dark: rgba(29, 29, 31, 0.9);
    /* Header translúcido — escuro */

    /* Texto */
    --color-text-primary: #1d1d1f;
    /* Corpo e títulos em fundos claros */
    --color-text-secondary: #6e6e73;
    /* Subtítulos, legendas, apoio */
    --color-text-tertiary: #86868b;
    /* Notas de rodapé, metadados */
    --color-text-on-dark: #f5f5f7;
    /* Corpo em fundos escuros */
    --color-text-on-dark-muted: #a1a1a6;
    /* Apoio em fundos escuros */
    --color-text-white: #ffffff;

    /* Marca / Interação */
    --color-accent: #0071e3;
    /* Azul Apple — CTA primário */
    --color-accent-hover: #0077ed;
    --color-accent-active: #006edb;
    --color-accent-dark: #2997ff;
    /* Azul Apple — fundos escuros */
    --color-accent-dark-hover: #30a0ff;

    /* Bordas e Divisores */
    --color-border-light: #d2d2d7;
    /* Borda sutil em fundo claro */
    --color-border-dark: #424245;
    /* Borda sutil em fundo escuro */
    --color-divider: rgba(0, 0, 0, 0.1);
    --color-divider-dark: rgba(255, 255, 255, 0.12);

    /* Gradientes */
    --gradient-hero-dark: linear-gradient(180deg, #1a1a2e 0%, #000000 100%);
    --gradient-hero-blue: linear-gradient(135deg, #0a1628 0%, #001d3d 50%, #000000 100%);
    --gradient-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    --gradient-text-shimmer: linear-gradient(90deg, #1d1d1f 0%, #6e6e73 50%, #1d1d1f 100%);

    /* Estados */
    --color-success: #34c759;
    --color-warning: #ff9f0a;
    --color-error: #ff3b30;
    --color-info: #0071e3;

    /* ──────────────────────────────────────────
     TIPOGRAFIA — SF Pro Display / SF Pro Text
  ─────────────────────────────────────────── */

    /* Famílias */
    --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-rounded: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Courier New", monospace;

    /* Tamanhos — escala modular Apple */
    --text-hero-xl: clamp(3rem, 8vw, 7rem);
    /* ~112px → hero title XL */
    --text-hero: clamp(2.5rem, 6vw, 5.5rem);
    /* ~88px  → hero title */
    --text-display: clamp(2rem, 4.5vw, 4rem);
    /* ~64px  → section headline */
    --text-title-xl: clamp(1.75rem, 3.5vw, 3rem);
    /* ~48px  → large titles */
    --text-title-lg: clamp(1.5rem, 2.8vw, 2.5rem);
    /* ~40px  → card/section titles */
    --text-title: clamp(1.25rem, 2.2vw, 1.75rem);
    /* ~28px → sub-titles */
    --text-headline: 1.1875rem;
    /* ~19px  → headline body */
    --text-body-lg: 1.0625rem;
    /* ~17px  → corpo principal */
    --text-body: 1rem;
    /* 16px   → corpo padrão */
    --text-callout: 0.9375rem;
    /* ~15px  → callout */
    --text-caption: 0.8125rem;
    /* ~13px  → legendas */
    --text-footnote: 0.75rem;
    /* ~12px  → notas de rodapé */
    --text-micro: 0.6875rem;
    /* ~11px  → micro labels */

    /* Pesos */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --font-weight-black: 900;

    /* Alturas de linha */
    --line-height-hero: 1.05;
    --line-height-display: 1.08;
    --line-height-title: 1.14;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --line-height-relaxed: 1.75;

    /* Espaçamento de letras */
    --letter-spacing-tight: -0.015em;
    --letter-spacing-display: -0.022em;
    --letter-spacing-hero: -0.03em;
    --letter-spacing-caps: 0.06em;

    /* ──────────────────────────────────────────
     ESPAÇAMENTO — Escala 8pt Grid
  ─────────────────────────────────────────── */

    --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 */

    /* Padding de seções */
    --section-padding-y: clamp(3rem, 8vw, 7rem);
    --section-padding-hero-y: clamp(5rem, 12vw, 12rem);

    /* ──────────────────────────────────────────
     LAYOUT — Contenedores
  ─────────────────────────────────────────── */

    --container-xs: 480px;
    --container-sm: 660px;
    --container-md: 860px;
    --container-lg: 980px;
    --container-xl: 1200px;
    --container-2xl: 1440px;

    --container-padding: clamp(1rem, 5vw, 2rem);

    /* ──────────────────────────────────────────
     BORDAS E RAIOS
  ─────────────────────────────────────────── */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* ──────────────────────────────────────────
     SOMBRAS
  ─────────────────────────────────────────── */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.14);

    /* ──────────────────────────────────────────
     BACKDROP / BLUR
  ─────────────────────────────────────────── */

    --blur-sm: 4px;
    --blur-md: 12px;
    --blur-lg: 20px;
    --blur-xl: 32px;

    /* ──────────────────────────────────────────
     TRANSIÇÕES E ANIMAÇÕES
  ─────────────────────────────────────────── */

    --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    --duration-slowest: 900ms;

    /* ──────────────────────────────────────────
     Z-INDEX
  ─────────────────────────────────────────── */

    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-nav: 900;

}