/* ============================================================
   SAP LICENSING EXPERTS — "TERRA" THEME OVERRIDE
   Applied site-wide on top of each page's base styles.
   Re-skins the existing design system to the TERRA concept:
   deep forest-petrol + warm ivory + copper, Fraunces serif
   display type. Token-driven, so it recolours every component
   (nav, hero, cards, buttons, footer) without changing layout
   or any internal link.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');

:root {
  /* === Backgrounds — deep forest / petrol === */
  --bg-primary: #0A1411;
  --bg-secondary: #0E1B16;
  --bg-tertiary: #13241E;
  --bg-elevated: #18302A;
  --bg-glass: rgba(255,255,255,0.04);

  /* === Text — warm ivory === */
  --text-primary: #F0EDE2;
  --text-secondary: #9FA89F;
  --text-tertiary: #646E66;

  /* === Primary accent — copper / terracotta === */
  --accent-primary: #D58A4C;
  --accent-hover: #E6A468;
  --accent-muted: #A86A38;
  --accent-glow: rgba(213,138,76,0.13);
  --accent-glow-strong: rgba(213,138,76,0.28);

  /* === Secondary accent — sage === */
  --accent-secondary: #86B29E;
  --accent-secondary-hover: #A2CBB8;
  --accent-secondary-glow: rgba(134,178,158,0.12);

  /* === Borders === */
  --border-subtle: rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);
  --border-accent: rgba(213,138,76,0.32);

  /* === Gradients === */
  --gradient-hero: linear-gradient(160deg, #0A1411 0%, #0E1B16 45%, #13241E 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.006) 100%);
  --gradient-accent: linear-gradient(135deg, #D58A4C 0%, #E6A468 50%, #D58A4C 100%);
  --gradient-text-accent: linear-gradient(90deg, #D58A4C, #E6A468);
  --gradient-dark: linear-gradient(180deg, #0A1411 0%, #0E1B16 100%);
  --gradient-cta-bg: linear-gradient(135deg, #0E1B16 0%, #13241E 50%, #18302A 100%);

  /* === Typography — Fraunces display, DM Sans body === */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* === Display type: editorial serif, refined weights === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
h1 { font-weight: 500; letter-spacing: -0.02em; }
h2 { font-weight: 500; }
h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 600; }

/* keep the eyebrow + stat figures in mono for the technical contrast TERRA uses */
.eyebrow { font-family: var(--font-mono); }

/* === Component polish to match the TERRA concept === */
/* Pill buttons */
.btn-primary, .btn-secondary {
  border-radius: 40px !important;
  color: #0A1411;
}
.btn-secondary { color: var(--text-primary); }
.btn-primary { font-weight: 700; }

/* Softer, rounded cards with copper hover */
.card, .industry-card, .service-card .card, .stat-card, .sidebar-card {
  border-radius: 16px;
}
.card:hover, .industry-card:hover {
  box-shadow: 0 10px 44px rgba(0,0,0,0.4), 0 0 30px var(--accent-glow);
}

/* Links pick up copper */
a { color: var(--accent-primary); }
a:hover { color: var(--accent-hover); }

/* Nav pill CTA + rounded dropdowns to feel TERRA */
.nav .btn-primary { box-shadow: 0 2px 18px var(--accent-glow); }
.dropdown { border-radius: 14px; }

/* Section accents */
.section-header .eyebrow::before,
.eyebrow::before { background: var(--accent-primary); }

/* Selection */
::selection { background: var(--accent-primary); color: #0A1411; }

/* === TERRA cinematic hero backdrop (applies where a .terra-hero-bg div is injected) === */
.hero, .hero-service, .guide-hero { position: relative; overflow: hidden; }
.terra-hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--gradient-hero); }
.terra-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: grayscale(40%) contrast(1.02) brightness(0.7); }
.terra-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,17,0.5) 0%, rgba(10,20,17,0.78) 58%, var(--bg-primary) 100%); }
.hero > .container, .hero-service > .container, .guide-hero > .container, .hero .hero-inner { position: relative; z-index: 2; }