/* ===================================================================
   SimuladoApp — Design Tokens
   Versão: 1.0
   Anchor: #0da6f2 (brand-500)
   Direção: B2B SaaS Educational — referência Linear/Stripe/Vercel
   =================================================================== */

:root {

  /* ─── BRAND (Azul principal) ─────────────────────── */
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #b9e6fd;
  --brand-300: #7dd3fc;
  --brand-400: #38bdf8;
  --brand-500: #0da6f2;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --brand-900: #0c4a6e;
  --brand-950: #082f49;

  /* ─── NEUTROS (cinzas com viés frio/azul) ────────── */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #080d18;

  /* ─── SURFACES — Light ───────────────────────────── */
  --surface-page: #f8fafc;
  --surface-alt:  #f1f5f9;
  --surface-card: #ffffff;

  /* ─── SURFACES — Dark ────────────────────────────── */
  --surface-dark:      #0a0f1a;
  --surface-dark-alt:  #0f1829;
  --surface-dark-card: #131e30;
  --surface-overlay:   rgba(8, 13, 24, 0.75);

  /* ─── SEMÂNTICO: SUCESSO (escala completa) ────── */
  --success-bg:   #f0fdf4;  /* fundo muito sutil */
  --success-100:  #dcfce7;  /* fundo de badge/card */
  --success-400:  #4ade80;  /* texto/ícone em modo escuro */
  --success-mid:  #16a34a;  /* texto/ícone padrão, CTA */
  --success-600:  #15803d;  /* hover do CTA */
  --success-text: #14532d;  /* texto de alta intensidade */

  /* ─── SEMÂNTICAS — Atenção ───────────────────────── */
  --warning-bg:   #fffbeb;
  --warning-mid:  #d97706;
  --warning-text: #78350f;

  /* ─── SEMÂNTICAS — Erro ──────────────────────────── */
  --error-bg:   #fef2f2;
  --error-200:  #fecaca;
  --error-400:  #f87171;
  --error-500:  #ef4444;
  --error-mid:  #dc2626;
  --error-800:  #991b1b;
  --error-800-half: rgba(153, 27, 27, 0.5);
  --error-text: #7f1d1d;

  /* ─── SEMÂNTICAS — Avaliação ─────────────────────── */
  --rating:     #facc15;

  /* ─── SEMÂNTICAS — Info ──────────────────────────── */
  --info-bg:   #f0f9ff;
  --info-mid:  #0284c7;
  --info-text: #0c4a6e;

  /* ─── GRADIENTES ─────────────────────────────────── */
  --gradient-cta:       linear-gradient(135deg, #0da6f2 0%, #0284c7 100%);
  --gradient-spotlight: linear-gradient(160deg, #0f1829 0%, #0a0f1a 60%, #082f49 100%);
  --gradient-heading:   linear-gradient(90deg, #0da6f2 0%, #38bdf8 100%);
  --gradient-dark-card: linear-gradient(145deg, #131e30 0%, #0f1829 100%);

  /* ─── SOMBRAS (com tonal brand) ──────────────────── */
  --shadow-sm: 0 1px 3px rgba(13, 166, 242, 0.05),
               0 1px 2px rgba(0, 0, 0, 0.07);

  --shadow-md: 0 4px 8px  rgba(13, 166, 242, 0.07),
               0 2px 4px  rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 10px 20px rgba(13, 166, 242, 0.09),
               0 4px  8px  rgba(0, 0, 0, 0.08);

  --shadow-xl: 0 20px 40px rgba(13, 166, 242, 0.12),
               0 8px  16px rgba(0, 0, 0, 0.10);

  /* ─── ALIASES SEMÂNTICOS DE USO ──────────────────── */
  --color-bg:           var(--surface-page);
  --color-text:         var(--neutral-900);
  --color-text-muted:   var(--neutral-500);
  --color-border:       var(--neutral-200);
  --color-accent:       var(--brand-500);
  --color-accent-hover: var(--brand-600);
}

/* ─── DARK MODE ────────────────────────────────────── */
.dark {
  --color-bg:         var(--surface-dark);
  --color-text:       var(--neutral-100);
  --color-text-muted: var(--neutral-500);
  --color-border:     var(--neutral-800);
  --surface-card:     var(--surface-dark-card);
  --surface-page:     var(--surface-dark);
  --surface-alt:      var(--surface-dark-alt);

  /* Sombras mais pronunciadas em fundo escuro */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 8px  rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.50);
}

/* ─── UTILITÁRIOS PRONTOS ──────────────────────────── */

/* Heading com palavra de destaque em gradiente azul */
.text-gradient-brand {
  background: var(--gradient-heading);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Focus ring acessível padrão (use em botões e links interativos) */
.focus-ring:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}