/**
 * BRATTY & SHY — Storefront Design Tokens & Interactive Layout System
 * -----------------------------------------------------------------------------
 * Version: 1.0.0
 * Philosophy: Sensual UX, Sensory Commerce, and High-Performance Dual-Persona Conversion.
 * Inspiration: Savage X Fenty VIP Loop, Editorial Lookbook Fluidity, and Cyberpunk/Cashmere splits.
 * 
 * This file serves as the single source of truth for design variables and the interactive
 * layout rules governing the 'Bratty & Shy' premium storefront.
 */

/* ==========================================================================
   1. COLOR PALETTE TOKENS
   ========================================================================== */

:root {
  /* --- Shared Brand Identity --- */
  --bs-brand-pure-white: #ffffff;
  --bs-brand-pure-black: #000000;
  --bs-brand-obsidian: #050505;
  --bs-brand-vip-platinum: #e5e4e2;
  --bs-brand-discreet-gray: #2a2a2a;      /* Used for ultra-discreet plain-box packaging badges */
  --bs-brand-secure-green: #00c853;       /* Billing validation, secure checkout indicators */
  --bs-brand-backdrop-blur: 15px;

  /* --- Persona 1: BRATTY (Rave-Infused Midnight, Asphalt & Electric Ultraviolet) --- */
  --bs-bratty-asphalt-black: #08080a;     /* Deepest terminal black for backgrounds */
  --bs-bratty-graphite-dark: #121216;     /* Primary container background */
  --bs-bratty-carbon-slate: #1e1e24;      /* Input fields, subtle borders, card outlines */
  --bs-bratty-ultraviolet: #8a2be2;       /* The core radiant signature neon purple */
  --bs-bratty-violet-pulse: #b026ff;      /* Active state/pulse glowing indicator */
  --bs-bratty-cyber-lime: #ccff00;        /* Aggressive high-impact accent, VIP VIP badges, active CTAs */
  --bs-bratty-acid-magenta: #ff007f;      /* Secondary micro-accent, hot-spot markers */
  --bs-bratty-text-primary: #ffffff;      /* Extreme contrast high-exposure white */
  --bs-bratty-text-muted: #8e8e9f;        /* Midtone slate-grey for descriptions */

  /* --- Bratty Gradients & Glowing Shadows --- */
  --bs-bratty-gradient-core: linear-gradient(135deg, var(--bs-bratty-asphalt-black) 0%, var(--bs-bratty-graphite-dark) 100%);
  --bs-bratty-gradient-split: linear-gradient(180deg, rgba(8,8,10,0.4) 0%, rgba(138,43,226,0.3) 100%);
  --bs-bratty-gradient-neon: linear-gradient(90deg, var(--bs-bratty-ultraviolet) 0%, var(--bs-bratty-violet-pulse) 100%);
  --bs-bratty-shadow-glow: 0 0 15px rgba(138, 43, 226, 0.45);
  --bs-bratty-shadow-glow-intense: 0 0 25px rgba(176, 38, 255, 0.7);
  --bs-bratty-shadow-lime: 0 0 12px rgba(204, 255, 0, 0.5);

  /* --- Persona 2: SHY (Light-Saturated Editorial, Soft Peach-Skin Cream & Cashmere Silk) --- */
  --bs-shy-peach-cream: #fff8f3;          /* Soft peach-skin velvet primary background */
  --bs-shy-cashmere-warm: #faf0e6;        /* Slightly deeper surface container background */
  --bs-shy-light-silk: #fcf6f0;           /* Clean warm editorial background alternative */
  --bs-shy-rose-taupe: #7d6b60;           /* Soft elegant grey-brown for readable body typography */
  --bs-shy-velvet-dark: #2e221b;          /* Ultra-deep dark brown for headlines (never harsh black) */
  --bs-shy-crimson-blush: #c27d78;        /* Soft blush accent for primary links & buttons */
  --bs-shy-soft-glow: #ffd1c1;            /* Tender background overlay highlights */
  --bs-shy-champagne-gold: #dfba9d;       /* Warm metallic premium VIP accentuation */

  /* --- Shy Gradients & Editorial Shadows --- */
  --bs-shy-gradient-core: linear-gradient(180deg, var(--bs-shy-peach-cream) 0%, var(--bs-shy-cashmere-warm) 100%);
  --bs-shy-gradient-split: linear-gradient(180deg, rgba(255,248,243,0.3) 0%, rgba(223,186,157,0.2) 100%);
  --bs-shy-gradient-blush: linear-gradient(135deg, var(--bs-shy-crimson-blush) 0%, var(--bs-shy-soft-glow) 100%);
  --bs-shy-shadow-soft: 0 8px 30px rgba(125, 107, 96, 0.08);
  --bs-shy-shadow-inset: inset 0 2px 4px rgba(46, 34, 27, 0.03);
}

/* ==========================================================================
   2. TYPOGRAPHY SYSTEM TOKENS
   ========================================================================== */

:root {
  /* --- Font Families --- */
  --bs-font-header-dramatic: 'Syne', sans-serif;    /* Avant-garde, wide-stretched, high theatricality */
  --bs-font-header-modern: 'Outfit', sans-serif;    /* Clean, premium, high-contrast, modern geometry */
  --bs-font-body-performance: 'Archivo', sans-serif; /* Highly technical, hyper-legible, fine-grain sizing scales */
  --bs-font-body-editorial: 'Inter', sans-serif;    /* Universal clean UI layout spacing */

  /* --- Font Sizes (Fluid Sizing using Clamp) --- */
  --bs-font-size-hero: clamp(2.5rem, 6vw, 6.5rem);       /* Giant Split-Screen overlay titles */
  --bs-font-size-h1: clamp(2rem, 4.5vw, 4rem);           /* Lookbook and Collection Headers */
  --bs-font-size-h2: clamp(1.5rem, 3vw, 2.5rem);         /* Vault lock overlay / Section titles */
  --bs-font-size-h3: clamp(1.2rem, 2vw, 1.8rem);         /* Drawer titles, Product Quickview titles */
  --bs-font-size-body: clamp(0.9rem, 1.1vw, 1.1rem);     /* Default descriptive body copies */
  --bs-font-size-small: clamp(0.75rem, 0.9vw, 0.9rem);   /* Technical details, Secure billing banners */
  --bs-font-size-micro: clamp(0.65rem, 0.75vw, 0.75rem); /* Discretion badges, absolute mini counters */

  /* --- Font Weights --- */
  --bs-font-weight-regular: 400;
  --bs-font-weight-medium: 500;
  --bs-font-weight-semibold: 600;
  --bs-font-weight-bold: 700;
  --bs-font-weight-dramatic: 800; /* For 'Syne' extra heavy headers */

  /* --- Letter Spacing & Line Heights --- */
  --bs-tracking-tighter: -0.03em;
  --bs-tracking-tight: -0.01em;
  --bs-tracking-normal: 0em;
  --bs-tracking-wide: 0.05em;
  --bs-tracking-widest: 0.15em;  /* Perfect for letter-spaced premium sub-headers */
  
  --bs-leading-none: 1;
  --bs-leading-tight: 1.15;
  --bs-leading-editorial: 1.35;
  --bs-leading-relaxed: 1.6;
}

/* ==========================================================================
   3. ANIMATION & SENSORY TRANSITION TOKENS
   ========================================================================== */

:root {
  /* --- Easing Curves (The Sensory Signature) --- */
  /* BRATTY: Dynamic, aggressive, snapping, instant, high acceleration with springy recoil */
  --bs-ease-bratty-snap: cubic-bezier(0.19, 1, 0.22, 1);
  --bs-ease-bratty-bounce: cubic-bezier(0.25, 1, 0.3, 1.25);
  
  /* SHY: Silky, viscous, floating fluid, lingering deceleration that feels like cashmere */
  --bs-ease-shy-silk: cubic-bezier(0.16, 1, 0.3, 1);
  --bs-ease-shy-velvet: cubic-bezier(0.25, 1, 0.5, 1);

  /* --- Transition Durations --- */
  --bs-duration-instant: 0.12s;  /* Haptic cursor tracker updates */
  --bs-duration-fast: 0.25s;     /* Button hover state updates, quick-shop tooltips */
  --bs-duration-normal: 0.4s;    /* Lookbook slides, cart drawer slide-outs */
  --bs-duration-slow: 0.65s;     /* Dual-persona split-screen expansion, full-screen fades */
  --bs-duration-vault: 0.9s;     /* Dramatic vault unlocked sequences */

  /* --- Fluid Scale & Blur Thresholds --- */
  --bs-blur-locked-vault: 16px;
  --bs-blur-dropdown: 8px;
  --bs-zoom-lookbook: 1.08;      /* Gentle magnification on image hover */
  --bs-zoom-haptic-texture: 1.4; /* Dynamic material preview zoom depth */
}

/* ==========================================================================
   4. LAYOUT SYSTEM & INTERACTIVE STRUCTURE CONFIGURATIONS
   ========================================================================== */

:root {
  /* --- Layout Spacing System (4px Grid / 8px Grid Base) --- */
  --bs-space-1: 0.25rem;  /* 4px */
  --bs-space-2: 0.5rem;   /* 8px */
  --bs-space-3: 0.75rem;  /* 12px */
  --bs-space-4: 1rem;     /* 16px */
  --bs-space-6: 1.5rem;   /* 24px */
  --bs-space-8: 2rem;     /* 32px */
  --bs-space-12: 3rem;    /* 48px */
  --bs-space-16: 4rem;    /* 64px */
  --bs-space-24: 6rem;    /* 96px */

  /* --- Border Radii (Structural Identity) --- */
  --bs-radius-bratty: 0px;       /* Brutalist, sharp geometric layouts (uncompromising edge) */
  --bs-radius-shy: 24px;         /* Warm, ultra-organic, soft pillowy radiuses */
  --bs-radius-pill: 9999px;      /* Standardized circular pill buttons */
  
  /* --- Interactive Component Z-Indices (Depth Strategy) --- */
  --bs-z-base: 1;
  --bs-z-lookbook-hotspot: 10;
  --bs-z-sticky-nav: 100;
  --bs-z-drawer: 200;            /* Sliding Express Cart / Sizing Calculator Drawer */
  --bs-z-modal: 500;             /* Age Gate, Discreet Verification Modals */
  --bs-z-cursor: 9999;           /* Custom Hardware-Accelerated Floating Cursor */
}

/* ==========================================================================
   5. INTERACTIVE LAYOUT SPECIFICATION & SENSORY COMMERCE DOCUMENTATION
   ========================================================================== */

/*
  THEMATIC SPECIFICATIONS & INTERACTION BLUEPRINTS
  ==============================================================================
  
  I. INTERACTIVE DUAL-PERSONA GATE (CHOOSE YOUR DESTINY)
  ------------------------------------------------------------------------------
  Objective:
  Create an immediate, high-theatricality fullscreen welcome portal mapping to 
  the user's desires. The screen is split 50/50 vertically on load.
  
  Layout Architecture:
  - Outer Wrapper: A viewport-locked container (`width: 100vw; height: 100vh; overflow: hidden; position: relative;`)
  - Left Panel (.persona-split.bratty): Midnight asphalt backdrop with electric ultraviolet overlays.
  - Right Panel (.persona-split.shy): Peach-skin cream saturated silk backgrounds.
  - Interlocking Clip-Path / Flex-Grow Hover Behavior:
    - Default state: Left and Right panels both take exactly `flex: 1 1 50%;` or `width: 50vw;`.
    - Hover Left ("Bratty"): Left expands to `width: 65vw;` while Right shrinks to `35vw;`.
      Transition easing: `transition: width var(--bs-duration-slow) var(--bs-ease-bratty-snap);`
      Cinemagraph plays rapidly at 1.25x speed behind.
    - Hover Right ("Shy"): Right expands to `width: 65vw;` while Left shrinks to `35vw;`.
      Transition easing: `transition: width var(--bs-duration-slow) var(--bs-ease-shy-silk);`
      Cinemagraph eases into a silky, slow liquid wave loop.
  - Typography Placement:
    - Super-headers ('Syne' Bold) set in absolute center alignment with text-stroke/outline overlays.
    - Left text uses neon ultraviolet glows (`text-shadow: var(--bs-bratty-shadow-glow);`).
    - Right text uses letterspaced velvet dark tone with a soft cream halo backdrop.

  II. EXPERIENTIAL DIGITAL LOOKBOOKS & SENSORY UI
  ------------------------------------------------------------------------------
  Objective:
  Immersive shoppable catalog inspired by premium runway catalogs, allowing direct
  checkout pathways directly from the model's body.
  
  Visual Structure:
  - Multi-Column Asymmetric Grid: Alternating large-scale landscape cinemagraphs 
    and portrait editorial frames. Hovering zooms the image asset by `var(--bs-zoom-lookbook)` 
    within its frame.
  - Shoppable Hotspots (.hotspot):
    - Positioned absolutely (`top: y%; left: x%;`) on the model's body coordinates.
    - Visual representation: A tiny, pulse-animated ring.
    - Touch Targets: Designed to fulfill modern tactical standards. Must have a minimum 
      interactive target size of `44px` on mobile, even if the visible element is smaller.
    - Hover/Tap State: Triggers a tiny floating modal with the product name, price, sizing state,
      and a "Quick Shop" CTA drawer.
  - Custom Cursor System (.custom-cursor):
    - Pointer is hidden globally via `cursor: none;` inside the lookbook wrapper.
    - A custom hardware-accelerated cursor element tracks coordinates using CSS variables
      `--cursor-x` and `--cursor-y` rendered with `transform: translate3d(var(--cursor-x), var(--cursor-y), 0);`.
    - Cursor states transform contextually:
      * Standard Hover: A clean, hollow ring (`border: 1px solid var(--bs-bratty-ultraviolet);`).
      * Grabbing Lookbook Look: Cursor morphs to dynamic text reading "DRAG TO EXPLORE".
      * Hotspot Hover: Cursor shrinks into a tight pinpoint focus dot while triggering a 
        haptic-like snap effect on the hotspot.
  - 360-Degree Material Haptics (.texture-lens):
    - High-fidelity zoom overlay of the fabric mesh (e.g. sheer mesh, high-tension elastic, silk).
    - Responsive cursor tracker reveals magnified high-resolution micro-texture detail at `var(--bs-zoom-haptic-texture)`.

  III. THE VIP MEMBERSHIP VAULT UX (BRATTY & SHY CLUB)
  ------------------------------------------------------------------------------
  Objective:
  Replicate the psychological lock-in loop of Savage X Fenty Xtra VIP membership.
  Designed to trigger massive FOMO and drive subscription conversions.
  
  Vault Gate Layout:
  - "VIP-Only Drops" UI is visually locked behind a gorgeous frosted glass overlay.
  - Frosted overlay styling:
    `backdrop-filter: blur(var(--bs-blur-locked-vault));`
    `background: var(--bs-bratty-gradient-split);` for Bratty side.
    `background: var(--bs-shy-gradient-split);` for Shy side.
  - Centered glowing visual "Lock" icon. Upon membership detection, the lock smoothly 
    splits vertically and dissolves using custom keyframes (`clip-path: polygon(...)`)
    with duration `var(--bs-duration-vault)`.
  - Gamified Loyalty Tier Dashboard (.loyalty-vault):
    - VIP Tier indicator tracking path using progress bars styled like electric neon cables 
      for Bratty and gold champagne silk threads for Shy.
    - Interactive "Drawers" detailing VIP member-only pricing (e.g., "$49 2-Piece VIP Sets" vs "$98 Regular price").
    - Highly prominent "Xtra VIP Lock-In" CTA floating at screen bottom on mobile.

  IV. FRICTIONLESS SIZING & HIGH-CONVERSION CHECKOUT INTEGRATION
  ------------------------------------------------------------------------------
  Objective:
  Alleviate user sizing anxiety (reducing expensive drop-ship returns) and handle 
  sensitive adult/sensory commerce requirements with extreme class and total absolute discretion.
  
  Interactive Sizing Calculator:
  - Interactive modal utilizing a 3D-feeling grid selection.
  - Input forms capture Band, Bust, and Hip measurements, then visually map them against
    a body-contour silhouette.
  - Outputs recommended size with a "Confidence Score" indicator (e.g., "94% of members size M fit perfectly").
  - Sizing options shown as beautiful tactile disk selectors.
  
  Discreet Checkout Gateways:
  - Modals designed with absolute minimal friction. Standardized age-verification gate 
    integrated seamlessly with the brand aesthetic (classy, premium fonts, dark overlays).
  - High-conversion trust badges prominently located near the final checkout CTAs:
    * "Discreet Secure Shipping: Ships in plain, unmarked heavy-duty matte boxes. 
       No brand identifiers or adult-product references on packaging labels."
    * "Discreet Secure Billing: Appears simply as 'BS* LUXE APPAREL' on banking statements."
    * These guarantees are variables wrapped in clean monochrome boxes utilizing 
      `background-color: var(--bs-brand-discreet-gray);`.

  V. MOBILE-FIRST TACTILE COMMERCE
  ------------------------------------------------------------------------------
  Objective:
  Optimize the entire user journey for rapid, single-thumb shopping, maximizing mobile conversion.
  
  Mobile Architecture Patterns:
  - Floating Quick-Cart Button: Absolute bottom-right corner anchor, inside easy thumb-swiping zone.
  - Bottom-Sheet drawers (`.bottom-drawer`) for Sizing Calculator and Quick Checkout:
    * Positioned at the bottom of the viewport (`bottom: 0; left: 0; width: 100vw;`).
    * Drag-to-dismiss support using CSS touch-action `touch-action: translateY;`.
    * Slides upward with `--bs-ease-bratty-snap` or `--bs-ease-shy-silk` depending on the current active persona.
  - High-Impact Mobile Cinemagraph Banners: Aspect ratio set to `aspect-ratio: 9 / 16;` 
    to take up full viewport height on mobile screens, utilizing compressed auto-looping videos 
    optimized for instant LCP performance metrics.
*/

/* ==========================================================================
   6. CORE UTILITY STRUCTURAL THEMES
   ========================================================================== */

/* --- Bratty Persona Theme Configuration --- */
.theme-bratty {
  background-color: var(--bs-bratty-asphalt-black);
  color: var(--bs-bratty-text-primary);
  font-family: var(--bs-font-body-performance);
  transition: background-color var(--bs-duration-slow) var(--bs-ease-bratty-snap),
              color var(--bs-duration-slow) var(--bs-ease-bratty-snap);
}

.theme-bratty h1, 
.theme-bratty h2, 
.theme-bratty h3, 
.theme-bratty .display-header {
  font-family: var(--bs-font-header-dramatic);
  font-weight: var(--bs-font-weight-dramatic);
  letter-spacing: var(--bs-tracking-tight);
}

.theme-bratty .btn-primary {
  background-color: var(--bs-bratty-cyber-lime);
  color: var(--bs-brand-pure-black);
  font-family: var(--bs-font-header-modern);
  font-weight: var(--bs-font-weight-bold);
  border-radius: var(--bs-radius-bratty);
  letter-spacing: var(--bs-tracking-wide);
  transition: all var(--bs-duration-fast) var(--bs-ease-bratty-snap);
}

.theme-bratty .btn-primary:hover {
  background-color: var(--bs-brand-pure-white);
  box-shadow: var(--bs-bratty-shadow-lime);
  transform: translateY(-2px);
}

.theme-bratty .vip-badge {
  background: var(--bs-bratty-gradient-neon);
  box-shadow: var(--bs-bratty-shadow-glow);
  color: var(--bs-brand-pure-white);
  border-radius: var(--bs-radius-bratty);
}

/* --- Shy Persona Theme Configuration --- */
.theme-shy {
  background-color: var(--bs-shy-peach-cream);
  color: var(--bs-shy-rose-taupe);
  font-family: var(--bs-font-body-editorial);
  transition: background-color var(--bs-duration-slow) var(--bs-ease-shy-silk),
              color var(--bs-duration-slow) var(--bs-ease-shy-silk);
}

.theme-shy h1, 
.theme-shy h2, 
.theme-shy h3, 
.theme-shy .display-header {
  font-family: var(--bs-font-header-modern);
  font-weight: var(--bs-font-weight-semibold);
  color: var(--bs-shy-velvet-dark);
  letter-spacing: var(--bs-tracking-wide);
}

.theme-shy .btn-primary {
  background-color: var(--bs-shy-crimson-blush);
  color: var(--bs-brand-pure-white);
  font-family: var(--bs-font-body-editorial);
  font-weight: var(--bs-font-weight-medium);
  border-radius: var(--bs-radius-shy);
  box-shadow: var(--bs-shy-shadow-soft);
  transition: all var(--bs-duration-normal) var(--bs-ease-shy-silk);
}

.theme-shy .btn-primary:hover {
  background-color: var(--bs-shy-velvet-dark);
  box-shadow: 0 12px 35px rgba(46, 34, 27, 0.15);
  transform: translateY(-1px);
}

.theme-shy .vip-badge {
  background-color: var(--bs-shy-champagne-gold);
  color: var(--bs-shy-velvet-dark);
  border-radius: var(--bs-radius-shy);
}

/* ==========================================================================
   7. RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */

/*
  Tactile Breakpoint Strategies:
  - Mobile (< 767px): Standard swipe interface, single column shop views, dynamic bottom sheets.
  - Tablet (768px - 1024px): Medium grid overlays, dual lookbook rows, sticky headers.
  - Desktop (> 1025px): Dual-persona split-screens, absolute hotspot placement, full mouse custom cursor trackers.
*/

@media (max-width: 767px) {
  :root {
    /* Tighten spacings on mobile for maximum thumb sweep area */
    --bs-space-8: 1.25rem;
    --bs-space-12: 1.75rem;
    --bs-space-16: 2.25rem;
    --bs-space-24: 3rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & SSL FIXES
   ========================================================================== */

@media (max-width: 768px) {
  /* Adjust the portal columns to vertically stack or shrink the sidebar */
  .portal-split-wrapper {
    flex-direction: column !important;
  }
  
  .portal-column {
    flex: 1 1 50% !important;
    width: 100% !important;
    height: 50% !important;
  }

  .portal-split-wrapper.active-bratty .bratty-column,
  .portal-split-wrapper.active-shy .shy-column {
    flex: 1 1 calc(100% - 60px) !important;
    height: calc(100% - 60px) !important;
    width: 100% !important;
  }

  .portal-split-wrapper.active-bratty .shy-column,
  .portal-split-wrapper.active-shy .bratty-column {
    flex: 0 0 60px !important;
    height: 60px !important;
    width: 100% !important;
  }

  .vertical-tab-label {
    transform: translate(-50%, -50%) rotate(0deg) !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.2em !important;
  }

  /* Shrink storefront logo */
  .storefront-logo {
    font-size: 1.2rem !important;
  }

  /* Hide visualizer or scale it down */
  .storefront-nav {
    gap: var(--bs-space-4) !important;
  }
  .storefront-nav-link {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Make product grids mobile friendly */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--bs-space-4) !important;
  }
  
  .product-image-container {
    height: 200px !important;
  }

  /* Shop header stacking */
  .shop-header-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--bs-space-4) !important;
  }
  
  .shop-title-main {
    font-size: 1.5rem !important;
  }

  /* Cart Sidebar */
  .cart-sidebar {
    width: 100vw !important;
    right: -100vw !important;
  }
  
  .cart-sidebar.open {
    transform: translateX(-100vw) !important;
  }
}

@media (max-width: 480px) {
  /* 1-column product grid for very small devices */
  .product-grid {
    grid-template-columns: 1fr !important;
  }
  
  .product-image-container {
    height: 300px !important;
  }
  
  .vertical-tab-label {
    font-size: 1.2rem !important;
  }
}