/* ============================================================================
   TOKENS — a unica fonte de valor de design do site.
   docs/STYLEGUIDE.md secao 21.

   REGRA DURA: nenhuma cor, fonte, raio ou duracao escrita a mao fora deste
   arquivo. O light mode (decidido para depois de tudo pronto) e um bloco de
   sobrescrita destes tokens, nao um redesign. Ver STYLEGUIDE secao 20.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------- tipografia */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-accent: "Caveat", "Segoe UI", cursive;

  /* Escala (STYLEGUIDE 4). Hero chega a 96px em telas grandes. */
  /* Hero: na referencia 01 o nome ocupa ~1/4 da largura da pagina. Com 96px
     ele ficava metade disso e o hero perdia o ponto focal. */
  --fs-hero: clamp(3.5rem, 9.4vw, 8.5rem);  /* 56 -> 136 */
  --fs-h1: clamp(2.75rem, 6vw, 4.5rem);     /* 44 -> 72 / lh 80 */
  --fs-h2: clamp(2rem, 4vw, 3rem);          /* 32 -> 48 / lh 56 */
  --fs-h3: clamp(1.5rem, 2.6vw, 2rem);      /* 24 -> 32 / lh 40 */
  --fs-h4: 1.25rem;                         /* 20 / lh 28 */
  --fs-body-lg: 1.125rem;                   /* 18 / lh 28 */
  --fs-body: 1rem;                          /* 16 / lh 24 */
  --fs-caption: 0.875rem;                   /* 14 / lh 20 */
  --fs-micro: 0.75rem;                      /* 12 — eyebrow, metadata */

  --lh-tight: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.02em;

  /* -------------------------------------------------------------- neutros */
  --bg: #050911;            /* midnight, levemente azulado — NUNCA preto puro */
  --bg-secondary: #080d17;
  --surface: #0c1220;
  --surface-elevated: #111827;
  --border: #20283a;
  --border-strong: #596174;

  /* ---------------------------------------------------------------- texto */
  --text: #f5f5f7;
  --text-secondary: #a7acb8;
  /* Muted da referencia era #6F7685: 4.1:1 sobre --surface, abaixo do minimo
     de 4.5:1 da WCAG para texto. Clareado o minimo para passar sobre bg,
     surface e surface-elevated. docs/LAYOUT-RULES.md R9. */
  --text-muted: #7a8190;

  /* ----------------------------------------------------------------- roxo */
  /* Roxo = interacao, identidade ou enfase. Nao e "qualquer coisa bonita". */
  --purple: #8b4dff;
  --purple-bright: #a970ff;
  --purple-deep: #6129c9;
  --purple-soft: #c09aff;
  --purple-glow: #974dff;

  --gradient-purple: linear-gradient(135deg, #6129c9 0%, #a970ff 100%);

  /* ------------------------------------------------------------ semantico */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* ------------------------------------------------------- grid e espaco */
  --container: 1440px;
  --gutter: clamp(1.25rem, 3vw, 3rem);   /* 20 -> 48 */
  --col-gap: 1.5rem;                      /* 24 */

  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  --section-y: clamp(3.5rem, 7vw, 6rem);

  /* Bloco: a caixa de conteudo da home e da pagina de projeto. */
  --block-pad: clamp(1.25rem, 3.2vw, 3rem);  /* 20 -> 48 */
  --block-gap: clamp(1rem, 2.2vw, 2rem);     /* 16 -> 32, entre blocos */

  /* RITMO: a unidade de espaco entre grupos e entre blocos. Uma so, para
     todos os espacos da home serem iguais (pedido dele, 14/09/2026). Escala
     pela altura da tela para os projetos caberem na primeira tela.
     docs/LAYOUT-RULES.md R14. */
  --rhythm: clamp(1rem, min(2.2vw, 3.2vh), 2rem);

  /* Rodape fixo: altura de reserva ate o JS medir a real. */
  --footer-h: 72px;

  /* --------------------------------------------------------------- raio */
  /* Nao passar de 18px: viraria SaaS em vez de interface premium de game. */
  --radius-btn: 8px;
  --radius-img: 10px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------- bordas */
  --glow-soft: 0 0 20px rgba(139, 77, 255, 0.18);
  --glow-strong: 0 0 32px rgba(139, 77, 255, 0.28);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ------------------------------------------------------------- motion */
  --t-ui: 180ms;
  --t-ui-slow: 250ms;
  --t-media: 380ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --------------------------------------------------------- decoracao */
  /* Textura de fundo: 2-5% de opacidade. STYLEGUIDE secao 9. */
  --texture-opacity: 0.035;
  --illustration-opacity: 0.28;

  --nav-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-ui: 0ms;
    --t-ui-slow: 0ms;
    --t-media: 0ms;
  }
}

/* ============================================================================
   LIGHT MODE — decisao dele: entra, mas depois de todo o resto pronto.

   E por isso que tudo acima e token e nada e cor escrita a mao: o tema claro
   e um BLOCO DE SOBRESCRITA, nao um redesign. A mesma identidade, os mesmos
   papeis, valores diferentes. STYLEGUIDE secao 20.

   O escuro continua sendo o padrao. O claro entra so quando ele escolhe,
   e a escolha fica guardada no navegador dele.
   ========================================================================= */

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

  --bg: #f5f4f8;
  --bg-secondary: #ecebf2;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --border: #d9d7e4;
  --border-strong: #b4b1c4;

  --text: #11131a;
  --text-secondary: #5f6470;
  --text-muted: #656a79; /* 4.5:1 sobre --bg-secondary; era #878b98 (2.9:1). LAYOUT-RULES R9 */

  /* O roxo escurece para manter contraste sobre fundo claro. Mesmo papel,
     valor diferente — a regra dos 10% de roxo continua valendo. */
  --purple: #7540e8;
  --purple-bright: #6129c9;
  --purple-deep: #4b1ba3;
  --purple-soft: #7540e8;
  --purple-glow: #7540e8;

  --glow-soft: 0 0 18px rgba(117, 64, 232, 0.16);
  --glow-strong: 0 0 28px rgba(117, 64, 232, 0.22);
  --shadow-card: 0 10px 26px rgba(17, 19, 26, 0.1);

  /* A textura precisa ser mais sutil ainda no claro: linha escura sobre fundo
     claro pesa muito mais que linha clara sobre fundo escuro. */
  --texture-opacity: 0.045;
  --illustration-opacity: 0.16;
}

/* A nav usa um fundo translucido fixo no escuro; no claro ele precisa
   acompanhar, senao o texto escuro cai sobre vidro escuro. */
:root[data-theme="light"] .nav { background: rgba(245, 244, 248, 0.86); }
:root[data-theme="light"] .nav[data-scrolled="true"] { background: rgba(245, 244, 248, 0.96); }
:root[data-theme="light"] .adminbar { background: rgba(236, 235, 242, 0.96); }
:root[data-theme="light"] .modal { background: rgba(17, 19, 26, 0.45); }

/* O scrim do hero escurece a arte para o texto claro ler. No claro ele faz
   o oposto: clareia, para o texto escuro ler. */
:root[data-theme="light"] .hero__scrim {
  background:
    linear-gradient(96deg, var(--bg) 0%, rgba(245, 244, 248, 0.94) 32%, rgba(245, 244, 248, 0.45) 58%, rgba(245, 244, 248, 0.6) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 32%);
}