/* ============================================================================
   Arara Technology — design tokens
   Três camadas: primitivos (valores crus) → semânticos (papel) → componentes.
   O restante do CSS só usa semânticos e de componente; nada de cor solta.
   Paleta tirada da logo: azul elétrico e ciano das penas, dourado do peito,
   fundo preto neutro (#000). O azul é acento, não fundo.
   ========================================================================== */

/* === 1. PRIMITIVOS ====================================================== */
:root{
  /* neutros escuros: preto e cinzas neutros, sem azul (fundo é #000 para os robôs e vídeos fundirem com a página);
     do 600 para cima continua o grafite frio dos textos e do tema claro */
  --arara-ink-1000:#000000;
  --arara-ink-950:#000000;
  --arara-ink-900:#0b0b0b;
  --arara-ink-850:#111111;
  --arara-ink-800:#181818;
  --arara-ink-700:#242424;
  --arara-ink-600:#3a404b;
  --arara-ink-500:#5d6470;
  --arara-ink-400:#8b919c;
  --arara-ink-300:#b5bac3;
  --arara-ink-200:#d5d8de;
  --arara-ink-100:#e8eaee;
  --arara-ink-50:#f3f4f6;
  --arara-white:#fbfbfc;
  /* texto sobre fundo escuro: grafite com um fio de azul, para os cinzas não ficarem mortos */
  --arara-mist-50:#f2f4f7;    /* títulos */
  --arara-mist-200:#c7cdd6;   /* texto principal */
  --arara-mist-400:#9aa3b2;   /* texto secundário */
  --arara-mist-500:#8a93a2;   /* rótulos e microcopy */
  --arara-paper:#f3f1ec;      /* off-white editorial dos botões claros */

  /* marca */
  --arara-blue-600:#0667c2;
  --arara-blue-500:#0883ee;   /* azul elétrico da logo */
  --arara-blue-400:#3b9dff;
  --arara-cyan-300:#38ccf9;   /* brilho das penas */
  --arara-gold-500:#c9971c;
  --arara-gold-400:#f7c751;   /* peito da arara (cru: amarelo demais para a interface) */
  --arara-gold-300:#d9bc84;   /* ouro champagne: o dourado usado na interface escura */
  --arara-navy-900:#01102c;   /* fundo da logo */

  /* tipografia */
  --arara-font-display:'Sora','Geist',system-ui,sans-serif;
  --arara-font-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arara-font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* escala tipográfica (fluida entre 375px e 1440px) */
  --arara-fs-hero:clamp(2.5rem,1.35rem + 4.9vw,5rem);
  --arara-fs-h2:clamp(2rem,1.3rem + 2.6vw,3.5rem);
  --arara-fs-h2-sm:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);
  --arara-fs-cta:clamp(2.5rem,1.6rem + 3.6vw,4.75rem);
  --arara-fs-h3:1.25rem;
  --arara-fs-lead:clamp(1rem,.95rem + .3vw,1.1875rem);
  --arara-fs-body:1rem;
  --arara-fs-sm:.875rem;
  --arara-fs-xs:.8125rem;
  --arara-fs-label:.75rem;
  --arara-lh-tight:1.04;
  --arara-lh-snug:1.2;
  --arara-lh-body:1.55;
  --arara-track-display:-.035em;
  --arara-track-title:-.02em;
  --arara-track-label:.14em;

  /* espaçamento (base 4px) */
  --arara-space-1:4px;
  --arara-space-2:8px;
  --arara-space-3:12px;
  --arara-space-4:16px;
  --arara-space-5:24px;
  --arara-space-6:32px;
  --arara-space-7:48px;
  --arara-space-8:64px;
  --arara-space-9:96px;
  --arara-space-10:128px;
  --arara-section:clamp(88px,9vw,152px);

  /* grade */
  --arara-wrap:1240px;
  --arara-gutter:clamp(20px,4.5vw,72px);

  /* raios: superfícies grandes mais suaves, peças internas mais firmes */
  --arara-radius-xs:6px;
  --arara-radius-sm:10px;
  --arara-radius:14px;
  --arara-radius-lg:20px;
  --arara-radius-xl:28px;
  --arara-radius-pill:999px;

  /* movimento */
  --arara-ease:cubic-bezier(.32,.72,0,1);       /* assinatura: arranque firme, pouso longo */
  --arara-ease-out:cubic-bezier(.16,1,.3,1);
  --arara-dur-1:.16s;   /* resposta a toque e hover */
  --arara-dur-2:.42s;   /* troca de estado */
  --arara-dur-3:.8s;    /* entrada de bloco */

  /* desfoque: só em elementos fixos */
  --arara-blur:16px;

  /* camadas */
  --arara-z-raised:10;
  --arara-z-overlay:40;
  --arara-z-nav:100;
  --arara-z-skip:200;
  --arara-z-intro:300;  /* abertura cinematográfica: cobre tudo enquanto existe */
}

/* === 2. SEMÂNTICOS ====================================================== */
/* Tema escuro é o padrão da marca; o palco do hero (.band), o cartão da chamada final (.cta__card) e as molduras das
   experiências interativas (.xp__frame, .xsheet) ficam escuros em qualquer tema. */
:root,:root[data-theme="dark"],.band,.cta__card,.xp__frame,.xsheet{
  --arara-bg:var(--arara-ink-950);
  --arara-surface:var(--arara-ink-950);       /* faixas de seção: o mesmo preto da página */
  --arara-panel:var(--arara-ink-850);
  --arara-raised:var(--arara-ink-800);
  --arara-text:var(--arara-mist-50);
  --arara-text-2:var(--arara-mist-200);
  --arara-muted:var(--arara-mist-400);
  --arara-label:var(--arara-mist-500);
  --arara-btn-surface:var(--arara-paper);
  --arara-border:rgba(255,255,255,.08);
  --arara-border-strong:rgba(255,255,255,.16);
  --arara-hover:rgba(255,255,255,.06);
  --arara-blue:var(--arara-blue-500);
  --arara-blue-ink:var(--arara-blue-400);     /* azul para texto e traço sobre fundo escuro */
  --arara-gold:var(--arara-gold-300);
  --arara-glow:rgba(8,131,238,.18);
  --arara-grid-dot:rgba(255,255,255,.07);
  --arara-glass:rgba(0,0,0,.72);
  --arara-shadow-color:0 0 0;
  --arara-highlight:inset 0 1px 0 rgba(255,255,255,.06);
  --arara-shadow-sm:0 10px 28px -16px rgb(var(--arara-shadow-color) / .9);
  --arara-shadow:0 28px 70px -32px rgb(var(--arara-shadow-color) / .95);
  --arara-shadow-accent:0 0 0 1px rgba(8,131,238,.38),0 16px 40px -24px rgba(8,131,238,.45);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --arara-bg:var(--arara-ink-50);
  --arara-surface:#eceef1;
  --arara-panel:var(--arara-white);
  --arara-raised:var(--arara-white);
  --arara-text:#0b0d11;
  --arara-text-2:#3d434d;
  --arara-muted:var(--arara-ink-500);
  --arara-label:var(--arara-ink-500);
  --arara-btn-surface:var(--arara-text);
  --arara-border:rgba(8,9,12,.10);
  --arara-border-strong:rgba(8,9,12,.20);
  --arara-hover:rgba(8,9,12,.05);
  --arara-blue:var(--arara-blue-500);
  --arara-blue-ink:var(--arara-blue-600);
  --arara-gold:var(--arara-gold-500);
  --arara-glow:rgba(8,131,238,.14);
  --arara-grid-dot:rgba(8,9,12,.09);
  --arara-glass:rgba(251,251,252,.78);
  --arara-shadow-color:36 44 60;
  --arara-highlight:inset 0 1px 0 rgba(255,255,255,.7);
  --arara-shadow-sm:0 10px 28px -16px rgb(var(--arara-shadow-color) / .28);
  --arara-shadow:0 28px 70px -32px rgb(var(--arara-shadow-color) / .34);
  --arara-shadow-accent:0 0 0 1px rgba(8,131,238,.5),0 18px 48px -22px rgba(8,131,238,.4);
  color-scheme:light;
}
@media(prefers-color-scheme:light){
  :root[data-theme="auto"]{
    --arara-bg:var(--arara-ink-50);
    --arara-surface:#eceef1;
    --arara-panel:var(--arara-white);
    --arara-raised:var(--arara-white);
    --arara-text:#0b0d11;
    --arara-text-2:#3d434d;
    --arara-muted:var(--arara-ink-500);
  --arara-label:var(--arara-ink-500);
  --arara-btn-surface:var(--arara-text);
    --arara-border:rgba(8,9,12,.10);
    --arara-border-strong:rgba(8,9,12,.20);
    --arara-hover:rgba(8,9,12,.05);
    --arara-blue:var(--arara-blue-500);
    --arara-blue-ink:var(--arara-blue-600);
    --arara-gold:var(--arara-gold-500);
    --arara-glow:rgba(8,131,238,.14);
    --arara-grid-dot:rgba(8,9,12,.09);
    --arara-glass:rgba(251,251,252,.78);
    --arara-shadow-color:36 44 60;
    --arara-highlight:inset 0 1px 0 rgba(255,255,255,.7);
    --arara-shadow-sm:0 10px 28px -16px rgb(var(--arara-shadow-color) / .28);
    --arara-shadow:0 28px 70px -32px rgb(var(--arara-shadow-color) / .34);
    --arara-shadow-accent:0 0 0 1px rgba(8,131,238,.5),0 18px 48px -22px rgba(8,131,238,.4);
    color-scheme:light;
  }
}

/* === 3. COMPONENTES ===================================================== */
/* Repetidos nas peças sempre escuras porque variável que aponta para outra é resolvida no elemento onde foi declarada. */
:root,.band,.cta__card,.xp__frame,.xsheet{
  /* botão */
  --arara-btn-bg:var(--arara-btn-surface);
  --arara-btn-ink:var(--arara-bg);
  --arara-btn-chip:var(--arara-blue);
  --arara-btn-chip-ink:var(--arara-on-accent);
  --arara-btn-radius:var(--arara-radius);
  --arara-btn-h:56px;
  --arara-btn-h-sm:42px;

  /* cartão com moldura dupla: casca externa + miolo */
  --arara-card-shell:var(--arara-surface);
  --arara-card-core:var(--arara-panel);
  --arara-card-radius:var(--arara-radius-xl);
  --arara-card-pad:8px;
  --arara-card-core-radius:calc(var(--arara-card-radius) - var(--arara-card-pad));

  /* etiqueta */
  --arara-chip-bg:var(--arara-hover);
  --arara-chip-radius:var(--arara-radius-xs);

  /* acento e peças que não mudam com o tema (janela, telefone, painel de código, pranchas dos esquemas) */
  --arara-on-accent:#fff;
  --arara-blue-line:rgba(8,131,238,.5);
  --arara-blue-halo:rgba(8,131,238,.18);
  --arara-on-dark-line:rgba(255,255,255,.12);
  --arara-on-dark-ring:rgba(255,255,255,.035);
  --arara-on-dark-muted:rgba(255,255,255,.62);
  --arara-on-light-muted:rgba(8,9,12,.62);
  --arara-plate-dark:#000;
  --arara-plate-light:#fff;

  /* barra de navegação */
  --arara-nav-h:64px;
  --arara-nav-top:14px;
  --arara-nav-radius:var(--arara-radius-lg);

  /* traço de circuito (detalhe gráfico da marca) */
  --arara-trace:linear-gradient(90deg,var(--arara-blue) 0,var(--arara-border-strong) 28%,var(--arara-border) 100%);
}