/* ============================================================
   HUMANA NURSING — Brand Design Tokens
   ============================================================ */

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

:root {
   /* ——————————————————————————————————————————
     COLOR PALETTE
     Anchored on soft sage green — warm, approachable,
     healthcare-adjacent without being clinical.
     —————————————————————————————————————————— */

   /* Primary Greens */
   --color-green-50: #F0F5F1;
   /* Lightest tint — page backgrounds       */
   --color-green-100: #D8E8DA;
   /* Light tint — section backgrounds       */
   --color-green-200: #B4D4B8;
   /* Soft sage — cards, borders             */
   --color-green-400: #7BB486;
   /* Brand anchor — primary green           */
   --color-green-600: #4E8A5A;
   /* Deeper green — buttons, accents        */
   --color-green-800: #2D5E38;
   /* Dark green — hover states              */

   /* Warm Neutrals */
   --color-cream: #FAF8F5;
   /* Warm white — alt backgrounds           */
   --color-cream-dark: #F2EDE6;
   /* Light cream — subtle separation        */
   --color-warm-gray: #B5AFA7;
   /* Soft gray — borders, muted text        */
   --color-charcoal: #2C3331;
   /* Deep charcoal — primary text           */
   --color-charcoal-light: #4A5250;
   /* Lighter charcoal — secondary text  */

   /* Accent — Warm Coral */
   --color-accent: #D4856A;
   /* Warm coral — CTAs, highlights          */
   --color-accent-hover: #C06F54;
   /* Coral hover                            */
   --color-accent-light: #F5E0D7;
   /* Coral tint — badges, light accents     */

   /* Utility */
   --color-white: #FFFFFF;
   --color-overlay: rgba(44, 51, 49, 0.6);
   --color-shadow: rgba(44, 51, 49, 0.08);
   --color-shadow-md: rgba(44, 51, 49, 0.12);
   --color-focus-ring: rgba(78, 138, 90, 0.4);

   /* ——————————————————————————————————————————
     OPTION B — APPROVED PALETTE
     Warm, earthy, consulting-firm feel.
     —————————————————————————————————————————— */
   --color-primary-dark: #5D5646;
   /* Logo, headlines, container bgs   */
   --color-primary-dark-hover: #4A4538;
   /* ~10% darker for hover states     */
   --color-primary-mid: #A07D54;
   /* Secondary branding, buttons      */
   --color-primary-mid-light: #C4A87E;
   /* Lightened — borders, dividers    */
   --color-neutral-warm: #DFD4C3;
   /* Main background surfaces         */
   --color-neutral-light: #EEEAE2;
   /* Alt backgrounds, card surfaces   */
   --color-accent-b: #3E5974;
   /* CTA buttons, standout elements   */
   --color-accent-b-hover: #2F4860;
   /* ~10% darker for CTA hovers       */
   --color-text-b: #4D4C4B;
   /* Primary body text                */

   /* Warm shadows for Option B */
   --color-shadow-warm: rgba(93, 86, 70, 0.08);
   --color-shadow-warm-md: rgba(93, 86, 70, 0.14);
   --color-focus-ring-b: rgba(62, 89, 116, 0.35);

   /* ——————————————————————————————————————————
     TYPOGRAPHY
     Heading: Lora (serif — warm, trustworthy, editorial)
     Body:    Inter (sans-serif — crisp, highly readable)
     —————————————————————————————————————————— */

   --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
   --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Type Scale — Desktop */
   --text-h1: 3.25rem;
   /* 52px  */
   --text-h2: 2.5rem;
   /* 40px  */
   --text-h3: 1.75rem;
   /* 28px  */
   --text-h4: 1.375rem;
   /* 22px  */
   --text-h5: 1.125rem;
   /* 18px  */
   --text-h6: 1rem;
   /* 16px  */
   --text-body: 1.0625rem;
   /* 17px  */
   --text-body-sm: 0.9375rem;
   /* 15px  */
   --text-small: 0.8125rem;
   /* 13px  */
   --text-caption: 0.75rem;
   /* 12px  */

   /* Font Weights */
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;

   /* Line Heights */
   --leading-tight: 1.2;
   --leading-snug: 1.35;
   --leading-normal: 1.6;
   --leading-relaxed: 1.75;

   /* Letter Spacing */
   --tracking-tight: -0.02em;
   --tracking-normal: 0;
   --tracking-wide: 0.02em;
   --tracking-wider: 0.06em;

   /* ——————————————————————————————————————————
     SPACING SCALE
     —————————————————————————————————————————— */
   --space-1: 0.25rem;
   /* 4px   */
   --space-2: 0.5rem;
   /* 8px   */
   --space-3: 0.75rem;
   /* 12px  */
   --space-4: 1rem;
   /* 16px  */
   --space-5: 1.5rem;
   /* 24px  */
   --space-6: 2rem;
   /* 32px  */
   --space-7: 2.5rem;
   /* 40px  */
   --space-8: 3rem;
   /* 48px  */
   --space-9: 4rem;
   /* 64px  */
   --space-10: 5rem;
   /* 80px  */
   --space-11: 6rem;
   /* 96px  */
   --space-12: 8rem;
   /* 128px */

   /* ——————————————————————————————————————————
     LAYOUT
     —————————————————————————————————————————— */
   --max-width: 1200px;
   --max-width-narrow: 800px;
   --border-radius: 8px;
   --border-radius-lg: 16px;
   --border-radius-xl: 24px;
   --border-radius-full: 9999px;

   /* ——————————————————————————————————————————
     TRANSITIONS
     —————————————————————————————————————————— */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 400ms ease;
   --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile type scale adjustments */
@media (max-width: 768px) {
   :root {
      --text-h1: 2.25rem;
      /* 36px  */
      --text-h2: 1.75rem;
      /* 28px  */
      --text-h3: 1.375rem;
      /* 22px  */
      --text-h4: 1.125rem;
      /* 18px  */
      --text-body: 1rem;
      /* 16px  */
   }
}