/* ===================================================================
   MOVE DATA · DESIGN SYSTEM 2.0 · TOKENS
   Duas camadas, nessa ordem e nunca misturadas:
     1. PRIMITIVO  — o valor cru. Só a marca muda isso.
     2. SEMÂNTICO  — o papel do valor na tela. É isto que o componente usa.
   Um componente que escreve hex, ou que lê um primitivo direto, está errado.
   Cores da marca medidas nos arquivos oficiais, não aproximadas.
   =================================================================== */

:root{

  /* =================================================================
     1 · PRIMITIVO
     ================================================================= */

  /* marca */
  --brand-magenta:#D32064;
  --brand-roxo:#5F2C84;
  --brand-azul:#15ABD8;
  --brand-menta:#2CECA8;
  --brand-navy:#0F134C;

  /* rampa magenta */
  --mag-50:#F8F2F4;--mag-100:#EDD4DD;--mag-200:#E2A1BA;--mag-300:#DD6A95;--mag-400:#DD3C79;
  --mag-500:#D32064;--mag-600:#AD1A52;--mag-700:#82153E;--mag-800:#59102B;--mag-900:#330A1A;
  /* rampa azul */
  --az-50:#F2F7F8;--az-100:#D3E8EE;--az-200:#9ED5E6;--az-300:#63C6E3;--az-400:#33BDE6;
  --az-500:#15ABD8;--az-600:#118CB1;--az-700:#0E6985;--az-800:#0B485B;--az-900:#082934;
  /* rampa menta */
  --mi-50:#F2F8F6;--mi-100:#D2EEE4;--mi-200:#9DE7CD;--mi-300:#62E4B6;--mi-400:#31E7A7;
  --mi-500:#2CECA8;--mi-600:#13D38F;--mi-700:#109E6C;--mi-800:#0C6C4A;--mi-900:#093D2B;
  /* rampa roxo */
  --ro-50:#F5F3F7;--ro-100:#E2D8E9;--ro-200:#C5ACD8;--ro-300:#8E4FBE;--ro-400:#74399F;
  --ro-500:#5F2C84;--ro-600:#4E246C;--ro-700:#3B1C51;--ro-800:#291438;--ro-900:#180C20;
  /* rampa carvão · a ponte entre o preto da tela e o navy do papel */
  --ch-50:#F3F5FA;--ch-100:#DADDE8;--ch-200:#B4BACB;--ch-300:#A1A9BA;
  --ch-400:#767E92;--ch-500:#565D70;--ch-600:#363C4D;--ch-700:#222736;--ch-800:#161A24;
  --ch-900:#10131B;--ch-950:#0A0C12;--ch-1000:#07080D;

  /* sistema · fora da marca, nunca redefinidos por tema */
  --sys-amber:#F5A524;
  --sys-coral:#F0708A;

  /* opacidade · escala única para véu, borda e estado */
  --o-1:.04;--o-2:.08;--o-3:.12;--o-4:.18;--o-5:.28;--o-6:.42;--o-7:.62;--o-8:.82;

  /* =================================================================
     2 · SEMÂNTICO
     ================================================================= */

  /* superfície · quatro planos, separados por luminosidade e não por borda */
  --bg:#0A0C12;                 /* plano 0 · a página */
  --bg-sunk:#07080D;            /* plano -1 · poço, código, palco de mídia */
  --surface:#10131B;            /* plano 1 · bloco de conteúdo */
  --surface-raised:#161A24;     /* plano 2 · demonstração, campo, linha ativa */
  --surface-overlay:#222736;    /* plano 3 · menu, dica, camada flutuante */

  /* texto */
  --text:#F3F5FA;               /* 18.6:1 */
  --text-2:#B4BACB;             /* 9.3:1  · corpo secundário */
  --text-3:#A1A9BA;             /* 7.5:1  · metadado, legenda */
  --text-weak:#767E92;          /* 4.6:1  · o mais fraco permitido em 13px */
  --text-on-brand:#FFFFFF;
  --text-on-light:#0F134C;

  /* borda e divisor */
  --border:rgba(243,245,250,.09);
  --border-strong:rgba(243,245,250,.16);
  --border-focus:var(--brand-azul);

  /* acento · o papel de cada cor foi decidido por contraste, não por gosto.
     azul 7.5:1 · menta 13.0:1 · magenta 4.0:1 · roxo 2.1:1 sobre --bg */
  --accent:#15ABD8;             /* leitura: rótulo, link, seção ativa */
  --accent-weak:rgba(21,171,216,.12);
  --accent-ring:rgba(21,171,216,.34);
  --accent-hot:#D32064;         /* ênfase e preenchimento. texto só em ≥24px */
  --accent-good:#2CECA8;        /* número, confirmação, série primária de dado */
  --accent-deep:#5F2C84;        /* profundidade. nunca texto sobre escuro */

  /* estado de interface */
  --ok:#2CECA8;      --ok-bg:rgba(44,236,168,.12);
  --warn:#F5A524;    --warn-bg:rgba(245,165,36,.12);
  --err:#F0708A;     --err-bg:rgba(240,112,138,.12);
  --info:#15ABD8;    --info-bg:rgba(21,171,216,.12);

  /* interação · um valor por gesto, aplicado igual em todo componente */
  --state-hover:rgba(243,245,250,.06);
  --state-active:rgba(243,245,250,.10);
  --state-selected:var(--accent-weak);
  --state-disabled-opacity:.42;

  /* série de dado · ordem fixa, diferenciadas também por luminosidade */
  --data-1:#2CECA8;
  --data-2:#15ABD8;
  --data-3:#D32064;
  --data-4:#8E4FBE;
  --data-5:#F5A524;
  --data-grid:rgba(243,245,250,.07);
  --data-empty:rgba(243,245,250,.12);

  /* =================================================================
     GRADIENTE · cada um tem papel declarado. Gradiente sem papel vira
     decoração, e decoração repetida vira ruído. São oito, e só oito.
     ================================================================= */

  /* 1 · marca · a ordem é a das faces do símbolo. Assinatura, nunca fundo
         de texto. Usar em filete, borda, preenchimento de forma. */
  --grad-brand:linear-gradient(118deg,#D32064 0%,#5F2C84 30%,#15ABD8 62%,#2CECA8 100%);
  /* 2 · ação · o botão primário. Para em azul: menta no fim puxaria a
         leitura para "confirmado" antes de a pessoa clicar. */
  --grad-action:linear-gradient(118deg,#D32064 0%,#5F2C84 48%,#15ABD8 100%);
  /* 3 · frio · barra de progresso, trilha, série de dado */
  --grad-cool:linear-gradient(118deg,#15ABD8 0%,#2CECA8 100%);
  /* 4 · quente · ênfase curta, selo, número em destaque */
  --grad-warm:linear-gradient(118deg,#D32064 0%,#8E4FBE 100%);
  /* 5 · vidro · o brilho de topo de qualquer painel translúcido */
  --grad-glass:linear-gradient(180deg,rgba(243,245,250,.035),rgba(243,245,250,0) 60%);
  /* 6 · fantasma · preenchimento de botão secundário e de linha */
  --grad-ghost:linear-gradient(180deg,rgba(243,245,250,.07),rgba(243,245,250,0));
  /* 7 · borda · o filete que percorre a borda de um cartão.
         145 graus para o brilho nascer no canto superior esquerdo. */
  --grad-borda:linear-gradient(145deg,rgba(21,171,216,.38) 0%,rgba(243,245,250,.08) 44%,rgba(243,245,250,0) 100%);
  --grad-borda-hot:linear-gradient(145deg,rgba(211,32,100,.40) 0%,rgba(243,245,250,.08) 44%,rgba(243,245,250,0) 100%);
  /* 8 · filete de topo · a linha de 1px que abre uma seção */
  --grad-filete:linear-gradient(90deg,transparent,var(--border-strong) 22%,var(--accent) 50%,var(--border-strong) 78%,transparent);

  /* halo radial · massa de cor atrás do assunto. A porcentagem é onde a
     cor morre; passar disso mancha o fundo e come o contraste do texto. */
  --halo-hot:radial-gradient(circle at 50% 50%,rgba(211,32,100,.30) 0%,transparent 35%);
  --halo-cool:radial-gradient(circle at 50% 50%,rgba(21,171,216,.26) 0%,transparent 35%);
  --halo-deep:radial-gradient(circle at 50% 50%,rgba(95,44,132,.34) 0%,transparent 40%);
  --halo-good:radial-gradient(circle at 50% 50%,rgba(44,236,168,.20) 0%,transparent 30%);

  /* desfoque · três degraus, e nada entre eles */
  --blur-vidro:16px;      /* painel translúcido sobre conteúdo */
  --blur-vidro-forte:24px;/* painel sobre mídia em movimento */
  --blur-halo:120px;      /* massa de cor ambiente, nunca menos */

  /* superfície clara · existe, regida pelo navy do arquivo oficial */
  --paper:#FFFFFF;
  --paper-dim:#F3F5FA;
  --paper-text:#0F134C;
  --paper-text-2:#565D70;
  --paper-border:rgba(15,19,76,.14);

  /* =================================================================
     TIPOGRAFIA
     O wordmark é desenho fechado. Inter e JetBrains Mono são as fontes
     do sistema, nunca da assinatura.
     ================================================================= */
  --font-display:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-ui:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  /* escala · editorial (fluida) e interface (fixa) são escalas distintas */
  --fs-hero:clamp(40px,4.6vw,72px);
  --fs-h1:clamp(32px,3.4vw,48px);
  --fs-h2:clamp(24px,2.4vw,34px);
  --fs-h3:20px;
  --fs-h4:16px;
  --fs-lead:clamp(16px,1.25vw,19px);
  --fs-body:15px;
  --fs-ui:14px;
  --fs-sm:13px;
  --fs-xs:12px;
  --fs-label:10.5px;
  --fs-micro:10px;

  --lh-tight:1.04;
  --lh-snug:1.22;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --fw-air:200;--fw-light:300;--fw-book:400;--fw-med:500;--fw-semi:600;

  --tr-hero:-.035em;
  --tr-h1:-.03em;
  --tr-h2:-.022em;
  --tr-h3:-.015em;
  --tr-label:.18em;
  --tr-kicker:.22em;

  --measure:68ch;        /* largura de leitura de corpo */
  --measure-lead:56ch;
  --measure-head:22ch;

  /* =================================================================
     ESPAÇO, FORMA, ELEVAÇÃO
     ================================================================= */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;

  --r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-2xl:28px;
  --r-3xl:40px;--r-pill:999px;

  /* raio por papel · a escala acima diz quais raios existem; esta diz qual
     deles cada peça usa. Sem este segundo mapa, o raio vira escolha de
     quem está escrevendo o componente, e dois cartões irmãos saem
     diferentes. Componente novo escolhe um destes, não um número. */
  --r-botao:var(--r-pill);     /* botão, aba, pílula de navegação */
  --r-campo:var(--r-md);       /* campo, seletor, caixa de busca */
  --r-selo:var(--r-pill);      /* selo, etiqueta, indicador de estado */
  --r-cartao:var(--r-xl);      /* cartão de conteúdo · o mais comum */
  --r-cartao-alto:var(--r-2xl);/* cartão de destaque, plano, depoimento */
  --r-painel:var(--r-3xl);     /* bloco de chamada que ocupa a largura */
  --r-icone:var(--r-lg);       /* caixa de ícone dentro de um cartão */
  --r-palco:var(--r-lg);       /* palco de mídia, código, demonstração */

  --e-1:0 1px 2px rgba(0,0,0,.34);
  --e-2:0 14px 32px -18px rgba(0,0,0,.72);
  --e-3:0 34px 72px -34px rgba(0,0,0,.82);
  --e-brand:0 20px 44px -22px rgba(211,32,100,.40);

  /* camada · nenhum z-index fora desta lista */
  --z-base:0;--z-raised:10;--z-sticky:30;--z-nav:50;--z-overlay:70;--z-toast:90;

  /* =================================================================
     MOVIMENTO
     ================================================================= */
  --ease:cubic-bezier(.19,1,.22,1);        /* sai rápido, chega devagar */
  --ease-io:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --t-instant:90ms;   /* cor, opacidade de item pequeno */
  --t-fast:160ms;     /* borda, foco, chip */
  --t-base:260ms;     /* transformação de botão, campo, cartão */
  --t-slow:420ms;     /* camada que abre, gradiente que corre */
  --t-scene:820ms;    /* entrada de bloco no scroll · é o teto */

  /* =================================================================
     LAYOUT
     ================================================================= */
  --bp-sm:600px; --bp-md:900px; --bp-lg:1200px; --bp-xl:1480px;
  --topbar:56px;
  --sidebar:256px;
  --content-max:1080px;
  --gutter:clamp(20px,3.4vw,56px);

  color-scheme:dark;
}