/* Design system — Bio Lucas Mota Web
   Herdado de lucasmotaweb/site (preto + grafite + verde #05EA8F). Só estes tokens podem aparecer na página.
   Tema: escuro é o padrão da marca; claro entra por <html data-theme="light">. */

@font-face { font-family: 'Menbere'; src: url('../fonts/menbere-600-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Menbere'; src: url('../fonts/menbere-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* Cores (tema escuro) */
  --color-bg: #000000;
  --color-surface: #0F0F0F;
  --color-text: #F1F5F9;
  --color-text-strong: #FFFFFF;
  --color-text-muted: #9A9A9A;      /* 7:1 sobre #000 */
  --color-accent: #05EA8F;          /* marca: preenchimentos, selo */
  --color-accent-ink: #05EA8F;      /* verde para ícone/texto sobre o fundo do tema */
  --color-error: #F43F5E;
  --color-border: rgba(255, 255, 255, .10);
  --color-edge: var(--color-border);
  --color-border-soft: rgba(255, 255, 255, .05);
  --color-focus: #05EA8F;

  /* Botão primário: verde chapado. Sem brilho, sem degradê. O contorno (.btn--outline) usa a cor do texto do tema. */
  --btn-bg: #05EA8F;
  --btn-fg: #000000;
  --btn-dur: 500ms;
  --ease-fill: cubic-bezier(.65, 0, .35, 1);   /* mesma curva do botão do site da Kezia */

  /* Selo */

  /* Gradientes */
  --grad-card: linear-gradient(180deg, #1b1c1e 0%, #121314 100%);
  --grad-card-edge: linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.14) 100%);

  /* Sombras */
  /* Hover de cards e acessos: borda verde + brilho leve */
  --hover-line: #05EA8F;
  --beam-color: rgba(5, 234, 143, .5);
  --noise-opacity: .08;
  --glow-cursor: rgba(5, 234, 143, .05);
  --grid-glow-line: rgba(5, 234, 143, .22);
  --glow-hover: 0 0 26px -6px rgba(5, 234, 143, .38);
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -20px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.45);

  /* Tipografia */
  --font-display: 'Menbere', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --fs-name: clamp(1.75rem, 6vw, 2.25rem);   /* 28 → 36 */
  --fs-title: 1.25rem;                       /* 20 — título de seção/projeto */
  --fs-lead: 1.0625rem;                      /* 17 */
  --fs-body: 0.9375rem;                      /* 15 */
  --fs-label: 1rem;                          /* 16 — texto do botão */
  --fs-small: 0.8125rem;                     /* 13 */
  --fs-eyebrow: 0.75rem;                     /* 12 */
  --lh-tight: 1.1;
  --lh-body: 1.5;

  /* Espaçamento (base 4) */
  --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;

  /* Raios */
  --radius: 20px;                /* único raio da página: cards, links, botões, tiles, ícones, fotos */
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-pill: var(--radius);  /* nome mantido por compatibilidade; já não é pílula */

  /* Layout */
  --col: 480px;
  --page: 480px;         /* largura do conteúdo da página: 480 no celular, 960 a partir de 1000 px, 1280 a partir de 1360 px (múltiplos de 80 para alinhar às linhas do fundo) */
  --wide: 1440px;        /* largura máxima da nav no topo */
  --gutter: 16px;
  --tap: 56px;

  /* Movimento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;
  --dur-base: 500ms;           /* hover de cards, tiles, links, botões e controles: 0,5 s suave */
  --dur-slow: 600ms;
  --dur-theme: 300ms;
  --enter-blur: 8px;
  --enter-shift: 16px;
  --dur-nav: 450ms;

  /* Card de projeto: imagem com proporção fixa + corpo de altura mínima fixa, iguais em todos */
  --project-ratio: 11 / 5;
  --project-body: 120px;

  /* Fundo com linhas */
  --grid-line: rgba(255, 255, 255, .04);
  --grid-col: 80px;           /* lado do quadrado da grade; a largura do conteúdo deve ser múltipla de 160 px */


}

/* Tema claro */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F5F5F2;
  --color-surface: #FFFFFF;
  --color-text: #17181A;
  --color-text-strong: #000000;
  --color-text-muted: #5B5B5B;      /* 6,2:1 sobre #F5F5F2 */
  --color-accent-ink: #067A50;      /* 5,3:1 sobre branco */
  --color-border: rgba(0, 0, 0, .12);
  --color-edge: var(--color-border);
  --color-border-soft: rgba(0, 0, 0, .06);
  --color-focus: #067A50;
  --grid-line: rgba(0, 0, 0, .04);
  --color-error: #D1274A;



  --grad-card: linear-gradient(180deg, #FFFFFF 0%, #F0F0ED 100%);
  --grad-card-edge: linear-gradient(160deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.04) 62%, rgba(0,0,0,.12) 100%);
  --hover-line: #067A50;
  --beam-color: rgba(6, 122, 80, .42);
  --noise-opacity: .09;
  --glow-cursor: rgba(6, 122, 80, .06);
  --grid-glow-line: rgba(6, 122, 80, .2);
  --glow-hover: 0 0 24px -6px rgba(6, 122, 80, .32);
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px -16px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-theme: 0ms; --btn-dur: 0ms; --dur-nav: 0ms; --enter-blur: 0px; --enter-shift: 0px; }
}

@media (min-width: 1000px) { :root { --page: 960px; } }
@media (min-width: 1360px) { :root { --page: 1280px; } }