/*
Theme Name: SharedRoots
Theme URI: https://sharedrootsco.com
Author: SharedRootsCo
Author URI: https://sharedrootsco.com
Description: WordPress theme for SharedRootsCo — building shared living arrangements. Converted from React/TypeScript. Uses Tailwind CSS via CDN, Inter + Lora fonts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sharedroots
*/

/* ==========================================================================
   Base styles — design tokens match tailwind.config (index.html)
   Primary: #5F7161 (Deep Sage), Secondary: #D97757 (Terracotta),
   Accent: #E8DCC4 (Warm Sand), Background: #FAF8F3 (Soft Cream)
   ========================================================================== */

:root {
  --color-primary: #5F7161;
  --color-secondary: #D97757;
  --color-secondary-hover: #c26245;
  --color-accent: #E8DCC4;
  --color-background: #FAF8F3;
  --color-neutral-50: #FAF8F3;
  --color-neutral-100: #F5F2EB;
  --color-neutral-200: #EBE5D9;
  --color-neutral-300: #D6D1C7;
  --color-neutral-600: #52525b;
  --color-neutral-800: #44403C;
  --color-neutral-900: #292524;
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  font-family: var(--font-sans);
  color: var(--color-neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paper texture (matches React bg-paper) */
body.bg-paper,
.bg-paper {
  background-color: #FAF8F3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

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

/* Reveal animation (replaces React Reveal component) */
.reveal-on-scroll {
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.reveal-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(3rem);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in-up keyframes (for Tailwind animation-fade-in-up) */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Line clamp utility (Tailwind line-clamp-2) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}