/* =========================================================
   RATIO — base.css
   Design tokens, reset e estilos de base do documento.
   Não contém estilos de componentes ou layout específico.
   ========================================================= */

/* ---------------------------------------------------------
   Design Tokens
   --------------------------------------------------------- */
:root {
  /* --- Paleta de cores --- */
  --color-bg-primary:     #F3EBDD;
  --color-bg-secondary:   #EAE3D6;
  --color-bg-card:        #F7F2E8;
  --color-bg-invert:      #1A2230;

  --color-text-primary:   #1A2230;
  --color-text-secondary: #5B5F66;
  --color-text-muted:     #8A8F96;
  --color-text-invert:    #F3EBDD;

  --color-brand-navy:     #1A2230;
  --color-brand-bronze:   #8A6A3B;
  --color-brand-gold:     #A07C3B;

  --color-border:         #D7CCBC;
  --color-border-light:   #E8E1D4;

  /* --- Tipografia --- */
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:  'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Escala tipográfica (rem) */
  --text-xs:   0.6875rem;   /*  11px */
  --text-sm:   0.8125rem;   /*  13px */
  --text-base: 1rem;        /*  16px */
  --text-md:   1.125rem;    /*  18px */
  --text-lg:   1.25rem;     /*  20px */
  --text-xl:   1.5rem;      /*  24px */
  --text-2xl:  1.875rem;    /*  30px */
  --text-3xl:  2.25rem;     /*  36px */
  --text-4xl:  3rem;        /*  48px */
  --text-5xl:  3.75rem;     /*  60px */
  --text-6xl:  4.5rem;      /*  72px */

  /* --- Espaçamento --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-11: 6rem;      /* 96px */
  --space-12: 8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:   1240px;
  --reading-max:     72ch;
  --reading-narrow:  56ch;

  /* --- Seções --- */
  --section-padding-y: 6rem;
  --section-padding-x: var(--space-6);

  /* --- Bordas e raios --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* --- Sombras --- */
  --shadow-soft:   0 1px 4px rgba(26, 34, 48, 0.05), 0 4px 16px rgba(26, 34, 48, 0.06);
  --shadow-medium: 0 2px 8px rgba(26, 34, 48, 0.08), 0 8px 32px rgba(26, 34, 48, 0.08);
  --shadow-card:   0 1px 3px rgba(26, 34, 48, 0.04), 0 4px 12px rgba(26, 34, 48, 0.06);

  /* --- Componentes --- */
  --header-height:    88px;
  --card-min-height:  280px;

  /* --- Transições --- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* --- Z-index --- */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  400;

  /* --- Acessibilidade: escala de fonte ajustável --- */
  --font-size-scale: 1;
}

/* Alto contraste */
[data-high-contrast="true"] {
  --color-bg-primary:     #FFFFFF;
  --color-bg-secondary:   #F0F0F0;
  --color-bg-card:        #FFFFFF;
  --color-bg-invert:      #000000;
  --color-text-primary:   #000000;
  --color-text-secondary: #111111;
  --color-text-muted:     #333333;
  --color-text-invert:    #FFFFFF;
  --color-brand-bronze:   #5C420D;
  --color-brand-gold:     #5C420D;
  --color-border:         #000000;
  --color-border-light:   #555555;
}

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

html {
  font-size: calc(16px * var(--font-size-scale));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semi);
  line-height: 1.15;
  color: var(--color-text-primary);
}

p {
  max-width: var(--reading-max);
}

/* ---------------------------------------------------------
   Estilos de base de foco (acessibilidade)
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------
   Seleção de texto
   --------------------------------------------------------- */
::selection {
  background-color: rgba(160, 124, 59, 0.18);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------
   Skip link de acessibilidade
   --------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--color-brand-navy);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  z-index: var(--z-overlay);
  transition: top var(--transition-fast);
  border-radius: var(--radius-md);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------------------------------------------------------
   Utilitário: sr-only
   --------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   Animações de entrada ao scroll
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }

/* ---------------------------------------------------------
   Utilitários de visibilidade
   --------------------------------------------------------- */
.visually-hidden { @extend .sr-only; }