/**
 * Granisul Stone Selection — Design System Tokens
 * WCAG 2.2 AA Compliant Palette, Scaled Typography & Accessible Focus Rings
 * Since 1983 — Vila Viçosa, Alentejo
 */

:root {
  /* ==========================================================================
     1. Superfícies & Fundo (Dark Luxury Theme)
     ========================================================================== */
  --gs-bg-primary: #0e0e0e;
  --gs-bg-surface: #171717;
  --gs-bg-card: #1c1c1b;
  --gs-bg-elevated: #242423;
  --gs-bg-overlay: rgba(14, 14, 14, 0.88);

  /* ==========================================================================
     2. Bordas & Divisores
     ========================================================================== */
  --gs-border-subtle: rgba(255, 255, 255, 0.08);
  --gs-border-medium: rgba(255, 255, 255, 0.16);
  --gs-border-strong: rgba(255, 255, 255, 0.28);
  --gs-border-gold: #c5a059;
  --gs-border-gold-subtle: rgba(197, 160, 89, 0.35);

  /* ==========================================================================
     3. Tipografia & Contrastes Acessíveis (WCAG 2.2 AA)
     Todos os contrastes validados contra fundo escuro (#0e0e0e / #1c1c1b)
     ========================================================================== */
  --gs-text-primary: #f5f5f5;      /* Ratio > 13.8:1 sobre #0e0e0e */
  --gs-text-secondary: #d1d5db;    /* Ratio > 9.6:1 (antigo #888888 ilegível) */
  --gs-text-muted: #9ca3af;        /* Ratio > 5.3:1 (limiar mínimo AA é 4.5:1) */
  --gs-text-inverse: #0e0e0e;
  --gs-text-gold: #d4af37;         /* Dourado nobre Granisul */
  --gs-text-gold-light: #f3e5ab;   /* Leitura suave de subtítulos */

  /* ==========================================================================
     4. Acentos & Cores de Estado
     ========================================================================== */
  --gs-accent-gold: #d4af37;
  --gs-accent-gold-hover: #e5c158;
  --gs-accent-gold-dark: #aa8628;
  --gs-accent-whatsapp: #25d366;
  --gs-accent-whatsapp-dark: #1e7e34;
  --gs-badge-marble: #f5c4a8;
  --gs-badge-limestone: #ffd885;
  --gs-badge-granite: #cbd5e1;

  /* ==========================================================================
     5. Foco Visível Universal (WCAG 2.4.11 / 2.4.12 Focus Appearance AA)
     ========================================================================== */
  --gs-focus-ring: #d4af37;
  --gs-focus-outline: 2px solid var(--gs-focus-ring);
  --gs-focus-offset: 3px;
  --gs-focus-shadow: 0 0 0 4px rgba(212, 175, 55, 0.35);

  /* ==========================================================================
     6. Famílias Tipográficas
     ========================================================================== */
  --gs-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gs-font-display: 'Syne', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ==========================================================================
     7. Raios & Transições
     ========================================================================== */
  --gs-radius-sm: 4px;
  --gs-radius-md: 8px;
  --gs-radius-lg: 12px;
  --gs-radius-full: 9999px;

  --gs-transition-fast: 0.15s ease;
  --gs-transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     8. Compatibilidade Retroativa com Nomes Legados
     ========================================================================== */
  --color-bg-primary: var(--gs-bg-primary);
  --color-bg-secondary: var(--gs-bg-surface);
  --color-bg-card: var(--gs-bg-card);
  --color-text-main: var(--gs-text-primary);
  --color-text-muted: var(--gs-text-secondary);
  --color-accent-gold: var(--gs-accent-gold);
  --color-accent-gold-hover: var(--gs-accent-gold-hover);
  --color-border: var(--gs-border-subtle);
  --font-heading: var(--gs-font-sans);
  --font-display: var(--gs-font-display);
  --font-body: var(--gs-font-sans);
  --font-primary: var(--gs-font-sans);
  --max-width-container: 1400px;
  --transition-smooth: var(--gs-transition-normal);
}

/* Regra Universal de Foco Visível para Teclado (Acessibilidade) */
:focus-visible {
  outline: var(--gs-focus-outline) !important;
  outline-offset: var(--gs-focus-offset) !important;
  box-shadow: var(--gs-focus-shadow) !important;
}

/* Link de Salto de Conteúdo (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
  position: absolute;
  top: -60px;
  left: 20px;
  background: var(--gs-accent-gold);
  color: var(--gs-text-inverse);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--gs-radius-md);
  z-index: 999999;
  text-decoration: none;
  transition: top var(--gs-transition-fast);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 20px;
}