/* ==========================================================================
   Goldenturas - Root Design System & Global Stylesheet (root.css)
   Brand: Goldenturas, A Nursing Corporation
   Clinical Director: Dr. Shannon Enochs, DNP, PMHNP-BC
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Warm Ivory Background Palette */
  --color-ivory-50: #FDFBF7;
  --color-ivory-100: #F6F0E6;
  --color-ivory-200: #EFE8D8;
  --color-ivory-300: #E2D6BE;

  /* Deep Forest Green Primary Palette */
  --color-forest-950: #050C07;
  --color-forest-900: #14291D;
  --color-forest-800: #1B3626;
  --color-forest-700: #254A34;
  --color-forest-600: #345E44;
  --color-forest-100: #EAF0EC;

  /* Soft Gold Accents */
  --color-gold-400: #D4AF37;
  --color-gold-500: #C5A059;
  --color-gold-600: #B38E46;
  --color-gold-100: #FAF3E3;

  /* Typography Text Colors */
  --color-warmgray-700: #3D4A41;
  --color-warmgray-800: #2C352E;
  --color-warmgray-900: #1C2621;
  --color-white: #FFFFFF;

  /* Typography System */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing & Layout Tokens */
  --container-max-width: 1250px; /* 1250px max width */
  --header-height-transparent: 115px;
  --header-height-scrolled: 64px;

  /* Transitions & Shadows */
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-subtle: 0 4px 25px -4px rgba(20, 41, 29, 0.08);
  --shadow-card: 0 10px 30px -5px rgba(20, 41, 29, 0.05);
  --shadow-floating: 0 20px 40px -10px rgba(13, 27, 19, 0.25);
}

/* --------------------------------------------------------------------------
   2. Base HTML Resets & Typography Defaults
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--color-ivory-50);
  color: var(--color-warmgray-900);
  font-size: 112.5%; /* Scaled up base root font-size from 16px to 18px for enhanced legibility */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-ivory-50);
  color: var(--color-warmgray-900);
}

::selection {
  background-color: var(--color-gold-500);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   3. Typography Utility Helpers
   -------------------------------------------------------------------------- */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Legibility scale enhancements for small text */
.text-xs {
  font-size: 0.85rem; /* ~15.3px base */
}

.text-sm {
  font-size: 0.95rem; /* ~17.1px base */
}

/* Enforce minimum 15px font size on desktop screens */
@media (min-width: 768px) {
  .text-xs {
    font-size: max(15px, 0.85rem) !important;
  }
  .text-sm {
    font-size: max(15px, 0.95rem) !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-forest-900);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Component & Layout Utilities
   -------------------------------------------------------------------------- */
.container-custom {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.max-w-7xl {
  max-width: 1250px !important;
}

@media (min-width: 768px) {
  .container-custom {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.section-padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Gold Accent Divider */
.gold-divider {
  width: 5rem;
  height: 2px;
  background-color: rgba(197, 160, 89, 0.6);
}

/* --------------------------------------------------------------------------
   5. Custom Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-ivory-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold-500);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-600);
}

/* --------------------------------------------------------------------------
   6. Focus States & Accessibility
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 2px;
}