/* ============================================================
   ORION DEMON — tokens de design e temas
   A paleta vem do logo: o vazio negro do espaço, a aura violeta,
   a íris vermelha. Tudo o mais é cinza-roxo e vidro.
   Plugins usam estas variáveis no HTML deles — os nomes antigos
   (--red, --purple, --void, --surface…) continuam existindo.
   ============================================================ */
:root {
  /* superfícies */
  --void:        #06040b;
  --void-2:      #0c0813;
  --nebula:      #120a1f;
  --surface:     rgba(18, 10, 31, 0.82);
  --surface-2:   rgba(32, 20, 50, 0.55);
  --surface-3:   rgba(48, 30, 74, 0.45);
  --glass-blur:  14px;

  /* texto */
  --ink:         #f1ecf7;
  --muted:       #8f86a3;
  --faint:       #625877;

  /* acentos */
  --iris:        #ff2d55;
  --red:         var(--iris);
  --red-deep:    #c8173d;
  --violet:      #a855f7;
  --purple:      var(--violet);
  --purple-deep: #7c3aed;
  --magenta:     #e040fb;

  --primary:     var(--iris);
  --secondary:   var(--violet);

  --grad:      linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --grad-rev:  linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,45,85,.14), rgba(168,85,247,.14));

  /* estado */
  --ok:   #35d07f;
  --warn: #ffb02e;
  --err:  #ff3b52;
  --info: #7fd8ff;

  /* linhas e sombras */
  --line:        rgba(168, 85, 247, 0.16);
  --line-strong: rgba(168, 85, 247, 0.34);
  --focus:       rgba(168, 85, 247, 0.55);
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   16px;
  --shadow:      0 24px 60px -24px rgba(0,0,0,.8);
  --shadow-win:  0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line);
  --glow-red:    0 0 22px -6px rgba(255,45,85,.6);
  --glow-purple: 0 0 22px -6px rgba(168,85,247,.6);

  /* tipografia */
  --font-display: "Chakra Petch", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 15px; --fs-xl: 20px; --fs-2xl: 28px;
  --track-label: .14em;

  /* fundo */
  --bg-image: url("/static/img/background_orion.png");
  --bg-image-opacity: .14;
  --bg-tint: linear-gradient(180deg, rgba(20, 8, 36, .55), rgba(6, 4, 11, .92));

  /* shell */
  --topbar-h: 52px;
  --sidebar-w: 224px;
  --sidebar-rail: 64px;
  --dock-h: 44px;
}

/* ---------- Orion Red: superfícies sangue, íris manda ---------- */
[data-theme="orion-red"] {
  --void: #080305; --void-2: #10060a; --nebula: #1a0810;
  --surface: rgba(28, 8, 16, .84); --surface-2: rgba(52, 14, 28, .55); --surface-3: rgba(74, 20, 40, .45);
  --secondary: #ff6b8a; --violet: #ff6b8a; --purple: #ff6b8a; --purple-deep: #c8173d; --magenta: #ff2d55;
  --line: rgba(255, 45, 85, .18); --line-strong: rgba(255, 45, 85, .4); --focus: rgba(255, 45, 85, .55);
  --bg-tint: linear-gradient(180deg, rgba(40, 6, 16, .6), rgba(8, 3, 5, .94));
}

/* ---------- Orion Purple: violeta primário, íris vira detalhe ---------- */
[data-theme="orion-purple"] {
  --primary: #a855f7; --secondary: #e040fb; --red: #c07bff; --red-deep: #7c3aed;
  --void: #07040f; --void-2: #0d0818; --nebula: #150b26;
  --grad-soft: linear-gradient(135deg, rgba(168,85,247,.16), rgba(224,64,251,.12));
  --glow-red: var(--glow-purple);
}

/* ---------- AMOLED: preto absoluto, sem vidro ---------- */
[data-theme="amoled"] {
  --void: #000; --void-2: #000; --nebula: #050308;
  --surface: #07050b; --surface-2: #0d0912; --surface-3: #140d1c;
  --glass-blur: 0px; --bg-image-opacity: 0; --bg-tint: none;
  --line: rgba(168, 85, 247, .22); --shadow: none; --shadow-win: 0 0 0 1px var(--line-strong);
}

/* ---------- Midnight: azul-preto ---------- */
[data-theme="midnight"] {
  --void: #070a14; --void-2: #0b1020; --nebula: #10182c;
  --surface: rgba(14, 20, 40, .84); --surface-2: rgba(24, 34, 66, .55); --surface-3: rgba(36, 50, 92, .45);
  --secondary: #7fa6ff; --violet: #7fa6ff; --purple: #7fa6ff; --purple-deep: #3b5bdb; --magenta: #9bb8ff;
  --line: rgba(127, 166, 255, .18); --line-strong: rgba(127, 166, 255, .4); --focus: rgba(127, 166, 255, .55);
  --bg-tint: linear-gradient(180deg, rgba(10, 16, 40, .5), rgba(7, 10, 20, .92));
  --bg-image-opacity: .22;
}

/* ---------- Light: para quem trabalha de dia ---------- */
[data-theme="light"] {
  --void: #f5f2fa; --void-2: #ece7f4; --nebula: #ffffff;
  --surface: rgba(255, 255, 255, .86); --surface-2: rgba(120, 90, 160, .08); --surface-3: rgba(120, 90, 160, .14);
  --ink: #1a1226; --muted: #5d5470; --faint: #8a8199;
  --red-deep: #b0123a; --purple-deep: #6d28d9;
  --line: rgba(109, 40, 217, .16); --line-strong: rgba(109, 40, 217, .35);
  --shadow: 0 18px 50px -24px rgba(40, 20, 80, .35); --shadow-win: 0 24px 60px -28px rgba(40, 20, 80, .45), 0 0 0 1px var(--line);
  --bg-image-opacity: .06; --bg-tint: linear-gradient(180deg, rgba(245,242,250,.7), rgba(245,242,250,.96));
  --grad-soft: linear-gradient(135deg, rgba(255,45,85,.10), rgba(168,85,247,.10));
  --info: #0e7fb8;
}

/* ---------- Custom: 4 cores definidas pelo usuário (inline no <html>) ---------- */
[data-theme="custom"] {
  --void: var(--c-bg, #06040b);
  --void-2: var(--c-bg, #06040b);
  --nebula: var(--c-surface, #120a1f);
  --surface: var(--c-surface, #120a1f);
  --surface-2: color-mix(in srgb, var(--c-surface, #120a1f) 70%, var(--c-secondary, #a855f7) 12%);
  --surface-3: color-mix(in srgb, var(--c-surface, #120a1f) 60%, var(--c-secondary, #a855f7) 20%);
  --primary: var(--c-primary, #ff2d55); --red: var(--c-primary, #ff2d55); --iris: var(--c-primary, #ff2d55);
  --secondary: var(--c-secondary, #a855f7); --violet: var(--c-secondary, #a855f7); --purple: var(--c-secondary, #a855f7);
  --line: color-mix(in srgb, var(--c-secondary, #a855f7) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--c-secondary, #a855f7) 40%, transparent);
  --focus: color-mix(in srgb, var(--c-secondary, #a855f7) 55%, transparent);
  --bg-image-opacity: .08;
}