/*
Theme Name: IPB Lavras
Theme URI: https://iplavras.org.br
Author: IPB Lavras
Description: Tema oficial da Igreja Presbiteriana de Lavras — reformada, confessional e fraterna.
Version: 1.1.0
License: GNU General Public License v2 or later
Text Domain: ipb-lavras
*/

/* =============================================
   TOKENS
   ============================================= */
:root {
  --cream: oklch(97% .005 145);
  --accent: oklch(52% .17 145);
  --border: oklch(90% .01 145);

  --green: oklch(52% .17 145);
  --green-900: #1a3a2a;
  --green-700: #1f6b3a;
  --green-600: #2d8a4e;
  --green-500: #3aaa64;
  --green-100: #e8f5ee;
  --green-50:  #f2faf5;

  --dark-900: #0d1f17;
  --dark-800: #111c14;

  --neutral-900: #1a1a1a;
  --neutral-700: #3d3d3d;
  --neutral-600: #545454;
  --neutral-500: #6b6b6b;
  --neutral-400: #989898;
  --neutral-300: #c4c4c4;
  --neutral-200: #dcdcd8;
  --neutral-100: #f0f0ec;
  --neutral-50:  #f8f8f6;

  --white: #ffffff;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);

  --container: 1200px;
  --section-py: calc(0.25rem * 28);
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; } /* altura do header fixo */

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--neutral-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

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

/* =============================================
   TYPOGRAPHY
   ============================================= */
.display-xl {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--neutral-900);
}
.display-lg {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  font-size: 3rem;
  letter-spacing: -.02em;
}
.display-md {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}
em.accent {
  font-style: italic;
  color: var(--accent);
  font-family: var(--font-serif);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--neutral-500);
  font-family: var(--font-sans);
  margin-bottom: 24px;
}
.badge::before,
.badge::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--neutral-300);
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-full);
  font-size: .875rem;
  font-weight: 600;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green-600);
  color: var(--white);
}
.btn-primary:hover { background: var(--green-700); transform: translateY(-1px); }

.btn-outline {
  border: 1.5px solid var(--neutral-300);
  color: var(--neutral-700);
  background: transparent;
}
.btn-outline:hover { border-color: var(--neutral-900); color: var(--neutral-900); }

.btn-outline-white {
  border: 1.5px solid rgba(255,255,255,.5);
  color: var(--white);
  background: transparent;
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

/* =============================================
   SECTION SPACING
   ============================================= */
.section { padding: var(--section-py) 0; }
.section-light { background: var(--neutral-50); }
.section-green { background: var(--green-900); color: var(--white); }

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--neutral-100); }
::-webkit-scrollbar-thumb { background: var(--green-600); border-radius: 3px; }