/* ============================================================
   DESIGN TOKENS - single source of truth for all visual values
   Edit here only; theme.css and components.css consume these.
   ============================================================ */
:root {

  /* ==========================================================
     BRAND COLOUR PALETTE (preserve Dr. Abrol identity)
     ========================================================== */
  --clr-green-dark:   #1F4D36;
  --clr-green:        #2E6B4A;
  --clr-green-light:  #3D8A5E;
  --clr-green-mid:    #2D7050;
  --clr-green-deep:   #2A6348;
  --clr-green-darker: #1A2E20;
  --clr-green-tint:   #EEF3ED;
  --clr-green-xlight: #F2F7F2;

  --clr-terra:        #C77B45;
  --clr-terra-light:  #D99A5B;
  --clr-terra-dark:   #B36A35;

  --clr-gold:         #C9A24B;
  --clr-gold-light:   #E0BF7A;

  --clr-cream:        #FAF6EF;
  --clr-cream-dark:   #F2EBE0;

  --clr-text:         #2A2A28;
  --clr-text-muted:   #5C5C57;
  --clr-text-light:   #8C8C87;

  --clr-white:        #FFFFFF;
  --clr-border:       #DDD8CF;

  --clr-whatsapp:     #25D366;
  --clr-whatsapp-dark:#1DA851;

  /* RGB channels for alpha compositions */
  --rgb-green:        46, 107, 74;
  --rgb-green-dark:   31, 77, 54;
  --rgb-shadow:       31, 77, 54;
  --rgb-black:        0, 0, 0;
  --rgb-white:        255, 255, 255;
  --rgb-hero-overlay: 15, 35, 22;
  --rgb-whatsapp:     37, 211, 102;
  --rgb-gold:         201, 162, 75;
  --rgb-danger:       239, 68, 68;

  --clr-shadow:       rgba(var(--rgb-shadow), 0.10);

  /* ==========================================================
     SEMANTIC COLOURS
     ========================================================== */
  --clr-success:      var(--clr-green);
  --clr-success-bg:   var(--clr-green-tint);
  --clr-success-border: var(--clr-green-light);

  --clr-warning:      var(--clr-gold);
  --clr-warning-bg:   rgba(var(--rgb-gold), 0.12);
  --clr-warning-border: var(--clr-gold-light);

  --clr-danger:       #EF4444;
  --clr-danger-dark:  #991B1B;
  --clr-danger-bg:    #FEF2F2;
  --clr-danger-border: var(--clr-danger);

  --clr-info:         var(--clr-green-light);
  --clr-info-bg:      var(--clr-green-xlight);
  --clr-info-border:  var(--clr-green);

  --clr-focus:        var(--clr-green);
  --clr-link:         var(--clr-green);
  --clr-link-hover:   var(--clr-green-dark);

  /* ==========================================================
     SURFACE & ON-DARK TEXT (footer, hero, topbar)
     ========================================================== */
  --clr-on-dark:              rgba(var(--rgb-white), 0.85);
  --clr-on-dark-muted:        rgba(var(--rgb-white), 0.75);
  --clr-on-dark-subtle:       rgba(var(--rgb-white), 0.65);
  --clr-on-dark-faint:        rgba(var(--rgb-white), 0.45);
  --clr-on-dark-ghost:        rgba(var(--rgb-white), 0.12);
  --clr-on-dark-ghost-border: rgba(var(--rgb-white), 0.45);
  --clr-on-dark-ghost-hover:  rgba(var(--rgb-white), 0.22);
  --clr-on-dark-divider:      rgba(var(--rgb-white), 0.10);
  --clr-on-dark-surface:      rgba(var(--rgb-white), 0.10);
  --clr-on-dark-dot:          rgba(var(--rgb-white), 0.40);
  --clr-on-dark-dot-active:   var(--clr-white);
  --clr-on-dark-arrow:        rgba(var(--rgb-white), 0.15);
  --clr-on-dark-arrow-border: rgba(var(--rgb-white), 0.30);
  --clr-on-dark-arrow-hover:  rgba(var(--rgb-white), 0.28);
  --clr-on-dark-hero-text:    rgba(var(--rgb-white), 0.85);
  --clr-on-dark-hero-sub:     rgba(var(--rgb-white), 0.80);
  --clr-on-dark-accent-ring:  rgba(var(--rgb-white), 0.04);
  --clr-on-dark-cred-divider: rgba(var(--rgb-white), 0.20);

  --clr-gold-alpha-15:        rgba(var(--rgb-gold), 0.15);

  /* ==========================================================
     OVERLAY SYSTEM
     ========================================================== */
  --overlay-light:  rgba(var(--rgb-white), 0.55);
  --overlay-medium: rgba(var(--rgb-black), 0.35);
  --overlay-dark:   rgba(var(--rgb-hero-overlay), 0.75);
  --overlay-brand:  linear-gradient(
    135deg,
    rgba(var(--rgb-hero-overlay), 0.75) 0%,
    rgba(var(--rgb-hero-overlay), 0.45) 60%,
    rgba(var(--rgb-hero-overlay), 0.20) 100%
  );

  --gradient-brand:       linear-gradient(135deg, var(--clr-green-dark), var(--clr-green-mid));
  --gradient-brand-deep:  linear-gradient(135deg, var(--clr-green-dark), var(--clr-green-deep));
  --gradient-brand-horizontal: linear-gradient(90deg, var(--clr-terra), var(--clr-gold));
  --gradient-cream-sage: linear-gradient(135deg, var(--clr-cream), var(--clr-green-tint));

  /* ==========================================================
     GLASS SURFACE
     ========================================================== */
  --glass-bg:     rgba(var(--rgb-white), 0.72);
  --glass-border: rgba(var(--rgb-white), 0.35);
  --glass-blur:   12px;

  /* Header glass - warm cream undertone */
  --glass-nav-bg:     rgba(var(--rgb-white), 0.86);
  --glass-nav-border: rgba(var(--rgb-white), 0.45);
  --glass-topbar-bg:  rgba(var(--rgb-green-dark), 0.72);

  /* ==========================================================
     HEADER / NAVIGATION
     ========================================================== */
  --nav-surface:        var(--clr-cream);
  --nav-surface-solid:  var(--clr-white);
  --nav-py:             var(--sp-4);
  --nav-py-compact:     var(--sp-2);
  --nav-link-gap:       var(--sp-1);
  --nav-cta-gap:        var(--sp-3);
  --topbar-py:          0.4375rem;
  --mega-menu-min:      44rem;
  --drawer-width:       min(22rem, 92vw);

  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */
  --font-head:   'Fraunces', Georgia, serif;
  --font-body:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Type scale: xs → 5xl
     H1 hero: fs-3xl–5xl (clamp in components)
     H1 page: fs-2xl–4xl
     H2 section: fs-2xl–4xl
     H3: fs-lg–xl
     H4: fs-md
     H5–H6: fs-sm–base
     Lead: fs-md | Body: fs-base | Caption: fs-xs–sm */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;
  --fs-5xl:   3.75rem;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-body:   1.65;
  --lh-loose:  1.8;

  --ls-tight:  0.01em;
  --ls-normal: 0.04em;
  --ls-wide:   0.08em;
  --ls-caps:   0.12em;

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

  --section-py-sm: var(--sp-12);
  --section-py:    clamp(var(--sp-12), 5vw, var(--sp-20));
  --section-py-lg: clamp(var(--sp-16), 6vw, calc(var(--sp-20) * 1.4));

  /* ==========================================================
     CONTAINER SYSTEM (utilities - Bootstrap .container unchanged)
     ========================================================== */
  --container-reading:  42rem;
  --container-narrow:   45rem;
  --container-default:  72rem;
  --container-wide:     80rem;
  --container-full:     100%;
  --max-reading:        70ch;

  /* ==========================================================
     BORDER RADIUS
     ========================================================== */
  --radius-sm:   0.375rem;
  --radius:      0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-2xl:  2.5rem;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ==========================================================
     ELEVATION SYSTEM (0–4) - use instead of arbitrary shadows
     ========================================================== */
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(var(--rgb-black), 0.06);
  --elevation-2: 0 2px 8px rgba(var(--rgb-shadow), 0.08);
  --elevation-3: 0 4px 20px rgba(var(--rgb-shadow), 0.10);
  --elevation-4: 0 8px 40px rgba(var(--rgb-shadow), 0.14);

  /* Extended elevation for hero/cards (maps to level 4+) */
  --elevation-5: 0 16px 60px rgba(var(--rgb-shadow), 0.18);

  /* Backward-compatible shadow aliases */
  --shadow-xs:  var(--elevation-1);
  --shadow-sm:  var(--elevation-2);
  --shadow:     var(--elevation-3);
  --shadow-lg:  var(--elevation-4);
  --shadow-xl:  var(--elevation-5);

  --shadow-primary-hover: 0 4px 16px rgba(var(--rgb-green-dark), 0.30);
  --shadow-cta-hover:     0 6px 20px rgba(var(--rgb-black), 0.15);
  --shadow-whatsapp:      0 4px 16px rgba(var(--rgb-whatsapp), 0.40);
  --shadow-whatsapp-hover:  0 6px 24px rgba(var(--rgb-whatsapp), 0.50);
  --shadow-mobile-bar:    0 -2px 12px rgba(var(--rgb-black), 0.12);
  --shadow-focus:         0 0 0 0.2rem rgba(var(--rgb-green), 0.15);

  /* ==========================================================
     Z-INDEX SCALE
     ========================================================== */
  --z-base:            0;
  --z-header:            1030;
  --z-dropdown:          1040;
  --z-scroll-top:        1045;
  --z-floating-whatsapp: 1050;
  --z-sticky-cta:        1055;
  --z-overlay:           1060;
  --z-modal:             1070;
  --z-toast:             1080;
  --z-tooltip:           1090;

  /* ==========================================================
     MOTION SYSTEM
     ========================================================== */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   450ms;
  --dur-reveal: 600ms;
  --dur-hero:   1000ms;

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --transition-color:    color var(--dur-base) var(--ease-standard),
                         background-color var(--dur-base) var(--ease-standard),
                         border-color var(--dur-base) var(--ease-standard);
  --transition-transform: transform var(--dur-base) var(--ease-emphasized);
  --transition-shadow:   box-shadow var(--dur-base) var(--ease-standard);
  --transition-opacity:  opacity var(--dur-slow) var(--ease-standard);
  --transition-lift:     transform var(--dur-base) var(--ease-emphasized),
                         box-shadow var(--dur-base) var(--ease-standard);

  /* Legacy aliases */
  --transition:      var(--transition-color), var(--transition-transform), var(--transition-shadow);
  --transition-slow: var(--transition-lift);

  /* ==========================================================
     ICON SCALE
     ========================================================== */
  --icon-xs:  0.75rem;
  --icon-sm:  1rem;
  --icon-md:  1.25rem;
  --icon-lg:  1.5rem;
  --icon-xl:  2rem;

  /* ==========================================================
     COMPONENT PRIMITIVES
     ========================================================== */
  --btn-min-height:     2.75rem;
  --focus-ring-width:   2px;
  --focus-ring-offset:  2px;
  --img-hover-scale:    1.04;
  --card-hover-lift:    -4px;
  --package-hover-lift: -6px;

  /* ==========================================================
     BOOTSTRAP INTEGRATION
     ========================================================== */
  --bs-font-sans-serif:    var(--font-body);
  --bs-body-color:         var(--clr-text);
  --bs-body-bg:            var(--clr-cream);
  --bs-border-radius:      var(--radius-sm);
  --bs-border-color:       var(--clr-border);
  --bs-primary-rgb:        var(--rgb-green);
  --bs-link-color:         var(--clr-link);
  --bs-link-hover-color:   var(--clr-link-hover);
  --bs-focus-ring-color:   rgba(var(--rgb-green), 0.25);
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}