/*
  Cores e medidas compartilhadas pelas duas páginas.
  Sem escolha na navbar, claro/escuro segue o sistema. O bloco escuro aparece
  duas vezes de propósito: uma para o sistema (@media) e outra para a escolha
  explícita ([data-theme="dark"]); CSS não permite juntar os dois seletores.

  Pontos de quebra (var() não funciona dentro de @media, então ficam como convenção;
  use só estes, sempre com max-width):
    560px  celular estreito (cartão de links e painel em tela cheia)
    760px  carrossel da página Dev; espelhado em MQ.mobile (js/utils.js), que também
           pega o celular deitado: (max-height: 500px) and (hover: none)
    900px  página Dev em duas colunas
  Dentro dos cards e do painel, prefira container queries (dev.css).
*/
:root {
  --page: #f5f5f5;
  --card: #ffffff;
  --row: #efeff1;
  --mark: #ffffff;
  --text: #0b0b0b;
  --text-2: #6e6e73;
  --text-3: #aeaeb2;
  --text-body: #3a3a3c;
  --btn: #0b0b0b;
  --btn-mark: rgba(255, 255, 255, 0.14);
  --pill: #080808;
  --accent: #f76b15;
  --on-accent: #ffffff;
  --focus: #f76b15;
  --surface: #ffffff;
  --surface-2: #efeff1;
  --surface-press: #e3e3e8;
  --rule: rgba(0, 0, 0, 0.09);
  --glass: rgba(250, 250, 252, 0.9);
  --backdrop-dim: rgba(0, 0, 0, 0.3);
  --card-edge: rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 24px 60px rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 32px 70px rgba(0, 0, 0, 0.08);
  --r: 12px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-page: cubic-bezier(0.32, 0.72, 0, 1);
  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --display: 'Inter Tight', var(--sans);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Layout */
  --gutter: 16px; /* margem lateral mínima da página */
  --tap: 44px; /* alvo mínimo de toque */
  --nav-space: calc(96px + env(safe-area-inset-bottom)); /* espaço livre embaixo para a navbar */
  --stage-max: clamp(920px, 56vw, 1120px); /* largura máxima da página Dev */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='beige']) {
    --page: #08080a;
    --card: #161618;
    --row: rgba(255, 255, 255, 0.08);
    --mark: #161618;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #636366;
    --text-body: #d1d1d6;
    --btn: rgba(255, 255, 255, 0.14);
    --btn-mark: rgba(255, 255, 255, 0.12);
    --pill: #161618;
    --accent: #ff8b3e;
    --focus: #ff8b3e;
    --surface: #232326;
    --surface-2: rgba(255, 255, 255, 0.08);
    --surface-press: rgba(255, 255, 255, 0.14);
    --rule: rgba(255, 255, 255, 0.1);
    --glass: rgba(30, 30, 32, 0.92);
    --backdrop-dim: rgba(0, 0, 0, 0.55);
    --card-edge: rgba(255, 255, 255, 0.06);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 30px 70px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --page: #08080a;
  --card: #161618;
  --row: rgba(255, 255, 255, 0.08);
  --mark: #161618;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #636366;
  --text-body: #d1d1d6;
  --btn: rgba(255, 255, 255, 0.14);
  --btn-mark: rgba(255, 255, 255, 0.12);
  --pill: #161618;
  --accent: #ff8b3e;
  --focus: #ff8b3e;
  --surface: #232326;
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-press: rgba(255, 255, 255, 0.14);
  --rule: rgba(255, 255, 255, 0.1);
  --glass: rgba(30, 30, 32, 0.92);
  --backdrop-dim: rgba(0, 0, 0, 0.55);
  --card-edge: rgba(255, 255, 255, 0.06);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 30px 70px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Bege: tons de areia, mesmo preto do claro e sombra quente. */
:root[data-theme='beige'] {
  --page: #f0ebe1;
  --card: #fdfcf9;
  --row: #f5f0e8;
  --surface-2: #f5f0e8;
  --surface-press: #ede6da;
  --rule: rgba(70, 50, 25, 0.12);
  --glass: rgba(253, 252, 249, 0.93);
  --backdrop-dim: rgba(40, 28, 15, 0.3);
  --card-edge: rgba(70, 50, 25, 0.06);
  --shadow: 0 0 0 1px rgba(70, 50, 25, 0.05), 0 2px 4px rgba(70, 50, 25, 0.05), 0 14px 32px -10px rgba(70, 50, 25, 0.16),
    0 36px 70px -28px rgba(70, 50, 25, 0.22);
  --shadow-lift: 0 0 0 1px rgba(70, 50, 25, 0.06), 0 3px 6px rgba(70, 50, 25, 0.06),
    0 20px 40px -12px rgba(70, 50, 25, 0.2), 0 48px 90px -30px rgba(70, 50, 25, 0.28);
}