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

:root {

   /* ──────────────────────────────────────────
     PALETA DE CORES — AsticTO
  ─────────────────────────────────────────── */

   /* Marca */
   --brand-blue-900: #122857;
   --brand-blue-800: #1f3d7b;
   --brand-blue-700: #24478f;
   --brand-blue-600: #3366cc;

   --brand-gold-900: #8a6f00;
   --brand-gold-700: #cba409;
   --brand-gold-700-alt: #e0b60c;
   --brand-gold-600: #e3b80b;
   --brand-gold-500: #f4c713;

   --brand-green-500: #15a266;

   --ink-800: #333333;
   --gray-600: #666666;
   --gray-500: #555555;
   --gray-400: #9e9e9e;
   --gray-200: #e5e5e5;

   --surface-100: #eef2f3;
   --surface-050: #f0f5f7;
   --white: #ffffff;

   /* Fundos */
   --color-bg-primary: var(--white);
   --color-bg-secondary: var(--surface-100);
   --color-bg-dark: var(--brand-blue-900);
   --color-bg-dark-alt: var(--brand-blue-700);
   --color-bg-card: var(--white);
   --color-bg-card-dark: var(--brand-blue-800);
   --color-bg-card-gray: var(--surface-050);
   --color-bg-nav: rgba(255, 255, 255, 0.92);
   --color-bg-nav-dark: rgba(18, 40, 87, 0.9);

   /* Texto */
   --color-text-primary: var(--brand-blue-900);
   --color-text-body: var(--ink-800);
   --color-text-secondary: var(--gray-600);
   --color-text-tertiary: var(--gray-500);
   --color-text-on-dark: var(--white);
   --color-text-on-dark-muted: rgba(255, 255, 255, 0.78);
   --color-text-white: var(--white);

   /* Marca / Interação */
   --color-accent: var(--brand-blue-700);
   --color-accent-hover: var(--brand-blue-800);
   --color-accent-active: var(--brand-blue-900);
   --color-accent-dark: var(--brand-gold-500);
   --color-accent-dark-hover: var(--brand-gold-600);
   --color-cta-primary: var(--brand-gold-500);
   --color-cta-hover: var(--brand-gold-600);
   --color-cta-active: var(--brand-gold-700);
   --color-link-underline: var(--brand-gold-500);

   /* Bordas e Divisores */
   --color-border-light: var(--gray-200);
   --color-border-dark: rgba(255, 255, 255, 0.22);
   --color-divider: rgba(18, 40, 87, 0.1);
   --color-divider-dark: rgba(255, 255, 255, 0.16);

   /* Gradientes */
   --gradient-hero-dark: linear-gradient(180deg, var(--brand-blue-800) 0%, var(--brand-blue-900) 100%);
   --gradient-hero-blue: linear-gradient(135deg, var(--brand-blue-900) 0%, var(--brand-blue-800) 45%, var(--brand-blue-700) 100%);
   --gradient-cta-brand: linear-gradient(120deg, var(--brand-gold-500) 0%, var(--brand-gold-600) 42%, var(--brand-blue-700) 100%);
   --gradient-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
   --gradient-text-shimmer: linear-gradient(90deg, var(--brand-blue-900) 0%, var(--brand-blue-700) 50%, var(--brand-blue-900) 100%);

   /* Estados */
   --color-success: var(--brand-green-500);
   --color-warning: var(--brand-gold-600);
   --color-error: #c0392b;
   --color-info: var(--brand-blue-600);

   /* ──────────────────────────────────────────
     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, 5vw, 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;

}