/* =========================================================
   Cosmos Hub — tokens de tema. TODAS as cores ficam aqui.
   v2 "vidro": fundo quase preto azulado + luzes ambientes + superfícies translúcidas (ver DESIGN.md).
   ========================================================= */
:root {
  /* ---------- tema escuro (padrão) ---------- */
  --bg: #050609;            /* fundo base — preto (cor da Cosmos), com leve tom azul */
  --bg-2: #0C0E15;          /* faixas internas */
  /* superfícies: vidro translúcido (o fundo com luzes aparece por trás) */
  --sidebar: rgba(18, 20, 29, .72);      /* sidebar, modais, tooltip, painel flutuante (vidro opaco) */
  --sidebar-line: rgba(255, 255, 255, .08);
  --card: rgba(255, 255, 255, .045);     /* cards e painéis */
  --column: rgba(255, 255, 255, .03);    /* colunas, tiles internos */
  --raised: rgba(255, 255, 255, .07);    /* inputs, hover */
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --solid: #12141C;         /* superfície opaca (opções de select, fallback sem blur) */

  /* vidro */
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .075);
  --glass-line: rgba(255, 255, 255, .08);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .12);
  --glass-blur: blur(24px) saturate(160%);
  --fill: rgba(255, 255, 255, .03);
  --fill-hover: rgba(255, 255, 255, .06);
  /* luzes ambientes (fixas atrás do conteúdo): azul-noite (ref. código de 6 dígitos) + um toque quente */
  --amb-1: rgba(40, 66, 160, .30);    /* azul-noite */
  --amb-2: rgba(26, 40, 104, .32);    /* azul profundo */
  --amb-3: rgba(225, 232, 255, .07);  /* branco metálico (clareia de leve atrás do vidro) */
  --spot: rgba(190, 205, 255, .10);   /* holofote no topo */
  --navy: #1B2A5C;

  /* texto (contraste AA sobre --bg) */
  --text: #F2F4F8;
  --text-2: #A9AFBC;
  --text-3: #808797;
  --text-4: #4A5060;        /* só não-texto: fora do mês, divisórias */

  --primary: #F5F6F8;       /* botão primário: pílula branca */
  --primary-ink: #0B0D13;
  --brand: #FF5A2E;         /* laranja Cosmos (ref. calendário) — destaque forte */
  --brand-soft: #EE7C62;    /* coral (ref. loader 20%) — destaque que não precisa brilhar */
  --brand-tint: rgba(255, 90, 46, .14);
  --brand-glow: 0 0 24px rgba(255, 90, 46, .35);
  --focus: #FF5A2E;

  /* destaques (cor cheia · tinta para badges) */
  --mint: #45E09F;   --mint-tint: rgba(69, 224, 159, .13);   /* verde (ref. gráfico verde) */
  --red: #FF7272;    --red-tint: rgba(255, 114, 114, .13);
  --violet: #A78BFA; --violet-tint: rgba(167, 139, 250, .14);
  --amber: #F5B451;  --amber-tint: rgba(245, 180, 81, .14);
  --blue: #6EA8FF;   --blue-tint: rgba(110, 168, 255, .14);

  --st-todo: #A9AFBC;
  --st-doing: #A78BFA;
  --st-review: #FF7272;
  --fin-over: #A78BFA;   /* pago a mais */
  --scroll: rgba(255, 255, 255, .14); /* barra de rolagem */
  --wish-fav: #F5C542; /* favorito */
  /* brainstorm: barra sempre escura nos dois temas */
  --bs-bg: #02060A; --bs-line: 56, 196, 220; --bs-n1: #F8E16C; --bs-n2: #3FD0E0; --bs-n3: #FF7A45; --bs-text: #EAF6F8;
  /* network: planeta e espaço (sempre escuros) */
  --nw-space: #020409; --nw-sea1: #4FA3FF; --nw-sea2: #1A5FD0; --nw-sea3: #061B4A; --nw-land: #6FCF8E; --nw-node: #FFD27A;
  --st-changes: #F5B451;
  --st-done: #45E09F;
  --pr-urgent: #FF7272;
  --pr-high: #F5B451;
  --pr-normal: #6EA8FF;
  --pr-low: #808797;

  --chart-line: #FF5A2E;  /* série única do gráfico */
  --net-ig: #F0508A;      /* Instagram */
  --net-fb: #6EA8FF;      /* Facebook */
  --net-tt: #2DD4BF;      /* TikTok */
  --blk-1: #FF8A4C; --blk-2: #6EA8FF; --blk-3: #45E09F; --blk-4: #A78BFA; --blk-5: #F0508A; --blk-6: #E2B93B; /* blocos do planner */
  --chart-area: rgba(255, 90, 46, .28);   /* topo do degradê da área */
  --chart-grid: rgba(255, 255, 255, .06);
  --good: #45E09F;
  --bad: #FF7272;

  --on-color: #FFFFFF;    /* texto sobre cores de pessoa/cliente */
  --overlay: rgba(4, 5, 9, .55);
  --shadow: 0 40px 100px -20px rgba(0, 0, 0, .8);   /* modais/menus */
  --e1: 0 1px 2px rgba(0, 0, 0, .25), 0 24px 48px -24px rgba(0, 0, 0, .6);
  --e2: 0 2px 6px rgba(0, 0, 0, .3), 0 32px 64px -24px rgba(0, 0, 0, .7);
  --glow: none;

  /* forma e movimento */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
}

:root[data-theme="light"] {
  --bg: #F2F3F7;
  --bg-2: #E9EBF1;
  --sidebar: rgba(255, 255, 255, .72);
  --sidebar-line: rgba(0, 0, 0, .06);
  --card: rgba(255, 255, 255, .65);
  --column: rgba(255, 255, 255, .5);
  --raised: rgba(0, 0, 0, .045);
  --border: rgba(0, 0, 0, .07);
  --border-strong: rgba(0, 0, 0, .14);
  --solid: #FFFFFF;

  --glass: rgba(255, 255, 255, .65);
  --glass-2: rgba(255, 255, 255, .85);
  --glass-line: rgba(0, 0, 0, .06);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --fill: rgba(255, 255, 255, .55);
  --fill-hover: rgba(255, 255, 255, .8);
  --amb-1: rgba(255, 106, 51, .08);
  --amb-2: rgba(139, 124, 246, .07);
  --amb-3: rgba(255, 255, 255, .35);
  --spot: rgba(255, 255, 255, .5);

  --text: #111318;
  --text-2: #4A4F5C;
  --text-3: #646A78;
  --text-4: #B8BCC6;

  --primary: #111318;
  --primary-ink: #FFFFFF;
  --brand: #E8501C;
  --brand-soft: #D9664C;
  --brand-tint: rgba(232, 80, 28, .12);
  --brand-glow: 0 0 18px rgba(232, 80, 28, .25);
  --focus: #E8501C;

  --mint: #12A06A;   --mint-tint: rgba(18, 160, 106, .12);
  --red: #D92D20;    --red-tint: rgba(217, 45, 32, .1);
  --violet: #6D5BD0; --violet-tint: rgba(109, 91, 208, .12);
  --amber: #B86E00;  --amber-tint: rgba(184, 110, 0, .12);
  --blue: #2F6FDB;   --blue-tint: rgba(47, 111, 219, .12);

  --st-todo: #646A78;
  --st-doing: #6D5BD0;
  --st-review: #D92D20;
  --fin-over: #6D5BD0;
  --scroll: rgba(0, 0, 0, .2);
  --wish-fav: #C99A06;
  --st-changes: #B86E00;
  --st-done: #12A06A;
  --pr-urgent: #D92D20;
  --pr-high: #C27A00;
  --pr-normal: #2F6FDB;
  --pr-low: #8A8F9B;

  --chart-line: #E8501C;
  --net-ig: #D6336C;
  --net-fb: #2F6FDB;
  --net-tt: #00897B;
  --blk-1: #E8611C; --blk-2: #2F6FDB; --blk-3: #15924F; --blk-4: #8B4FD8; --blk-5: #D6336C; --blk-6: #B8860B;
  --chart-area: rgba(232, 80, 28, .18);
  --chart-grid: rgba(0, 0, 0, .07);
  --good: #12A06A;
  --bad: #D92D20;

  --overlay: rgba(20, 22, 30, .25);
  --shadow: 0 32px 80px -24px rgba(20, 22, 30, .3);
  --e1: 0 1px 2px rgba(20, 22, 30, .06), 0 20px 40px -24px rgba(20, 22, 30, .2);
  --e2: 0 2px 6px rgba(20, 22, 30, .08), 0 28px 56px -24px rgba(20, 22, 30, .28);
}