/* =============================================================================
   FILE: public/css/avl.css
   AVL Contextual UI State System — Day 10
   Adaptive Visual Language: 3 states (DISCOVERY · PROFESSIONAL · REORDER)

   BRAND CONTRACT: Zero new colors introduced.
   All state differentiation achieved through:
     1. Luminosity   — brightness + saturation filters on background layers
     2. Weight       — font-weight and border opacity
     3. Depth        — shadow alpha
     4. Density      — spacing multiplier
     5. Rhythm       — transition speed
   ============================================================================= */


/* ---------------------------------------------------------------------------
   AVL DESIGN TOKENS — defaults (neutral / pre-detection fallback)
   These get overridden per state below.
   --------------------------------------------------------------------------- */
:root {
  /* Luminosity */
  --avl-brightness:   1.0;
  --avl-saturation:   1.0;
  --avl-bg-overlay:   rgba(0, 0, 0, 0);   /* transparent — no state yet */

  /* Weight */
  --avl-font-body:    400;
  --avl-font-heading: 600;
  --avl-border-alpha: 0.5;

  /* Depth */
  --avl-shadow-alpha: 0.12;
  --avl-shadow-spread: 32px;

  /* Density */
  --avl-space-xs:  0.5rem;
  --avl-space-sm:  1rem;
  --avl-space-md:  1.5rem;
  --avl-space-lg:  2rem;
  --avl-space-xl:  3rem;
  --avl-space-2xl: 4rem;
  --avl-card-pad:  2rem;

  /* Rhythm */
  --avl-transition:      400ms ease;
  --avl-transition-fast: 220ms ease;

  /* Computed shadows using palette + variable alpha */
  --avl-shadow-soft:  0 8px  var(--avl-shadow-spread) rgba(45, 62, 42, var(--avl-shadow-alpha));
  --avl-shadow-hover: 0 16px calc(var(--avl-shadow-spread) * 1.5) rgba(45, 62, 42, calc(var(--avl-shadow-alpha) * 1.4));
  --avl-shadow-deep:  0 24px calc(var(--avl-shadow-spread) * 2)   rgba(45, 62, 42, calc(var(--avl-shadow-alpha) * 2));

  /* Borders using existing palette + variable alpha */
  --avl-border-color: rgba(156, 175, 136, var(--avl-border-alpha));   /* primary-sage */
  --avl-border:       1px solid var(--avl-border-color);
}


/* ---------------------------------------------------------------------------
   STATE: DISCOVERY
   --------------------------------------------------------------------------- */
:root[data-avl="discovery"] {
  --avl-brightness:   1.02;
  --avl-saturation:   1.0;
  --avl-bg-overlay:   rgba(156, 175, 136, 0.025);
  --avl-font-body:    400;
  --avl-font-heading: 600;
  --avl-border-alpha: 0.35;
  --avl-shadow-alpha:  0.08;
  --avl-shadow-spread: 28px;
  --avl-space-xs:  0.6rem;
  --avl-space-sm:  1.2rem;
  --avl-space-md:  1.8rem;
  --avl-space-lg:  2.4rem;
  --avl-space-xl:  3.6rem;
  --avl-space-2xl: 5rem;
  --avl-card-pad:  2.4rem;
  --avl-transition:      520ms ease;
  --avl-transition-fast: 300ms ease;
}

:root[data-avl="discovery"] .avl-show-quiz      { display: block !important; }
:root[data-avl="discovery"] .avl-show-filters   { display: flex  !important; }
:root[data-avl="discovery"] .avl-show-chatbot   { display: block !important; }
:root[data-avl="discovery"] .avl-hide-discovery { display: none  !important; }

:root[data-avl="discovery"] .chatbot-widget {
  opacity: 1;
  animation: avl-surface 800ms ease-out forwards;
}


/* ---------------------------------------------------------------------------
   STATE: PROFESSIONAL
   --------------------------------------------------------------------------- */
:root[data-avl="professional"] {
  --avl-brightness:   0.98;
  --avl-saturation:   0.92;
  --avl-bg-overlay:   rgba(45, 62, 42, 0.03);
  --avl-font-body:    500;
  --avl-font-heading: 700;
  --avl-border-alpha: 0.85;
  --avl-shadow-alpha:  0.16;
  --avl-shadow-spread: 24px;
  --avl-space-xs:  0.4rem;
  --avl-space-sm:  0.8rem;
  --avl-space-md:  1.2rem;
  --avl-space-lg:  1.6rem;
  --avl-space-xl:  2.4rem;
  --avl-space-2xl: 3.2rem;
  --avl-card-pad:  1.6rem;
  --avl-transition:      220ms ease;
  --avl-transition-fast: 120ms ease;
}

:root[data-avl="professional"] .avl-show-gcms        { display: flex  !important; }
:root[data-avl="professional"] .avl-show-bulk-price  { display: block !important; }
:root[data-avl="professional"] .avl-show-tech-specs  { display: block !important; }
:root[data-avl="professional"] .avl-hide-pro         { display: none  !important; }

:root[data-avl="professional"] .gcms-badge {
  font-weight: var(--avl-font-heading);
  border: 1px solid var(--avl-border-color);
  letter-spacing: 0.05em;
}

:root[data-avl="professional"] .nav-gcms-library {
  display: flex !important;
  font-weight: 600;
  color: var(--deep-forest);
}

:root[data-avl="professional"] .product-card {
  transition: box-shadow var(--avl-transition-fast), transform var(--avl-transition-fast);
}


/* ---------------------------------------------------------------------------
   STATE: REORDER
   --------------------------------------------------------------------------- */
:root[data-avl="reorder"] {
  --avl-brightness:   1.01;
  --avl-saturation:   1.06;
  --avl-bg-overlay:   rgba(212, 175, 55, 0.04);
  --avl-font-body:    400;
  --avl-font-heading: 600;
  --avl-border-alpha: 0.55;
  --avl-shadow-alpha:  0.11;
  --avl-shadow-spread: 30px;
  --avl-shadow-soft:  0 8px 30px rgba(212, 175, 55, 0.10), 0 2px 8px rgba(45, 62, 42, 0.08);
  --avl-shadow-hover: 0 16px 44px rgba(212, 175, 55, 0.14), 0 4px 16px rgba(45, 62, 42, 0.10);
  --avl-space-xs:  0.5rem;
  --avl-space-sm:  1rem;
  --avl-space-md:  1.5rem;
  --avl-space-lg:  2rem;
  --avl-space-xl:  3rem;
  --avl-space-2xl: 4rem;
  --avl-card-pad:  2rem;
  --avl-transition:      380ms ease;
  --avl-transition-fast: 200ms ease;
}

:root[data-avl="reorder"] .avl-show-protocol  { display: block !important; }
:root[data-avl="reorder"] .avl-show-reorder   { display: flex  !important; }
:root[data-avl="reorder"] .avl-show-favorites { display: block !important; }
:root[data-avl="reorder"] .avl-hide-reorder   { display: none  !important; }

:root[data-avl="reorder"] .your-protocol-section {
  border-left: 3px solid rgba(212, 175, 55, 0.5);
  padding-left: var(--avl-space-md);
}

:root[data-avl="reorder"] .reorder-nudge {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
}


/* ---------------------------------------------------------------------------
   STRUCTURAL TOKENS APPLIED
   --------------------------------------------------------------------------- */
.avl-body-text  { font-weight: var(--avl-font-body);    transition: font-weight var(--avl-transition); }
.avl-heading    { font-weight: var(--avl-font-heading);  transition: font-weight var(--avl-transition); }
.avl-card       { box-shadow: var(--avl-shadow-soft);   transition: box-shadow var(--avl-transition), transform var(--avl-transition); }
.avl-card:hover { box-shadow: var(--avl-shadow-hover);  transform: translateY(-2px); }
.avl-border     { border: 1px solid rgba(156, 175, 136, var(--avl-border-alpha)); }
.avl-pad-card   { padding: var(--avl-card-pad); }
.avl-gap-sm     { gap: var(--avl-space-sm); }
.avl-gap-md     { gap: var(--avl-space-md); }
.avl-gap-lg     { gap: var(--avl-space-lg); }
.avl-section    { padding: var(--avl-space-2xl) 0; }
.avl-interactive      { transition: all var(--avl-transition); }
.avl-interactive-fast { transition: all var(--avl-transition-fast); }


/* ---------------------------------------------------------------------------
   BACKGROUND OVERLAY
   --------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--avl-bg-overlay);
  pointer-events: none;
  z-index: 0;
  transition: background 600ms ease;
}

body > * {
  position: relative;
  z-index: 1;
}

.avl-bg-filtered {
  filter: brightness(var(--avl-brightness)) saturate(var(--avl-saturation));
  transition: filter 600ms ease;
}


/* ---------------------------------------------------------------------------
   CONTENT VISIBILITY CLASSES
   --------------------------------------------------------------------------- */
.avl-show-quiz,
.avl-show-filters,
.avl-show-chatbot,
.avl-show-gcms,
.avl-show-bulk-price,
.avl-show-tech-specs,
.avl-show-protocol,
.avl-show-reorder,
.avl-show-favorites      { display: none; }

.avl-hide-discovery,
.avl-hide-pro,
.avl-hide-reorder        { display: block; }


/* ---------------------------------------------------------------------------
   GLOBAL TRANSITIONS
   --------------------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; }

body {
  transition:
    background-color 500ms ease,
    color 400ms ease;
}


/* ---------------------------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------------------------- */
@keyframes avl-surface {
  0%   { opacity: 0; transform: translateY(8px); }
  60%  { opacity: 1; transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

@keyframes avl-bloom-in {
  0%   { opacity: 0; transform: scale(0.97) translateY(6px); }
  70%  { opacity: 1; transform: scale(1.005) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}


/* ---------------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root,
  :root[data-avl] {
    --avl-transition:      0ms;
    --avl-transition-fast: 0ms;
  }
  body::before,
  .avl-bg-filtered,
  body { transition: none; }
}