/* ============================================================
   ORAYON — Design Tokens
   colors_and_type.css
   Fonte de verdade: Manual de Diretrizes de Marca Orayon
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
/* Noka (fonte secundária/display da marca) é comercial e não está
   disponível em CDN. Substituída por "Quicksand" como aproximação
   geométrica arredondada — ver README › Tipografia. */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap");

:root {
  /* ---------- PALETA DE MARCA (Manual, seção 03 · Cores) ---------- */
  --neural-pulse: #FF57C0;   /* rosa — energia, pulso neural        */
  --core-signal:  #2F46E4;   /* azul núcleo — sinal, confiança      */
  --core-signal-bright: #3E59FD; /* azul vivo (uso em UI/gradiente) */
  --deep-link:    #C2DAF7;   /* azul claro — conexão, leveza        */
  --dark-matter:  #171A24;   /* quase-preto azulado — texto/fundo   */
  --cloud-light:  #F2F2F2;   /* cinza nuvem — superfícies neutras   */

  /* Tom intermediário do degradê de marca (pink → roxo → azul) */
  --neural-violet: #7A45F0;

  /* ---------- ESCALA NEUTRA (derivada de Dark Matter) ---------- */
  --ink-900: #171A24;
  --ink-700: #2A2E3C;
  --ink-500: #5C6278;
  --ink-400: #8A92A8;
  --ink-300: #B6BCC9;
  --ink-100: #E6E8EE;

  /* ---------- TEMA CLARO (padrão) ---------- */
  --bg:          #FAFBFD;
  --bg-2:        #F2F4F9;
  --bg-card:     #FFFFFF;
  --border:      rgba(23, 26, 36, 0.08);
  --border-strong: rgba(23, 26, 36, 0.14);
  --text:        #171A24;
  --text-mute:   #5C6278;
  --text-dim:    #8A92A8;

  /* ---------- SEMÂNTICO ---------- */
  --success: #22C55E;
  --warning: #F5A524;
  --danger:  #EF4444;
  --info:    var(--core-signal-bright);
  --link:    var(--core-signal);

  /* ---------- GRADIENTES DE MARCA ---------- */
  /* Degradê assinatura: rosa → roxo → azul */
  --grad-brand: linear-gradient(135deg, #3E59FD 0%, #7A45F0 50%, #FF57C0 100%);
  /* Footer/hero vertical: rosa (topo) → azul (base) */
  --grad-vertical: linear-gradient(180deg, #E94CC6 0%, #D14CD1 18%, #A04BE0 40%, #6C4CEA 65%, #2F46E4 100%);
  /* Wash suave para fundos de ícone / realces */
  --grad-soft: linear-gradient(135deg, rgba(62,89,253,.10) 0%, rgba(255,87,192,.08) 100%);

  /* ---------- RAIO ---------- */
  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- ELEVAÇÃO ---------- */
  --shadow-sm:   0 1px 2px rgba(23,26,36,.05);
  --shadow-card: 0 1px 2px rgba(23,26,36,.04), 0 8px 24px rgba(23,26,36,.04);
  --shadow-card-hover: 0 2px 4px rgba(23,26,36,.05), 0 18px 40px rgba(62,89,253,.12);
  --shadow-pop:  0 20px 50px rgba(23,26,36,.12), 0 2px 6px rgba(23,26,36,.06);
  --shadow-brand: 0 30px 80px -20px rgba(62,89,253,.35);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Hanken Grotesk", "Quicksand", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --font-brand:   "Quicksand", "Hanken Grotesk", system-ui, sans-serif; /* aprox. de Noka */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica (1.250 — major third) */
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 38px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.03;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;
}

/* ============================================================
   TEMA ESCURO  (data-theme="dark")
   ============================================================ */
[data-theme="dark"] {
  --bg:          #0D0F16;
  --bg-2:        #141824;
  --bg-card:     #171A24;
  --border:      rgba(245, 246, 250, 0.08);
  --border-strong: rgba(245, 246, 250, 0.16);
  --text:        #F2F4F9;
  --text-mute:   #A8AEC0;
  --text-dim:    #6B7185;
}

/* ============================================================
   ESTILOS SEMÂNTICOS BASE
   ============================================================ */
.or-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
h1, .or-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
h2, .or-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--text);
}
h3, .or-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--text);
}
h4, .or-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text);
}
p, .or-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-mute);
}
.or-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.or-small { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.or-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-mute);
}
.or-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
}

/* Texto com preenchimento em degradê de marca */
.or-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}