/* ============================================================
   STACKO | Design Tokens
   Sistema de design premium. Dark mode, alto contraste,
   azul royal usado com disciplina (regra 20% / Louis Vuitton).
   ============================================================ */

:root {
  /* --- Cores base: preto profundo → grafite --- */
  --color-black: #000000;
  --bg-base: #050506;          /* fundo principal, preto profundo */
  --bg-elevated: #0a0a0c;      /* superfícies elevadas (cards) */
  --bg-elevated-2: #101014;    /* superfícies mais altas / hover */
  --bg-glass: rgba(14, 14, 18, 0.6);

  /* --- Grafite / neutros --- */
  --graphite-900: #0e0e12;
  --graphite-800: #17171c;
  --graphite-700: #1f1f26;
  --graphite-600: #2a2a32;
  --graphite-500: #3a3a44;
  --graphite-400: #55555f;

  /* --- Texto --- */
  --text-primary: #f5f5f7;     /* branco quase puro */
  --text-secondary: #a1a1aa;   /* cinza médio */
  --text-tertiary: #6b6b74;    /* cinza apagado, legendas */
  --text-inverse: #050506;

  /* --- Azul royal: o acento estratégico (usado ~20%) --- */
  /* Base de referência: azul neon futurista #0000ff.
     Variações mantidas BEM próximas da base — elétricas, pouco clareadas. */
  --royal: #0000ff;            /* referência: azul neon puro (rgb 0,0,255) */
  --royal-bright: #1a1aff;     /* base levemente clareada — brilho/hover neon */
  --royal-soft: #3d3dff;       /* mínimo clareamento p/ leitura sobre o preto */
  --royal-deep: #0000cc;       /* base escurecida ~20% — profundidade */
  --royal-glow: rgba(0, 0, 255, 0.6);
  --royal-glow-soft: rgba(0, 0, 255, 0.22);
  --royal-tint: rgba(0, 0, 255, 0.14);

  /* --- Bordas / linhas --- */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-royal: rgba(0, 0, 255, 0.55);   /* derivado da base #0000ff */

  /* --- Tipografia --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-feature: 'cv02', 'cv03', 'cv04', 'cv11';

  /* Escala tipográfica (fluida, clamp) */
  --fs-display: clamp(2.75rem, 6vw, 5.25rem);   /* hero */
  --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2: clamp(1.85rem, 3.2vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-height / tracking */
  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.6;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.14em;

  /* --- Espaçamento (escala 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(5rem, 10vw, 9rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Raios --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  /* --- Sombras / glow --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --glow-royal: 0 0 40px var(--royal-glow-soft);
  --glow-royal-strong: 0 0 60px rgba(0, 0, 255, 0.32);

  /* --- Motion (Apple / Linear feel) --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;
  --dur-slower: 1s;

  /* --- Camadas --- */
  --z-nav: 1000;
  --z-overlay: 900;
  --z-glow: 1;
}