/* ============================================================
   AGENDA 63 — DESIGN SYSTEM
   Fonte da verdade dos tokens. Todo produto da Agenda 63
   (site, painel do parceiro, Passaporte 63) consome este arquivo.

   Camadas, nesta ordem:
     1. Marca      — cores primitivas, tiradas da logo. Nunca usar direto na UI.
     2. Semântica  — o papel que a cor exerce. É isso que a UI usa.
     3. Categorias — uma cor por tipo de evento.
     4. Tipografia, espaço, forma, sombra, movimento.
     5. Tema escuro — redefine só a camada semântica.

   Regra: componente nunca escreve hex. Só var(--token).
   ============================================================ */

:root{
  /* ---------- 1. MARCA (extraída da logo 63) ---------- */
  --a63-folha:#6ea84a;      /* palmeira do 6 */
  --a63-agua:#2ea9b6;       /* teal do bojo do 6 */
  --a63-rio:#3d8fd0;        /* azul da água */
  --a63-sol:#f5c02e;        /* sol no centro do 6 */
  --a63-por-do-sol:#f4713a; /* laranja do arco superior do 3 */
  --a63-coral:#ee5a7d;      /* rosa do 3 */
  --a63-noite:#8563c9;      /* roxo do arco inferior do 3 */
  --a63-ponte:#17283f;      /* navy do lettering AGENDA e da ponte */

  /* gradiente da marca — só em faixas finas e detalhes, nunca em fundo grande */
  --a63-marca:linear-gradient(95deg,
    var(--a63-folha) 0%, var(--a63-agua) 22%, var(--a63-rio) 40%,
    var(--a63-noite) 60%, var(--a63-coral) 78%, var(--a63-por-do-sol) 100%);

  /* tons do material impresso da marca (o PDF): papel creme, ondas e blobs */
  --a63-creme:#fdfcf8;
  --a63-verde-agua:#8fd3c8;   /* onda clara do rodapé */
  --a63-verde-agua-2:#b9e4dc;
  --a63-amarelo:#fbc04a;      /* blob do topo */
  --a63-laranja-2:#f9a03c;
  --a63-manuscrito:#7cc6d1;   /* "Palmas vive mais aqui" */

  /* superfícies pastel dos ícones circulares do material */
  --pastel-laranja:#fdeade;
  --pastel-teal:#dff2f2;
  --pastel-rosa:#fde6ea;
  --pastel-amarelo:#fdf0d6;
  --pastel-roxo:#eee8fa;
  --pastel-azul:#e4eefb;
  --pastel-verde:#e6f3e4;

  /* ---------- 2. SEMÂNTICA ---------- */
  --paper:#fdfcfa;    /* fundo da página */
  --card:#ffffff;     /* superfície elevada */
  --wash:#f5f3ef;     /* superfície rebaixada */
  --wash-2:#faf8f5;   /* superfície rebaixada, mais clara */
  --ink:var(--a63-ponte);  /* texto principal */
  --ink-2:#44577a;         /* texto secundário */
  --muted:#7d8a9f;         /* texto de apoio, legendas */
  --line:#e3e0d9;          /* borda visível */
  --line-2:#eeeae3;        /* borda interna, divisória de grade */

  --acento:var(--a63-agua);        /* ação, foco, hover */
  --acento-forte:var(--a63-ponte); /* botão primário */
  --positivo:var(--a63-folha);     /* gratuito, confirmado */
  --alerta:var(--a63-por-do-sol);  /* fundador, destaque comercial */

  /* ---------- 3. CATEGORIAS DE EVENTO ---------- */
  --c-musica:var(--a63-por-do-sol);
  --c-cinema:var(--a63-noite);
  --c-teatro:var(--a63-coral);
  --c-esporte:var(--a63-folha);
  --c-literatura:var(--a63-rio);
  --c-negocios:#4d6485;
  --c-infantil:#d99a10;

  /* ---------- 4. TIPOGRAFIA ---------- */
  --sans:"Plus Jakarta Sans","DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;  /* títulos */
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;   /* rótulos, datas */

  --t-kicker:11px;   /* rótulo mono, letter-spacing .17em, caixa alta */
  --t-legenda:12px;
  --t-apoio:13.5px;
  --t-corpo:15px;
  --t-titulo-3:18px;
  --t-titulo-2:clamp(30px,4.3vw,52px);
  --t-titulo-1:clamp(38px,7.2vw,84px);


  /* ---------- 4b. LINGUAGEM VISUAL (redesign 2026) ----------
     Azul-marinho profundo é a base estrutural; turquesa é a cor principal
     de ação; as demais cores da logo só entram como acento pontual. */
  --noite-profunda:#0c1a2b;   /* painéis escuros: Passaporte, Taquaruçu, rodapé */
  --noite-2:#132a42;          /* superfície elevada dentro do painel escuro */
  --noite-linha:rgba(255,255,255,.12);
  --noite-texto:#e8eef7;
  --noite-apoio:#9fb2c9;

  /* recorte orgânico tirado do bojo do "6" da logo — usar como máscara de
     imagem, tile de categoria e recorte de ilustração. Nunca inventar outra. */
  --mask-63:46% 14% 46% 14% / 38% 22% 38% 22%;
  --mask-63-suave:38% 20% 38% 20% / 30% 26% 30% 26%;

  /* escalas de título com contraste maior (o brief pediu título mais forte) */
  --t-display:clamp(42px,7.4vw,92px);
  --t-secao:clamp(28px,4.2vw,50px);

  --r-2xl:32px;
  --gap-secao:clamp(56px,8vw,112px);
  --ease-suave:.42s cubic-bezier(.22,.61,.24,1);

  /* ---------- 5. FORMA, ESPAÇO, SOMBRA, MOVIMENTO ---------- */
  --r-sm:9px;    /* botão, campo */
  --r-md:13px;   /* chip de dia, mini-card */
  --r-lg:18px;   /* card */
  --r-xl:24px;   /* painel, nav */
  --r-pill:999px;

  --gut:clamp(16px,4vw,40px);   /* respiro lateral da página */
  --maxw:1200px;

  --shadow-float:0 1px 2px rgba(23,40,63,.05), 0 14px 28px -10px rgba(23,40,63,.10), 0 44px 80px -30px rgba(23,40,63,.18);
  --shadow-pill:0 1px 2px rgba(23,40,63,.06), 0 10px 26px -12px rgba(23,40,63,.20);
  --shadow-soft:0 1px 2px rgba(23,40,63,.04), 0 8px 18px -10px rgba(23,40,63,.12);

  --ease:.18s cubic-bezier(.2,.8,.2,1);
}

/* ---------- 6. TEMA ESCURO ---------- */
/* Só a camada semântica muda. A camada de marca é a mesma; as cores de
   categoria clareiam para manter contraste sobre fundo escuro. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d1119;
    --card:#121822;
    --wash:#161d28;
    --wash-2:#101620;
    --ink:#eef2f8;
    --ink-2:#c2cddd;
    --muted:#8494ab;
    --line:#233042;
    --line-2:#1b2532;
    --shadow-float:0 1px 2px rgba(0,0,0,.6), 0 28px 64px -24px rgba(0,0,0,.8);
    --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -14px rgba(0,0,0,.75);
    --shadow-soft:0 1px 2px rgba(0,0,0,.45), 0 10px 20px -12px rgba(0,0,0,.6);
    --c-musica:#ff9057;
    --c-cinema:#ab8ae8;
    --c-teatro:#ff87a5;
    --c-esporte:#8fce6b;
    --c-literatura:#68b0ee;
    --c-negocios:#9fb1cb;
    --c-infantil:#f5c02e;
    --positivo:#8fce6b;
    --alerta:#ff9057;
    --a63-creme:#0d1119;
    --a63-verde-agua:#17494b;
    --a63-verde-agua-2:#123a3d;
    --a63-amarelo:#6f5516;
    --a63-laranja-2:#7a4517;
    --pastel-laranja:#2a1c14;
    --pastel-teal:#122428;
    --pastel-rosa:#2a1620;
    --pastel-amarelo:#2a2213;
    --pastel-roxo:#1e1830;
    --pastel-azul:#131e2e;
    --pastel-verde:#152418;
  }
}
:root[data-theme="dark"]{
  --paper:#0d1119;
  --card:#121822;
  --wash:#161d28;
  --wash-2:#101620;
  --ink:#eef2f8;
  --ink-2:#c2cddd;
  --muted:#8494ab;
  --line:#233042;
  --line-2:#1b2532;
  --shadow-float:0 1px 2px rgba(0,0,0,.6), 0 28px 64px -24px rgba(0,0,0,.8);
  --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -14px rgba(0,0,0,.75);
  --shadow-soft:0 1px 2px rgba(0,0,0,.45), 0 10px 20px -12px rgba(0,0,0,.6);
  --c-musica:#ff9057;
  --c-cinema:#ab8ae8;
  --c-teatro:#ff87a5;
  --c-esporte:#8fce6b;
  --c-literatura:#68b0ee;
  --c-negocios:#9fb1cb;
  --c-infantil:#f5c02e;
  --positivo:#8fce6b;
  --alerta:#ff9057;
  --a63-creme:#0d1119;
  --a63-verde-agua:#17494b;
  --a63-verde-agua-2:#123a3d;
  --a63-amarelo:#6f5516;
  --a63-laranja-2:#7a4517;
  --pastel-laranja:#2a1c14;
  --pastel-teal:#122428;
  --pastel-rosa:#2a1620;
  --pastel-amarelo:#2a2213;
  --pastel-roxo:#1e1830;
  --pastel-azul:#131e2e;
  --pastel-verde:#152418;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--a63-rio);outline-offset:3px;border-radius:5px}
::selection{background:color-mix(in srgb,var(--a63-agua) 28%,transparent)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}