/* ============================================================
   [infiniDim*] — DESIGN SYSTEM v1.0
   Don't Panic. We build dimensions.
   ------------------------------------------------------------
   Uso: importe este arquivo ANTES do CSS da página.
   Todos os componentes devem consumir estas variáveis —
   nenhuma cor/fonte/spacing hardcoded fora daqui.
   ============================================================ */

/* ---------- FONTES ----------
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
*/

:root {
  /* ===== CORES — PALETA NEBULA ===== */
  /* Backgrounds (dark-first) */
  --id-bg:        #0A0A14;   /* Void — fundo principal */
  --id-bg-2:      #0E0E1A;   /* Space — painéis, cards */
  --id-bg-3:      #151525;   /* Nebula bg — superfícies elevadas */

  /* Marca */
  --id-violet:    #7C6CF0;   /* Violet — cor primária da marca */
  --id-cyan:      #00E5C7;   /* Cyan — acento, colchetes, CTAs */
  --id-cyan-dark: #0BBFA6;   /* Cyan ajustado p/ fundos claros (contraste) */

  /* Texto */
  --id-text:      #E4E2F0;   /* Starlight — texto principal */
  --id-muted:     #8A88A8;   /* texto secundário */
  --id-dim:       #555370;   /* texto terciário, labels */

  /* Semânticas */
  --id-success:   #3DDC84;
  --id-warning:   #FFC857;
  --id-error:     #FF6B8A;
  --id-info:      #4F7CFF;

  /* Bordas e efeitos */
  --id-border:        rgba(255,255,255,0.05);
  --id-border-strong: rgba(255,255,255,0.10);
  --id-glow-cyan:     rgba(0,229,199,0.15);
  --id-glow-violet:   rgba(124,108,240,0.12);

  /* ===== TIPOGRAFIA ===== */
  --id-font-display: 'Sora', sans-serif;        /* títulos, wordmark */
  --id-font-body:    'DM Sans', sans-serif;     /* corpo, UI */
  --id-font-mono:    'JetBrains Mono', monospace; /* código, labels, colchetes */

  /* Escala tipográfica (mobile-first; ajustar em @media) */
  --id-text-xs:   0.75rem;   /* 12 — labels mono */
  --id-text-sm:   0.875rem;  /* 14 — secundário */
  --id-text-base: 1rem;      /* 16 — corpo */
  --id-text-lg:   1.125rem;  /* 18 — lead */
  --id-text-xl:   1.5rem;    /* 24 — h3 */
  --id-text-2xl:  2rem;      /* 32 — h2 */
  --id-text-3xl:  2.75rem;   /* 44 — h1 mobile */
  --id-text-4xl:  3.5rem;    /* 56 — h1 desktop */

  /* ===== ESPAÇAMENTO (base 4px) ===== */
  --id-sp-1: 4px;  --id-sp-2: 8px;   --id-sp-3: 12px;
  --id-sp-4: 16px; --id-sp-6: 24px;  --id-sp-8: 32px;
  --id-sp-12: 48px; --id-sp-16: 64px; --id-sp-24: 96px;

  /* ===== RAIOS ===== */
  --id-radius-sm: 8px;
  --id-radius-md: 12px;
  --id-radius-lg: 16px;
  --id-radius-xl: 24px;

  /* ===== TRANSIÇÕES ===== */
  --id-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --id-t-fast: 150ms var(--id-ease);
  --id-t-med:  300ms var(--id-ease);
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body.id-theme {
  background: var(--id-bg);
  color: var(--id-text);
  font-family: var(--id-font-body);
  font-size: var(--id-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.id-theme h1, .id-theme h2, .id-theme h3 {
  font-family: var(--id-font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.id-theme h1 { font-size: var(--id-text-3xl); font-weight: 700; }
.id-theme h2 { font-size: var(--id-text-2xl); font-weight: 600; }
.id-theme h3 { font-size: var(--id-text-xl);  font-weight: 600; }

@media (min-width: 768px) {
  .id-theme h1 { font-size: var(--id-text-4xl); }
}

/* ============================================================
   COMPONENTES
   ============================================================ */

/* ---- Logo wordmark (HTML/CSS puro) ----
   <span class="id-logo">
     <span class="id-logo-bracket">[</span>infini<b>Dim</b><span class="id-logo-ast">*</span><span class="id-logo-bracket">]</span>
   </span>
*/
.id-logo {
  font-family: var(--id-font-display);
  font-weight: 400;
  color: var(--id-text);
  white-space: nowrap;
}
.id-logo b { font-weight: 600; color: #fff; }
.id-logo-bracket {
  font-family: var(--id-font-mono);
  color: var(--id-cyan);
  font-size: 1.15em;
  font-weight: 400;
}
.id-logo-ast { color: var(--id-violet); font-weight: 600; }

/* ---- Label mono (seções, tags) ---- */
.id-label {
  font-family: var(--id-font-mono);
  font-size: var(--id-text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--id-cyan);
}

/* ---- Botões ---- */
.id-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--id-sp-2);
  padding: 12px 28px;
  border-radius: var(--id-radius-sm);
  font-family: var(--id-font-display);
  font-weight: 600;
  font-size: var(--id-text-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--id-t-fast), box-shadow var(--id-t-fast), background var(--id-t-fast);
}
.id-btn:active { transform: translateY(1px); }

.id-btn--primary {
  background: var(--id-cyan);
  color: var(--id-bg);
}
.id-btn--primary:hover {
  box-shadow: 0 0 24px var(--id-glow-cyan), 0 4px 12px rgba(0,0,0,0.4);
}

.id-btn--ghost {
  background: transparent;
  color: var(--id-text);
  border-color: var(--id-border-strong);
}
.id-btn--ghost:hover { border-color: var(--id-cyan); color: var(--id-cyan); }

/* ---- Cards ---- */
.id-card {
  background: var(--id-bg-2);
  border: 1px solid var(--id-border);
  border-radius: var(--id-radius-lg);
  padding: var(--id-sp-8);
  transition: border-color var(--id-t-med), transform var(--id-t-med);
}
.id-card:hover {
  border-color: var(--id-border-strong);
  transform: translateY(-2px);
}

/* ---- Glow de fundo (hero) ---- */
.id-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--id-glow-cyan) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(0.5px);
}

/* ---- Código inline / blocos ---- */
.id-code {
  font-family: var(--id-font-mono);
  font-size: 0.9em;
  background: var(--id-bg-3);
  border: 1px solid var(--id-border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--id-cyan);
}

/* ---- Footer note 42 ---- */
.id-42 {
  font-family: var(--id-font-display);
  font-weight: 800;
  color: rgba(0,229,199,0.06);
  user-select: none;
}

/* ============================================================
   ACESSIBILIDADE — NÃO REMOVER
   ============================================================ */
.id-theme :focus-visible {
  outline: 2px solid var(--id-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .id-theme *, .id-theme *::before, .id-theme *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}