/* ============================================================
   CIUTEK 1 - VELVET NEXUS  |  ciutek-tokens.css
   Fundacao do sistema visual. Nenhuma regra de componente aqui:
   somente variaveis. Tudo o mais consome estes tokens.
   ============================================================ */

/* ---------- 1. Escala de espacamento ---------- */
:root{
  --ck-e-1:4px;  --ck-e-2:8px;   --ck-e-3:12px; --ck-e-4:16px;
  --ck-e-5:20px; --ck-e-6:24px;  --ck-e-7:32px; --ck-e-8:40px;
  --ck-e-9:48px; --ck-e-10:64px; --ck-e-11:80px;

/* ---------- 2. Raio de canto ---------- */
  --ck-r-int:8px; --ck-r-campo:12px; --ck-r-cartao:16px;
  --ck-r-painel:20px; --ck-r-modal:24px; --ck-r-capsula:999px;

/* ---------- 3. Tipografia ---------- */
  --ck-fonte-titulo:'Sora','Segoe UI',system-ui,-apple-system,sans-serif;
  --ck-fonte-texto:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;

  --ck-t-destaque:36px;   --ck-t-destaque-lh:44px;
  --ck-t-pagina:28px;     --ck-t-pagina-lh:36px;
  --ck-t-secao:20px;      --ck-t-secao-lh:28px;
  --ck-t-cartao:16px;     --ck-t-cartao-lh:22px;
  --ck-t-corpo:15px;      --ck-t-corpo-lh:22px;
  --ck-t-apoio:14px;      --ck-t-apoio-lh:20px;
  --ck-t-legenda:12px;    --ck-t-legenda-lh:16px;
  --ck-t-botao:14px;      --ck-t-botao-lh:20px;

  --ck-p-destaque:680; --ck-p-titulo:650; --ck-p-cartao:600;
  --ck-p-botao:600;    --ck-p-corpo:420;  --ck-p-legenda:500;

/* ---------- 4. Tamanhos recorrentes ---------- */
  --ck-toque-min:44px;
  --ck-bt-compacto:36px; --ck-bt-padrao:44px;
  --ck-bt-principal:52px; --ck-bt-flutuante:56px;
  --ck-campo-altura:48px; --ck-campo-longo-min:112px;

  --ck-av-1:28px; --ck-av-2:32px; --ck-av-3:40px; --ck-av-4:48px;
  --ck-av-5:64px; --ck-av-6:88px; --ck-av-7:112px; --ck-av-8:144px;

  --ck-icone-1:16px; --ck-icone-2:20px; --ck-icone-3:24px;
  --ck-icone-4:28px; --ck-icone-5:32px;

/* ---------- 5. Layout ---------- */
  --ck-app-max:1440px;
  --ck-menu-largo:264px; --ck-menu-compacto:80px;
  --ck-feed-min:560px; --ck-feed-padrao:640px; --ck-feed-max:700px;
  --ck-aux-largura:312px;
  --ck-coluna-gap:24px; --ck-margem-lateral:24px;
  --ck-cabecalho-desktop:64px; --ck-cabecalho-celular:56px;
  --ck-nav-inferior:64px;
  --ck-perfil-max:1040px;

/* ---------- 6. Areas seguras ---------- */
  --ck-seguro-topo:env(safe-area-inset-top,0px);
  --ck-seguro-direita:env(safe-area-inset-right,0px);
  --ck-seguro-baixo:env(safe-area-inset-bottom,0px);
  --ck-seguro-esquerda:env(safe-area-inset-left,0px);

/* ---------- 7. Movimento ---------- */
  --ck-mov-instante:100ms; --ck-mov-rapido:160ms;
  --ck-mov-padrao:220ms;   --ck-mov-painel:300ms;
  --ck-mov-especial:420ms;
  --ck-curva:cubic-bezier(.22,.61,.36,1);
  --ck-curva-entrada:cubic-bezier(.16,.84,.44,1);
  --ck-curva-saida:cubic-bezier(.55,.06,.68,.19);

/* ---------- 8. Camadas ---------- */
  --ck-z-conteudo:0;   --ck-z-elevado:10;  --ck-z-cabecalho:100;
  --ck-z-flutuante:300; --ck-z-nav:400;    --ck-z-overlay:700;
  --ck-z-modal:800;    --ck-z-critico:900; --ck-z-dica:1000;

/* ---------- 9. Desfoque do vidro ---------- */
  --ck-vidro-compacto:10px; --ck-vidro-padrao:16px; --ck-vidro-especial:20px;
}

/* ============================================================
   10. Cores semanticas
   Padrao do Ciutek = escuro. O claro entra por escolha manual
   (data-ck-tema="claro") ou pela preferencia do sistema.
   ============================================================ */

:root{
  color-scheme:dark;

  --ck-roxo-50:#f4f0ff;  --ck-roxo-100:#e7dfff; --ck-roxo-200:#cfbcff;
  --ck-roxo-300:#b295ff; --ck-roxo-400:#9268fb; --ck-roxo-500:#7a41f0;
  --ck-roxo-600:#6528d4; --ck-roxo-700:#511ea9; --ck-roxo-800:#3b1580;
  --ck-roxo-900:#260d55;

  --ck-cor-primaria:var(--ck-roxo-500);
  --ck-cor-primaria-forte:var(--ck-roxo-600);
  --ck-cor-primaria-suave:var(--ck-roxo-300);
  --ck-sobre-primaria:#ffffff;

  --ck-fundo:#0d0a16;
  --ck-superficie:#171327;
  --ck-superficie-2:#1f1a33;
  --ck-superficie-3:#292140;
  --ck-borda:rgba(255,255,255,.10);
  --ck-borda-forte:rgba(255,255,255,.18);
  --ck-texto:#efecf7;
  --ck-texto-suave:#a79fc0;
  --ck-texto-fraco:#9b93b4;   /* subiu: 3.9:1 nao passava no minimo de 4.5:1 */

  --ck-sucesso:#3ecf8e; --ck-sobre-sucesso:#06210f;
  --ck-atencao:#f5b544; --ck-sobre-atencao:#241701;
  --ck-erro:#ff5f6d;    --ck-sobre-erro:#2a0308;
  --ck-aviso:#ff4d67;
  --ck-foco:#b295ff;
  --ck-overlay:rgba(6,4,12,.66);

  --ck-vidro-fundo:rgba(31,26,51,.62);
  --ck-vidro-borda:rgba(255,255,255,.12);

  --ck-esqueleto-a:rgba(255,255,255,.05);
  --ck-esqueleto-b:rgba(255,255,255,.11);

  --ck-sombra-0:none;
  --ck-sombra-1:0 1px 2px rgba(0,0,0,.34);
  --ck-sombra-2:0 2px 8px rgba(0,0,0,.38);
  --ck-sombra-3:0 8px 20px rgba(0,0,0,.44);
  --ck-sombra-4:0 16px 40px rgba(0,0,0,.52);
  --ck-sombra-5:0 28px 68px rgba(0,0,0,.60);
}

/* ---------- Tema claro ---------- */
:root[data-ck-tema="claro"]{
  color-scheme:light;

  --ck-cor-primaria:var(--ck-roxo-600);
  --ck-cor-primaria-forte:var(--ck-roxo-700);
  --ck-cor-primaria-suave:var(--ck-roxo-400);
  --ck-sobre-primaria:#ffffff;

  --ck-fundo:#f6f4fb;
  --ck-superficie:#ffffff;
  --ck-superficie-2:#f2eefb;
  --ck-superficie-3:#e8e1f7;
  --ck-borda:rgba(38,13,85,.12);
  --ck-borda-forte:rgba(38,13,85,.22);
  --ck-texto:#1c1430;
  --ck-texto-suave:#5b5175;
  --ck-texto-fraco:#655c82;   /* escureceu: 3.95:1 nao passava no minimo de 4.5:1 */

  --ck-sucesso:#12805a; --ck-sobre-sucesso:#ffffff;
  --ck-atencao:#9a6100; --ck-sobre-atencao:#ffffff;
  --ck-erro:#c2172f;    --ck-sobre-erro:#ffffff;
  --ck-aviso:#c2172f;
  --ck-foco:var(--ck-roxo-600);
  --ck-overlay:rgba(28,20,48,.42);

  --ck-vidro-fundo:rgba(255,255,255,.72);
  --ck-vidro-borda:rgba(38,13,85,.10);

  --ck-esqueleto-a:rgba(38,13,85,.06);
  --ck-esqueleto-b:rgba(38,13,85,.12);

  --ck-sombra-1:0 1px 2px rgba(38,13,85,.08);
  --ck-sombra-2:0 2px 8px rgba(38,13,85,.10);
  --ck-sombra-3:0 8px 20px rgba(38,13,85,.12);
  --ck-sombra-4:0 16px 40px rgba(38,13,85,.16);
  --ck-sombra-5:0 28px 68px rgba(38,13,85,.20);
}

/* ============================================================
   11. Ajustes por largura
   ============================================================ */
@media (max-width:1279px){
  :root{ --ck-menu-largo:var(--ck-menu-compacto); --ck-feed-padrao:var(--ck-feed-max);
         --ck-aux-largura:288px; }
}
@media (max-width:1023px){
  :root{ --ck-margem-lateral:20px; --ck-coluna-gap:20px; }
}
@media (max-width:767px){
  :root{
    --ck-margem-lateral:16px; --ck-coluna-gap:16px;
    --ck-t-destaque:30px;  --ck-t-destaque-lh:38px;
    --ck-t-pagina:24px;    --ck-t-pagina-lh:32px;
    --ck-r-painel:16px;
  }
}

/* ============================================================
   12. Densidade escolhida pela pessoa
   confortavel | equilibrado (padrao) | compacto
   ============================================================ */
:root[data-ck-densidade="confortavel"]{
  --ck-densidade:1.15; --ck-cartao-interno:var(--ck-e-5); --ck-cartao-gap:var(--ck-e-5);
}
:root,:root[data-ck-densidade="equilibrado"]{
  --ck-densidade:1; --ck-cartao-interno:var(--ck-e-4); --ck-cartao-gap:var(--ck-e-4);
}
:root[data-ck-densidade="compacto"]{
  --ck-densidade:.88; --ck-cartao-interno:var(--ck-e-3); --ck-cartao-gap:var(--ck-e-3);
}

/* ============================================================
   13. Movimento escolhido pela pessoa + preferencia do sistema
   completo (padrao) | suave | reduzido
   ============================================================ */
:root,:root[data-ck-movimento="completo"]{ --ck-mov-fator:1; }
:root[data-ck-movimento="suave"]{ --ck-mov-fator:.6; }
:root[data-ck-movimento="reduzido"]{ --ck-mov-fator:0; }

:root[data-ck-movimento="reduzido"] *,
:root[data-ck-movimento="reduzido"] *::before,
:root[data-ck-movimento="reduzido"] *::after{
  animation-duration:1ms !important;
  animation-iteration-count:1 !important;
  transition-duration:1ms !important;
  scroll-behavior:auto !important;
}

@media (prefers-reduced-motion:reduce){
  :root:not([data-ck-movimento="completo"]){ --ck-mov-fator:0; }
  :root:not([data-ck-movimento="completo"]) *,
  :root:not([data-ck-movimento="completo"]) *::before,
  :root:not([data-ck-movimento="completo"]) *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   14. Contraste alto do sistema
   ============================================================ */
@media (prefers-contrast:more){
  :root{ --ck-borda:rgba(255,255,255,.30); --ck-texto-suave:#cfc9de; }
  :root[data-ck-tema="claro"]{ --ck-borda:rgba(38,13,85,.34); --ck-texto-suave:#3a3352; }
}