/**
 * TruOath Nutrition Global CSS
 * Base resets, CSS variables, and global typography
 * Design System inspired by Aesop (minimal, editorial, warm earthy tones)
 */

 :root {
	/* ===== AESOP-EXACT COLOR PALETTE (extracted from live site) ===== */
	--truoath-cream:      #fffef2;   /* Aesop page background — signature off-white */
	--truoath-bg-warm:    #f6f5e8;   /* Aesop secondary bg — slightly warmer cream */
	--truoath-black:      #252525;   /* Aesop dark charcoal — header, footer, text */
	--truoath-text:       #4f4f4c;   /* Aesop body text — warm charcoal, never pure black */
	--truoath-warm-grey:  #6b6b60;   /* Aesop secondary text — muted olive-grey */
	--truoath-brown:      #252525;   /* Kept as dark for headings (Aesop uses charcoal) */
	--truoath-tan:        #c2c2af;   /* Aesop muted border / accent — warm grey-green */
	--truoath-tan-warm:   #C4A882;   /* Our warm accent — use sparingly */
	--truoath-white:      #fffef2;   /* Same as cream — Aesop uses one tone */
	--truoath-olive:      #6b6b47;   /* Subtle botanical accent */
	--truoath-dark:       #252525;   /* Footer/header dark — pure Aesop charcoal */

	/* Typography */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  
	/* Type Scale */
	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-lg:   1.125rem;  /* 18px */
	--text-xl:   1.25rem;   /* 20px */
	--text-2xl:  1.5rem;    /* 24px */
	--text-3xl:  2rem;      /* 32px */
	--text-4xl:  2.75rem;   /* 44px */
	--text-5xl:  3.5rem;    /* 56px */
	--text-6xl:  4.5rem;    /* 72px */
  
	/* Spacing */
	--spacing-section-y: 120px;
	--spacing-section-y-mobile: 80px;
	--container-max-width: 1280px;
	--text-max-width: 680px;
  }
  
  /* ==========================================================================
	 Base Resets & Global Styles
	 ========================================================================== */
  
  *, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  
  body {
	background-color: var(--truoath-cream);
	color: var(--truoath-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 0 !important;
	margin-top: 0 !important;
  }
  
  /* Site wrapper resets */
  #page {
	padding: 0 !important;
	margin: 0 !important;
  }
  .site-content {
	padding: 0 !important;
	margin: 0 !important;
  }

  /* WordPress admin bar compensation */
  .admin-bar #notification-bar {
	top: 32px !important;
	position: relative !important;
  }
  .admin-bar #masthead {
	top: 70px !important;
  }
  .admin-bar #masthead.is-scrolled {
	top: 32px !important;
  }
  
  /* Typography */
  h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--truoath-black);
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 1rem;
  }
  
  p {
	margin-bottom: 1.5rem;
	color: var(--truoath-text);
  }
  
  p:last-child {
	margin-bottom: 0;
  }
  
  a {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease;
  }
  
  /* Clean link hovers - underline (site content only, not header/footer) */
  .site-content a:not(.btn):not(.no-underline) {
	position: relative;
	text-decoration: none;
	display: inline-block;
  }
  
  .site-content a:not(.btn):not(.no-underline)::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: currentColor;
	transform-origin: bottom right;
	transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .site-content a:not(.btn):not(.no-underline):hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
  }
  
  img {
	max-width: 100%;
	height: auto;
	display: block;
  }
  
  /* Layout Classes */
  .truoath-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 5%;
  }
  
  .truoath-section {
	padding: var(--spacing-section-y) 0;
  }
  
  .truoath-text-container {
	max-width: var(--text-max-width);
	margin: 0 auto;
  }
  
  /* Minimal UI Elements - overrides */
  button:not(.truoath-header__search-btn):not(.truoath-header__mobile-toggle):not(.truoath-mobile-overlay__close):not(.truoath-mobile-close), 
  .button,
  .btn {
	background: transparent;
	color: var(--truoath-black);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 24px;
	border: 1px solid var(--truoath-black);
	border-radius: 0 !important; /* NO rounded corners */
	cursor: pointer;
	box-shadow: none !important; /* NO box shadows */
	transition: all 0.3s ease;
	display: inline-block;
	text-align: center;
  }
  
  button:hover, 
  .button:hover,
  .btn:hover {
	background: var(--truoath-black);
	color: var(--truoath-cream);
	text-decoration: none;
  }
  
  .btn-dark {
	background: var(--truoath-brown);
	color: var(--truoath-cream);
	border-color: var(--truoath-brown);
  }
  
  .btn-dark:hover {
	background: var(--truoath-black);
	border-color: var(--truoath-black);
  }
  
  .btn-text {
	border: none;
	padding: 0;
	border-bottom: 1px solid var(--truoath-black);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--text-base);
  }
  
  .btn-text:hover {
	background: transparent;
	color: var(--truoath-black);
	border-bottom-width: 2px;
  }
  
  /* ==========================================================================
	 Global Animations & Micro-Interactions
	 ========================================================================== */
  
  .fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
  }
  
  /* Stagger delays for children */
  .stagger-1 { transition-delay: 0.1s; }
  .stagger-2 { transition-delay: 0.2s; }
  .stagger-3 { transition-delay: 0.3s; }
  .stagger-4 { transition-delay: 0.4s; }

  /* Mobile Responsiveness */
  @media (max-width: 768px) {
	.truoath-section {
	  padding: var(--spacing-section-y-mobile) 0;
	}
	
	h1 { font-size: var(--text-4xl); }
	h2 { font-size: var(--text-3xl); }
	h3 { font-size: var(--text-2xl); }
  }