/* ============================================================
   VELA — Design Tokens
   Extraídos do design system Vela (linguagem visual / valores).
   Dark é o tema padrão; light via [data-theme="light"] no <html>.
   ============================================================ */

:root,
:host {
  /* ---------- Tipografia ---------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;      --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;     --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;       --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;     --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;      --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;      --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;    --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;     --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;        --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;     --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;      --text-7xl--line-height: 1;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---------- Espaçamento base ---------- */
  --spacing: 0.25rem;

  /* ---------- Containers ---------- */
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-7xl: 80rem;

  /* ---------- Radius ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  /* Radius próprios do Vela */
  --radius-vela-sm: 9px;
  --radius-vela-md: 13px;
  --radius-vela-lg: 18px;
  --radius-vela-xl: 20px;

  /* ---------- Blur ---------- */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-xl: 24px;

  /* ---------- Transições ---------- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

  /* ---------- Animações (nomes → keyframes em animations.css) ---------- */
  --animate-vela-up: velaUp 0.35s ease both;
  --animate-vela-pop: velaPop 0.25s ease both;
  --animate-vela-fade: velaFade 0.25s ease both;
  --animate-vela-spin: velaSpin 0.8s linear infinite;
  --animate-vela-pulse: velaPulse 1.6s ease-in-out infinite;
  --animate-vela-shimmer: velaShimmer 1.6s ease-in-out infinite;

  /* ---------- Aliases semânticos de cor ----------
     (apontam para as variáveis de tema abaixo) */
  --color-black: #000;
  --color-white: #fff;

  --color-bg-0: var(--bg-0);
  --color-bg-1: var(--bg-1);
  --color-bg-2: var(--bg-2);
  --color-bg-3: var(--bg-3);
  --color-bg-inset: var(--bg-inset);
  --color-line: var(--line);
  --color-line-2: var(--line-2);
  --color-t0: var(--t0);
  --color-t1: var(--t1);
  --color-t2: var(--t2);
  --color-acc: var(--acc);
  --color-acc-2: var(--acc-2);
  --color-acc-soft: var(--acc-soft);
  --color-ok: var(--ok);
  --color-warn: var(--warn);
  --color-bad: var(--bad);
  --color-info: var(--info);
  --color-ok-soft: var(--ok-soft);
  --color-bad-soft: var(--bad-soft);
  --color-warn-soft: var(--warn-soft);
  --color-info-soft: var(--info-soft);
  --shadow-vela: var(--shadow);
}

/* ============================================================
   TEMA DARK (padrão)
   ============================================================ */
:root {
  color-scheme: dark;

  --bg-0: #090a0f;
  --bg-1: #0c0e15;
  --bg-2: #12141d;
  --bg-3: #1a1d28;
  --bg-inset: #0c0e15;

  --line: #ffffff12;
  --line-2: #ffffff21;

  --t0: #f3f4f9;
  --t1: #9aa1b2;
  --t2: #5f6678;

  --acc: #7c5cff;
  --acc-2: #9d86ff;
  --acc-soft: #7c5cff26;

  --ok: #33d493;
  --warn: #f7b84e;
  --bad: #f76d7d;
  --info: #56a8ff;

  --ok-soft: #33d49324;
  --bad-soft: #f76d7d24;
  --warn-soft: #f7b84e29;
  --info-soft: #56a8ff24;

  --shadow: 0 18px 40px -22px #000000b3;
}

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

  --bg-0: #eef0f5;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f3f4f9;
  --bg-inset: #f5f6fb;

  --line: #11142014;
  --line-2: #11142024;

  --t0: #171a23;
  --t1: #5a6173;
  --t2: #9097a8;

  --acc: #6a4cff;
  --acc-2: #8b6dff;
  --acc-soft: #6a4cff1c;

  --ok: #16b67e;
  --warn: #df9626;
  --bad: #e8556a;
  --info: #3b8ef0;

  --ok-soft: #16b67e1f;
  --bad-soft: #e8556a1f;
  --warn-soft: #df962624;
  --info-soft: #3b8ef01f;

  --shadow: 0 14px 34px -18px #14182838;
}