/* ==========================================================================
   OTrilho.org — folha compartilhada
   --------------------------------------------------------------------------
   Fonte unica de tokens, reset e regras identicas entre a homepage e a
   pagina de detalhes. Regras que divergem entre as duas paginas permanecem
   no <style> de cada pagina, deliberadamente: unifica-las alteraria o
   visual, o que esta fora do escopo desta refatoracao.

   Valores conforme docs/design/TOKENS.md e DESIGN_SYSTEM.md (handoff v2).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Superficies */
  --color-bg: #FAF8F5;
  --color-bg-warm: #F5F2ED;
  --color-bg-card: #FFFFFF;

  /* Texto */
  --color-text: #1A1A1A;
  --color-text-secondary: #5C5C5C;
  --color-text-quiet: #6A6A6A;   /* texto quiet/muted funcional (4,67:1+) */
  --color-text-muted: #8A8A8A;   /* decorativo/inativo — nunca texto funcional */

  /* Bordas */
  --color-border: #E5E0D8;
  --color-border-strong: #D4CFC5;

  /* Acento terracota */
  --color-accent: #D97B4A;       /* preenchimento, marca, decoracao — nunca texto */
  --color-accent-hover: #C56A3A;
  --color-accent-light: #FDF4F0;
  --color-accent-deep: #A8451F;  /* texto, link, icone funcional sobre claro (5,60:1) */

  /* Grafite */
  --color-dark: #1A1A1A;
  --color-dark-secondary: #2D2D2D;

  /* Texto sobre grafite */
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: rgba(255, 255, 255, 0.7);
  --text-on-dark-quiet: rgba(255, 255, 255, 0.5);

  /* Foco */
  --color-focus-light: #C56A3A;  /* anel de foco sobre superficie clara */
  --color-focus-dark: #F2A735;   /* anel de foco sobre grafite */

  /* Tipografia */
  --font-mono: "IBM Plex Mono", "SF Mono", "Monaco", monospace;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Raio */
  --radius-xs: 2px;    /* icone de arquivo/pasta */
  --radius-sm: 4px;    /* etiquetas */
  --radius-md: 6px;    /* item de lista, nav-link */
  --radius-lg: 8px;    /* card, botao */
  --radius-xl: 12px;   /* price-card, folder-preview */
  --radius-pill: 100px;

  /* Espacamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 28px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;

  /* Movimento */
  --duration-fast: 0.2s;
  --easing-default: ease;
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   3. Componentes identicos nas duas paginas
   -------------------------------------------------------------------------- */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-dark);   /* rotulo grafite: 5,70:1 — nunca branco (3,05:1) */
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-on-dark-secondary);
}

/* --------------------------------------------------------------------------
   4. Foco visivel
   DESIGN_SYSTEM.md §8: contorno 2px, afastamento 2px, cor conforme superficie.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Sobre grafite, o anel claro nao separa o suficiente: usa o token escuro. */
.footer :where(a, button):focus-visible,
.cta-section :where(a, button):focus-visible {
  outline-color: var(--color-focus-dark);
}

/* --------------------------------------------------------------------------
   5. Link para pular a navegacao
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-dark);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--easing-default);
}

.skip-link:focus-visible {
  top: 8px;
}

/* --------------------------------------------------------------------------
   6. Movimento reduzido
   TOKENS.md: prefers-reduced-motion reduz duracoes a 0.01s.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Destinos de ancora recebem foco por script para nao perder o teclado;
   nao devem exibir anel de foco, que so faz sentido em elementos interativos. */
:where(section, main, div)[tabindex="-1"]:focus {
  outline: none;
}