/* =============================================================
   DESIGN TOKENS

   Estrutura em 2 camadas:

   1) PRIMITIVOS  — escala bruta (cores, tamanhos, espaçamentos).
                    NÃO usar direto nos componentes.
   2) SEMÂNTICOS  — papéis na UI (texto principal, feedback, etc).
                    SEMPRE usar esses nos componentes.

   Mudar tema/marca = trocar SEMÂNTICOS, não componentes.
   ============================================================= */


/* ===== 1. PRIMITIVOS ========================================= */
:root{

  /* --- cores cruas --- */
  --c-white:#ffffff;
  --c-gray-25:#fbfbfd;
  --c-gray-50:#f5f5f7;
  --c-gray-100:#f2f2f2;
  --c-gray-200:#e5e5e5;
  --c-gray-300:#eeeeee;
  --c-gray-400:#999999;
  --c-gray-500:#6e6e73;
  --c-gray-700:#1d1d1f;
  --c-black:#111111;

  --c-blue-500:#0a84ff;
  --c-green-50:#e9f9ef;
  --c-green-500:#18a34a;
  --c-red-50:#fff0f0;
  --c-red-500:#d92d20;

  /* --- radius --- */
  --radius-sm:5px;

  /* --- espaçamento (base 4px) --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;

  /* --- shadow --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --shadow-md:0 10px 35px rgba(0,0,0,.06);
  --shadow-lg:0 18px 50px rgba(0,0,0,.08);
  --shadow-xl:0 30px 80px rgba(0,0,0,.18);

  /* --- tipografia: família --- */
  --font:'Inter','-apple-system',BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* --- tipografia: tamanhos fluidos (mobile → desktop) --- */
  --fs-xs:   clamp(11px, 0.75vw + 9px, 12px);
  --fs-sm:   clamp(13px, 0.85vw + 10px, 14px);
  --fs-base: clamp(15px, 1vw + 11px, 16px);
  --fs-md:   clamp(16px, 1.2vw + 12px, 18px);
  --fs-lg:   clamp(18px, 1.5vw + 13px, 22px);
  --fs-xl:   clamp(22px, 2vw + 14px, 28px);
  --fs-2xl:  clamp(24px, 2.5vw + 16px, 32px);
  --fs-3xl:  clamp(28px, 4vw + 18px, 42px);

  /* --- tipografia: pesos --- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* --- tipografia: line-height --- */
  --lh-tight:1.2;
  --lh-normal:1.5;
}


/* ===== 2. SEMÂNTICOS ========================================= */
:root{

  /* --- superfícies (fundos) --- */
  --surface-page:        var(--c-gray-50);
  --surface-card:        var(--c-white);
  --surface-subtle:      var(--c-gray-25);
  --surface-glass:       rgba(255,255,255,.72);
  --surface-overlay:     rgba(0,0,0,.4);
  --surface-muted:       var(--c-gray-100);

  /* --- texto --- */
  --text-primary:        var(--c-gray-700);
  --text-secondary:      var(--c-gray-500);
  --text-tertiary:       #777;
  --text-on-emphasis:    var(--c-white);

  /* --- feedback (semântica de cor) --- */
  --feedback-positive:       var(--c-green-500);
  --feedback-positive-bg:    var(--c-green-50);
  --feedback-negative:       var(--c-red-500);
  --feedback-negative-bg:    var(--c-red-50);

  /* --- accent (estado ativo de controles: switch, link, foco) --- */
  --accent:                  var(--c-blue-500);

  /* --- bordas --- */
  --border-default:      var(--c-gray-200);
  --border-divider:      var(--c-gray-300);
  --border-focus:        var(--c-gray-400);
  --border-glass:        rgba(255,255,255,.7);

  /* --- ações (botões) --- */
  --action-primary-bg:   var(--c-black);
  --action-primary-fg:   var(--c-white);
  --action-secondary-bg: var(--c-gray-100);
  --action-secondary-fg: var(--text-primary);

  /* --- tipografia: papéis --- */
  --type-display:        var(--fs-3xl);   /* hero */
  --type-heading:        var(--fs-2xl);   /* h1 */
  --type-subheading:     var(--fs-xl);    /* h2, KPI */
  --type-title:          var(--fs-lg);    /* h3 */
  --type-body-lg:        var(--fs-md);    /* corpo destacado */
  --type-body:           var(--fs-base);  /* corpo padrão */
  --type-body-sm:        var(--fs-sm);    /* auxiliar */
  --type-caption:        var(--fs-xs);    /* legenda, tag */
}


/* ===== 3. DARK MODE ==========================================
   Sobrescreve apenas os SEMÂNTICOS — primitivos seguem iguais.
   Componentes não precisam saber que o tema mudou.
   ============================================================= */
:root[data-theme="dark"]{

  /* superfícies */
  --surface-page:        #0a0a0c;
  --surface-card:        #1c1c1e;
  --surface-subtle:      #18181b;
  --surface-muted:       #2c2c2e;
  --surface-glass:       rgba(28,28,30,.72);
  --surface-overlay:     rgba(0,0,0,.6);

  /* texto */
  --text-primary:        var(--c-gray-50);
  --text-secondary:      #a1a1a6;
  --text-tertiary:       #86868b;
  --text-on-emphasis:    var(--c-black);

  /* feedback (tons mais vivos pra contraste em fundo escuro) */
  --feedback-positive:       #30d158;
  --feedback-positive-bg:    rgba(48,209,88,.15);
  --feedback-negative:       #ff453a;
  --feedback-negative-bg:    rgba(255,69,58,.15);

  /* bordas */
  --border-default:      #2c2c2e;
  --border-divider:      #3a3a3c;
  --border-focus:        var(--c-gray-500);
  --border-glass:        rgba(255,255,255,.1);

  /* ações (estilo Apple: inverte botão primário) */
  --action-primary-bg:   var(--c-white);
  --action-primary-fg:   var(--c-black);
  --action-secondary-bg: #2c2c2e;
  --action-secondary-fg: var(--text-primary);
}


/* ===== Reset + base global ==================================== */
*{margin:0;padding:0;box-sizing:border-box}

:root{                          color-scheme:light}
:root[data-theme="dark"]{       color-scheme:dark}

body{
  font-family:var(--font);
  background:var(--surface-page);
  color:var(--text-primary);
  transition:background .25s ease, color .25s ease;
}