/* =========================================================
   THE GROOT OOTY — Design Tokens & Variables
   Theme: Strict White & Lime Green (#9FCF49)
   ========================================================= */

:root {
  /* --- Primary Brand Color (Secondary / Accents / Cards) --- */
  --color-mantis:          #9FCF49;
  
  /* --- Global Backgrounds (Primary Color = WHITE) --- */
  --bg-primary:            #FFFFFF;
  --bg-page:               #FFFFFF;
  --bg-section:            #FFFFFF;
  --bg-light:              #FFFFFF;
  --bg-dark:               #FFFFFF;

  /* --- Surface / Card Colors (Groot Green #9FCF49) --- */
  --card-bg:               #9FCF49;
  --card-bg-elevated:      #9FCF49;
  --color-forest-deep:     #9FCF49;
  --color-forest:          #9FCF49;
  --color-forest-card:     #9FCF49;
  --color-forest-surface:  #9FCF49;
  --color-charcoal:        #9FCF49;
  --color-charcoal-soft:   #9FCF49;

  /* --- Neutral Dark Accent (For Text & Headings on White) --- */
  --color-obsidian:        #111111;
  --color-cream:           #FFFFFF;
  --color-cream-warm:      #FFFFFF;
  --color-warm-white:      #FFFFFF;
  --color-linen:           #FFFFFF;
  --color-bronze:          #9FCF49;
  --color-bronze-light:    #9FCF49;
  --color-gold:            #FFFFFF;
  --color-gold-subtle:     transparent;
  --color-gold-glow:       transparent;
  --color-whatsapp:        #25D366;
  --color-whatsapp-hover:  #1EBE5D;

  /* --- Text Tokens (High Contrast) --- */
  /* On White Background */
  --text-primary:          #111111;
  --text-secondary:        rgba(17, 17, 17, 0.88);
  --text-muted:            rgba(17, 17, 17, 0.65);
  --text-dark:             #111111;
  --text-dark-secondary:   rgba(17, 17, 17, 0.80);

  /* On Green Cards & Surfaces */
  --card-border:           rgba(255, 255, 255, 0.35);
  --card-border-subtle:    rgba(255, 255, 255, 0.20);
  --card-text:             #FFFFFF;
  --card-text-muted:       rgba(255, 255, 255, 0.92);

  /* On Full-bleed Photography / Parallax */
  --text-on-image:         #FFFFFF;
  --text-on-image-muted:   rgba(255, 255, 255, 0.88);

  /* --- Interactive Buttons --- */
  --btn-primary-bg:        #9FCF49;
  --btn-primary-text:      #FFFFFF;
  --btn-primary-hover:     #8EBF3E;
  --btn-outline-border:    #9FCF49;
  --btn-outline-text:      #9FCF49;
  --btn-outline-hover-bg:  #9FCF49;
  --btn-outline-hover-text:#FFFFFF;

  /* --- Borders & Shadows --- */
  --border-dark:           rgba(17, 17, 17, 0.12);
  --border-light:          rgba(159, 207, 73, 0.25);
  --border-glow:           rgba(159, 207, 73, 0.35);

  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:             0 18px 45px rgba(0, 0, 0, 0.14);
  --shadow-card:           0 10px 30px rgba(17, 27, 18, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-floating:       0 20px 50px rgba(0, 0, 0, 0.18);

  /* --- Typography --- */
  --font-display:          'Playfair Display', Georgia, serif;
  --font-body:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */
  --text-6xl:   4.5rem;    /* 72px */

  /* --- Spacing --- */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* --- Radii --- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 32px;
  --radius-full:9999px;

  /* --- Layout --- */
  --container-max:  1280px;
  --container-pad:  clamp(1.25rem, 5vw, 3.5rem);
  --nav-height:     76px;
  --section-pad:    clamp(4rem, 8vw, 7rem);

  /* --- Transitions & Motion --- */
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:    200ms;
  --dur-base:    400ms;
  --dur-slow:    700ms;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}