/* Digital Senses — Design Tokens (fonte única de verdade)
   Origem: manual da marca "Digital Senses Marca.pdf" + SVGs oficiais.
   Marca: #1A0047 (roxo profundo) · #9044F5 (violeta) · #F8F8FF (branco gelado) · DM Sans.
   Os tokens --ds-* são a paleta; os semânticos (--bg, --ink, ...) são o que os componentes usam. */

:root {
  /* ---- Paleta da marca (brand) ---- */
  --ds-deep: #1a0047;         /* roxo profundo: texto, sidebar, logo principal */
  --ds-violet: #9044f5;       /* violeta: ação primária, símbolo */
  --ds-ghost: #f8f8ff;        /* branco gelado: fundo, logo invertido */
  /* Apoio derivado dos elementos gráficos (gradientes do manual) */
  --ds-indigo: #6366e8;
  --ds-pink: #e879b9;
  --ds-violet-700: #6e1fd6;   /* violeta p/ texto sobre claro (contraste AA) */
  --ds-violet-300: #b98bff;   /* violeta p/ texto sobre escuro */
  --ds-violet-100: #efe6fe;
  --ds-violet-50: #f6f1ff;

  /* ---- Tipografia ---- */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-display: 44px;

  /* ---- Espaço, forma, elevação ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;     /* cantos generosos, como o símbolo */
  --shadow-1: 0 1px 2px rgba(26, 0, 71, .06), 0 1px 1px rgba(26, 0, 71, .04);
  --shadow-2: 0 12px 40px rgba(26, 0, 71, .22);

  /* ---- Semânticos — tema claro ---- */
  --bg: var(--ds-ghost);
  --panel: #ffffff;
  --ink: var(--ds-deep);
  --muted: #6d6485;
  --line: #e7e2f3;
  --soft: #f1eefb;
  --accent: var(--ds-violet);
  --accent-ink: #ffffff;
  --accent-text: var(--ds-violet-700);
  --accent-soft: var(--ds-violet-100);
  --side-bg: var(--ds-deep);
  --side-ink: rgba(248, 248, 255, .72);
  --side-active: rgba(144, 68, 245, .32);

  --ok: #067647;   --ok-bg: #e7f6ee;
  --warn: #b54708; --warn-bg: #fef3e2;
  --err: #b42318;  --err-bg: #fdecea;
  --info: #3b3fc4; --info-bg: #ececfd;

  /* séries de gráfico: ordem fixa */
  --c1: var(--ds-violet); --c2: var(--ds-indigo); --c3: var(--ds-pink);
  --hero: radial-gradient(60% 120% at 12% 20%, rgba(144, 68, 245, .55) 0, transparent 60%),
          radial-gradient(50% 100% at 85% 10%, rgba(99, 102, 232, .5) 0, transparent 60%),
          radial-gradient(60% 110% at 70% 110%, rgba(232, 121, 185, .4) 0, transparent 60%), #fbf9ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12002f; --panel: #1c0a46; --ink: var(--ds-ghost); --muted: #a99ec6; --line: #2f1b61; --soft: #26115a;
    --accent: var(--ds-violet); --accent-ink: #ffffff; --accent-text: var(--ds-violet-300); --accent-soft: #331a6b;
    --side-bg: #0c0122; --side-active: rgba(144, 68, 245, .38);
    --ok: #4ade80; --ok-bg: #12301f; --warn: #fbbf24; --warn-bg: #33270c; --err: #f87171; --err-bg: #3a1613; --info: #a5a8ff; --info-bg: #25266a;
    --shadow-1: none; --shadow-2: 0 12px 40px rgba(0, 0, 0, .5);
    --hero: radial-gradient(60% 120% at 12% 20%, rgba(144, 68, 245, .55) 0, transparent 60%),
            radial-gradient(50% 100% at 85% 10%, rgba(99, 102, 232, .45) 0, transparent 60%),
            radial-gradient(60% 110% at 70% 110%, rgba(232, 121, 185, .3) 0, transparent 60%), #1c0a46;
  }
}