/* ============================================================
   themes.css: Variáveis de tema (claro / escuro)
   Paleta alinhada ao logo Obici Technology (magenta → violeta → azul)
   ============================================================ */

:root {
  /* Marca */
  --brand-1: #C026D3;   /* magenta/roxo (logo) */
  --brand-2: #7C3AED;   /* violeta */
  --brand-3: #3B82F6;   /* azul */
  --brand-4: #06B6D4;   /* cyan accent */

  --gradient-brand: linear-gradient(135deg, #C026D3 0%, #7C3AED 50%, #3B82F6 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(192,38,211,.18), rgba(124,58,237,.16), rgba(59,130,246,.14));
  --gradient-aurora:
    radial-gradient(60% 80% at 20% 10%, rgba(192,38,211,.55), transparent 60%),
    radial-gradient(60% 80% at 80% 30%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(60% 80% at 50% 90%, rgba(59,130,246,.45), transparent 60%);
  --gradient-aurora-soft:
    radial-gradient(60% 80% at 20% 10%, rgba(192,38,211,.18), transparent 60%),
    radial-gradient(60% 80% at 80% 30%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(60% 80% at 50% 90%, rgba(59,130,246,.14), transparent 60%);

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.18);
  --shadow-xl: 0 40px 100px rgba(0,0,0,.30);
  --shadow-glow: 0 8px 22px -10px rgba(124,58,237,.40);
  --shadow-glow-2: 0 18px 60px -12px rgba(124,58,237,.55);

  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometria */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Transições */
  --t-fast: 150ms ease;
  --t-med: 280ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 480ms cubic-bezier(.2,.7,.2,1);
}

/* =================== TEMA ESCURO (default) =================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #07070D;
  --bg-elev: #0E0E1A;
  --bg-elev-2: #14142A;
  --surface: rgba(255,255,255,.04);
  --surface-strong: rgba(255,255,255,.07);
  --glass: rgba(20,20,42,.55);

  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --border-brand: rgba(192,38,211,.35);

  --text: #ECEAFF;
  --text-soft: #B6B0DC;
  --text-muted: #7C7AA0;

  --primary: var(--brand-2);
  --primary-contrast: #FFFFFF;

  --ring: 0 0 0 3px rgba(192,38,211,.35);

  --hero-glow-1: rgba(192,38,211,.55);
  --hero-glow-2: rgba(124,58,237,.45);
  --hero-glow-3: rgba(59,130,246,.40);
  --grid-color: rgba(255,255,255,.05);

  --code-bg: rgba(255,255,255,.06);
  --code-fg: #C7BCE6;

  --noise-opacity: .035;
}

/* =================== TEMA CLARO =================== */
[data-theme="light"] {
  color-scheme: light;

  --bg: #F5F4FB;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #FFFFFF;
  --surface: rgba(15,23,42,.04);
  --surface-strong: rgba(15,23,42,.06);
  --glass: rgba(255,255,255,.65);

  --border: rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.16);
  --border-brand: rgba(124,58,237,.30);

  --text: #0B0820;
  --text-soft: #2F2A50;
  --text-muted: #5C5577;

  --primary: var(--brand-2);
  --primary-contrast: #FFFFFF;

  --ring: 0 0 0 3px rgba(124,58,237,.25);

  --hero-glow-1: rgba(192,38,211,.30);
  --hero-glow-2: rgba(124,58,237,.28);
  --hero-glow-3: rgba(59,130,246,.22);
  --grid-color: rgba(15,23,42,.06);

  --code-bg: #14142A;
  --code-fg: #ECEAFF;

  --shadow-md: 0 10px 28px rgba(15,23,42,.08);
  --shadow-lg: 0 30px 80px rgba(15,23,42,.14);
  --shadow-xl: 0 40px 100px rgba(15,23,42,.18);
  --shadow-glow: 0 8px 22px -10px rgba(124,58,237,.32);

  --noise-opacity: .025;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #F5F4FB;
    --bg-elev: #FFFFFF;
    --text: #0B0820;
  }
}