/** Shopify CDN: Minification failed

Line 620:1 Unexpected "<"

**/
/*=============================================
=    DESIGN SYSTEM TOKENS V3 - Master Colors  =
=============================================*/

/* ============================================
   DESIGN TOKEN HIERARCHY & OVERRIDE SYSTEM
   
   🎯 3-LEVEL TOKEN HIERARCHY:
   Level 1: Master Tokens (Source of Truth)
     ↓
   Level 2: Semantic Tokens (Contextual Meaning)
     ↓
   Level 3: Contextual Tokens (Specific Usage)
   
   🔄 OVERRIDE FLOW (2 LEVELS):
   ds-tokens.css (Defaults)
     ↓ (overridden by)
   theme.liquid (Theme Settings)
   
   📝 NOTE: Section-specific styling is implemented using scoped CSS
      classes (.section-{{ section.id }}), not token overrides.
      This maintains global consistency while allowing unique section designs.
   
   🎨 THEME SETTINGS LOCATION:
   Theme Editor > Theme Settings > Design System
   
   📚 TOKEN USAGE GUIDE:
   See docs/TOKEN-USAGE-GUIDE.md for comprehensive examples
   ============================================ */

/* ============================================
   HOW TO USE THIS DESIGN SYSTEM:
   
   🎨 For Theme-Wide Changes:
   Go to: Theme Editor > Theme Settings > Design System
   
   All settings in the Theme Editor will override 
   the default values defined in this file.
   
   🔧 For Section-Level Styling:
   Sections use scoped CSS classes (e.g., .section-{{ section.id }})
   and rely on global tokens. No per-section token overrides exist.
   
   📝 Default Values:
   This file contains the default values that 
   are used when no theme setting overrides them.
   ============================================ */

/* ============================================
   CSS LAYER ARCHITECTURE
   
   This file (ds-tokens.css) is UNLAYERED and has the highest
   cascade priority in the design system. It defines global tokens
   that all sections reference.
   
   Layer Priority (lowest to highest):
   1. @layer dawn-base - Dawn's base.css
   2. @layer dawn-sections - Dawn's component CSS
   3. @layer dawn-inline - Dawn's inline styles
   4. @layer design-system - Design system section styles
   5. @layer design-system-overrides - Reserved for future use
   6. UNLAYERED (this file) - Highest priority
   
   All design system sections wrap their <style> blocks in
   @layer design-system to ensure predictable cascade order
   and prevent conflicts when multiple sections load together.
   
   See: snippets/ds-dawn-layers.liquid for layer definitions
   See: docs/ARCHITECTURE.md for detailed architecture docs
   ============================================ */

/* -- 🎯 GLOBAL RESET -- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  min-height: 100vh;
  background: var(--master-bg-dark);
}

:root {
  /* ============================================
     🎨 LEVEL 1: MASTER COLOR CONTROLS
     These are overridden by Theme Settings > Design System > Colors
     
     Relationship Flow:
     --master-accent-primary → --color-primary → --color-border-interactive
     --master-accent-secondary → --color-secondary → --gradient-primary
     ============================================ */
  
  --master-accent-primary: #365ca4;          /* Theme Setting: Primary Color - Used in buttons, links, interactive borders */
  --master-accent-secondary: #57c0de;         /* Theme Setting: Secondary Color - Used in gradients and secondary accents */
  --master-bg-dark: #000000;                  /* Theme Setting: Theme Background Color - Main page background */
  --master-bg-surface: #0A0F1C;               /* Theme Setting: Background Surface Color - Card and surface backgrounds */
  --master-bg-surface-elevated: #111827;
  
  /* Opacity Controls */
  --border-opacity: 1;                        /* Theme Setting: Card Border Opacity (0-1 where 1 = 100%) */
  --card-bg-opacity: 60;                      /* Theme Setting: Card Background Opacity (0-100) */

  /* ============================================
     🎨 LEVEL 2: SEMANTIC COLOR MAPPINGS
     These reference the master colors above
     
     Browser Compatibility: color-mix() requires Chrome 111+, Safari 16.2+, Firefox 113+
     ============================================ */
  
  /* Primary Palette */
  --color-primary: var(--master-accent-primary); /* ← References master color - Used in buttons, links, interactive borders */
  --color-secondary: var(--master-accent-secondary); /* ← References master color - Used in secondary UI elements */
  --color-primary-light: color-mix(in srgb, var(--master-accent-primary) 70%, white); /* Lighter variant for subtle accents */
  --color-secondary-light: color-mix(in srgb, var(--master-accent-secondary) 70%, white); /* Lighter variant for subtle accents */
  --color-accent-cyan: var(--master-accent-primary); /* Alias for primary accent */

  /* Feedback Palette */
  --color-success: #10b981; /* Success state color */
  --color-success-bg: #103e26; /* Success background color for alerts */
  --color-warning: #f59e0b; /* Warning state color */
  --color-error: #ef4444; /* Error state color */
  --color-error-bg: #3e1010; /* Error background color for alerts */

  /* Text Colors */
  --color-text-default: #e5e5e5; /* Main text color */
  --color-text-subtle: #d1d5db; /* Secondary text color */
  --color-text-muted: #d1d5db; /* Muted text color */
  --color-text-badge-secondary: color-mix(in srgb, var(--master-accent-secondary) 80%, white); /* Badge text on secondary background */
  --color-text-badge-accent: color-mix(in srgb, var(--master-accent-primary) 80%, white); /* Badge text on accent background */
  --color-text-button-primary: #e5e5e5; /* Text color for primary buttons */
  
  /* UI Effects */
  --color-shimmer: rgba(255, 255, 255, 0.15); /* Shimmer effect overlay */
  
  /* ============================================
     🎨 LEVEL 3: CONTEXTUAL USAGE TOKENS
     These auto-generate from semantic colors
     ============================================ */
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--master-accent-primary), var(--master-accent-secondary)); /* ← Uses both master colors - Button/text gradient */
  --gradient-text: linear-gradient(135deg, var(--master-accent-primary), var(--master-accent-secondary)); /* ← Uses both master colors - Text gradient (same as primary) */
  --gradient-card: color-mix(in srgb, var(--master-bg-surface) var(--card-bg-opacity, 60%), transparent); /* Card background gradient */
  --gradient-featured: color-mix(in srgb, var(--master-bg-surface) 80%, transparent); /* Featured card background */
  --gradient-sale: #dc2626; /* Sale badge gradient */
  
  /* Backgrounds */
  --color-background-base: var(--master-bg-dark); /* Main page background */
  --color-background-minimal: color-mix(in srgb, var(--master-bg-surface) 60%, transparent); /* Minimal background */
  --color-background-card-hover: color-mix(in srgb, var(--master-bg-surface) 70%, transparent); /* Card hover background */
  --color-background-badge-secondary: color-mix(in srgb, var(--master-accent-secondary) 20%, transparent); /* Secondary badge background */
  --color-background-badge-accent: color-mix(in srgb, var(--master-accent-primary) 20%, transparent); /* Accent badge background */
  --color-background-badge-success: rgba(16, 185, 129, 0.2); /* Success badge background */
  
  /* Frosted Glass Card Settings */
  --frosted-glass-opacity: 30%;        /* Card background opacity */
  --frosted-glass-blur: 2px;           /* Backdrop blur amount */
  --frosted-glass-bg: color-mix(in srgb, var(--master-bg-surface) var(--frosted-glass-opacity), transparent); /* Frosted glass background */
  
  /* Borders */
  --color-border-default: rgb(55, 65, 81); /* Default border color */
  --color-border-interactive: var(--master-accent-primary); /* ← References master color - Interactive borders */
  --color-border-featured: var(--master-accent-primary); /* ← References master color - Featured borders */
  --color-border-badge-secondary: var(--master-accent-secondary); /* ← References master color - Secondary badge borders */
  --color-border-badge-accent: var(--master-accent-primary); /* ← References master color - Accent badge borders */
  --color-border-badge-success: rgb(52, 211, 153); /* Success badge borders */

  /* ============================================
     🌌 SECTION BACKGROUNDS
     User-selectable backgrounds for sections
     ============================================ */
  
  --gradient-bg-top-left: transparent; /* Radial glow from top-left corner */
  --gradient-bg-top-right: transparent; /* Radial glow from top-right corner */
  --gradient-bg-center: transparent; /* Radial glow from center */
  --color-bg-surface: rgba(11, 19, 43, 0.75); /* Solid surface background with opacity */
  --color-bg-flat: var(--master-bg-dark); /* Flat dark background (no gradient) */

  /* ============================================
     ✒️ TYPOGRAPHY SYSTEM
     Overridden by Theme Settings > Design System > Typography
     
     Font families: display vs body
     Size tokens: clamp() for responsive sizing (mobile → desktop)
     Weight tokens: light to extrabold
     Per-level tokens: H1-H4, Lead, Body, Caption
     ============================================ */

  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes - Responsive with clamp() */
  --fs-h1: clamp(2.25rem, 5.5vw, 3.5rem);     /* 36px mobile → 56px desktop - Main headlines */
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);     /* 28px mobile → 40px desktop - Section titles */
  --fs-h3: clamp(1.25rem, 2.2vw, 1.5rem);     /* 20px mobile → 24px desktop - Subsection titles */
  --fs-h4: 1.125rem;                          /* 18px - Card titles */
  --fs-lead: clamp(1.125rem, 1.2vw, 1.375rem);/* 18px → 22px - Intro text */
  --fs-subheadline: clamp(1.125rem, 1.2vw, 1.375rem);/* 18px → 22px - Subheadlines */
  --fs-body: clamp(1rem, 0.6vw + 0.9rem, 1.125rem); /* 16px → ~18px - Body text */
  --fs-sm: 0.875rem;                          /* Theme Setting: Small Text Size */
  --fs-caption: 0.75rem; /* Small text */

  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  
  /* Font Weights - Per-level (overridable) */
  --fw-h1: var(--fw-semibold);                /* Prefer readable weight; overridable in theme */
  --fw-h2: var(--fw-semibold);                /* Prefer readable weight; overridable in theme */
  --fw-h3: var(--fw-medium);                  /* Theme Setting: H3 Font Weight (overridden in theme.liquid) */
  --fw-body: var(--fw-normal);                /* Theme Setting: Body Font Weight (overridden in theme.liquid) */
  
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.65;
  
  --letter-spacing-wide: 0.05em;
  
  /* ============================================
     📏 SPACING & LAYOUT
     Overridden by Theme Settings > Design System > Spacing
     ============================================ */

  /* Base Spacing Scale */
  --space-xs: 0.5rem; /* 8px - Small gaps */
  --space-sm: 1rem; /* 16px - Element spacing */
  --space-md: 1.5rem; /* 24px - Used for element spacing, card padding */
  --space-lg: 2rem; /* 32px - Larger gaps */
  --space-xl: 2.5rem; /* 40px - Section spacing */
  --space-2xl: 3rem; /* 48px - Large sections */
  --space-3xl: 3.5rem; /* 56px - Hero spacing */
  --space-xxl: 4rem; /* 64px - Maximum spacing */
  
  --space-btn-y-sm: 0.75rem;

  /* Container & Layout */
  --container-padding: 3rem 1rem;             /* Theme Setting: Section Padding (Mobile/Desktop) */
  --container-padding-mobile: 2rem 0.75rem;   /* Theme Setting: Section Padding (Mobile) */
  --container-padding-mobile-horizontal: 0.75rem; /* Mobile horizontal padding */
  --container-padding-horizontal: 1rem; /* Desktop horizontal padding */
  --container-max-width: 75rem;               /* Theme Setting: Container Max Width */
  --container-max-width-narrow: 50rem;
  --card-flex-basis: 17.5rem;
  --card-max-width-sm: 25rem;
  --card-max-width-md: 22.5rem;
  --aspect-ratio-product: 4 / 3;

  /* Section Spacing */
  --section-padding-top: 3rem; /* Section top padding */
  --section-padding-bottom: 3rem; /* Section bottom padding */

  /* Grid Gaps */
  --gap-row: var(--space-md); /* Row gap between grid items */
  --gap-col: var(--space-md); /* Column gap between grid items */

  /* ============================================
     🔲 BORDERS & CARDS
     Overridden by Theme Settings > Design System > Borders & Cards
     ============================================ */

  /* Border Radius */
  --radius-sm: 1.5rem;                        /* 24px - Premium rounded cards */
  --radius-md: 2rem;                          /* 32px - Standard card radius (overridable via theme settings) */
  --radius-lg: 2.5rem;                        /* 40px - Extra premium large cards */
  --radius-full: 9999px;                      /* Fully rounded buttons and pills */

  /* ============================================
     ✨ EFFECTS & TRANSITIONS
     Overridden by Theme Settings > Design System > Effects
     ============================================ */
  
  --backdrop-blur: blur(8px);
  --transition-base: all 0.3s ease;          /* Theme Setting: Animation Speed */
  --transition-long: all 0.6s ease;          /* Calculated from transition-base */
  
  /* Glow Effects */
  --shadow-card-lift: 0 15px 30px -10px color-mix(in srgb, var(--master-accent-primary) 30%, transparent); /* ← Uses master color - Hover lift shadow */
  --transform-lift: translateY(-6px);
  --transform-lift-xs: translateY(-3px);
  --transform-scale-md: scale(1.05);
  --transform-scale-lg: scale(1.08);
  
  /* ============================================
     🔲 BORDER WIDTHS
     Overridden by Theme Settings > Design System > Borders & Cards
     ============================================ */
  --border-width-default: 1px;
  --border-width-md: 2px;
  --border-width-card: 1px;                  /* Theme Setting: Card Border Thickness */
  --border-width-accent: 4px;
  --border-width-slider-handle: 2px;
  --border-width-thick: 4px;

  /* ============================================
     🎯 ICON & INDICATOR SIZING
     Consistent sizing for icons and indicators
     ============================================ */
  --icon-size-sm: 16px;  /* Small icons */
  --icon-size-md: 24px;  /* Medium icons (default) */
  --icon-size-lg: 32px;  /* Large icons */
  --icon-size-xl: 48px;  /* Extra large icons (feature cards) */
  --icon-size-xxl: 64px; /* Hero icons */

  /* ============================================
     🎯 INTERACTION & FORM TOKENS
     ============================================ */

  /* Focus States */
  --outline-width-focus: 2px;
  --outline-offset-focus: 2px;

  /* Form Elements */
  --input-height: 3.4375rem; /* 55px */
  --textarea-min-height: 9.375rem; /* 150px */
  --textarea-max-height: 15.625rem; /* 250px */
  --form-max-width: 25rem; /* 400px */
  --form-min-width: 20rem; /* 320px */

  /* Badges & Indicators */
  --badge-max-width-lg: 12.5rem; /* 200px */
  --badge-max-width-md: 8.75rem; /* 140px */
  --indicator-size-sm: 0.375rem; /* 6px */

  /* Cards & Logos */
  --card-min-width-logo: 9.375rem; /* 150px */
  --card-min-height-logo: 5rem; /* 80px */
  --logo-grid-size: 50px; /* Grid pattern size for logo sections */
  --hover-lift-amount: 8px; /* Distance cards lift on hover */
  
  /* Media Kit Logo Section Tokens */
  --bg-glow-overlay: rgba(10, 10, 26, 0.9); /* Background glow overlay color */
  --bg-glow-overlay-mobile: rgba(10, 10, 26, 0.7); /* Lighter mobile overlay */
  --logo-section-height: 50px; /* Height of logo container */
  --logo-grid-max-width: 1400px; /* Maximum width for logo grid */
  --logo-max-height: 45px; /* Default maximum height for logos */
  --logo-card-min-width: 160px; /* Minimum width for logo cards */
  --logo-card-max-width: 180px; /* Maximum width for logo cards */

  /* Charts & Data Visualization */
  --chart-height: 12.5rem; /* 200px */

  /* Profile Images */
  --profile-image-max-width: 31.25rem; /* 500px */
  --profile-image-size-mobile: 12.5rem; /* 200px */

  /* Overlays & Special Backgrounds */
  --color-bg-overlay: rgba(17, 24, 39, 0.5);
  --overlay-bg-50: rgba(0, 0, 0, 0.5);  /* 50% black overlay for modals and drawers */
  --overlay-bg-80: rgba(0, 0, 0, 0.8);  /* 80% black overlay for modal backdrops */
  --overlay-bg-95: rgba(0, 0, 0, 0.95); /* 95% black overlay for lightbox */
  --color-black: #000;

  /* Breakpoints (Documentation Only - CSS vars don't work in @media queries) */
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 768px;
  --breakpoint-tablet-lg: 900px;
  --breakpoint-desktop: 1024px;

  /* ============================================
     ✒️ TYPOGRAPHY – LEVEL COLORS (Defaults)
     Expose per-level text colors; sections can override
     ============================================ */
  --color-h1: var(--color-text-default);
  --color-h2: var(--color-text-default);
  --color-h3: var(--color-text-default);
  --color-h4: var(--color-text-default);
  --color-lead: var(--color-text-subtle);
  --color-body: var(--color-text-default);
  --color-caption: var(--color-text-muted);

  /* Typography – Line heights per level (unitless) */
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-h4: 1.35;
  --lh-lead: 1.6;
  --lh-body: 1.6;
  --lh-caption: 1.4;

  /* Typography – Letter spacing per level (em) */
  --ls-h1: 0em;
  --ls-h2: 0em;
  --ls-h3: 0em;
  --ls-h4: 0em;
  --ls-lead: 0em;
  --ls-body: 0em;
  --ls-caption: 0.02em;

  /* Typography – Text transform per level */
  --tt-h1: none;
  --tt-h2: none;
  --tt-h3: none;
  --tt-h4: none;
  --tt-lead: none;
  --tt-body: none;
  --tt-caption: none;

  /* Typography – Font families (overridable via Theme Settings) */
  --font-display-family: var(--font-display);
  --font-body-family: var(--font-body);

  /* Typography – Size inputs (min/max) used to compute clamp in theme.liquid */
  --fs-h1-min: 36px;  --fs-h1-max: 56px;
  --fs-h2-min: 28px;  --fs-h2-max: 40px;
  --fs-h3-min: 20px;  --fs-h3-max: 24px;
  --fs-h4-min: 16px;
  --fs-h4-max: 28px;
  --fs-lead-min: 18px;
  --fs-lead-max: 22px;
  --fs-body-min: 16px; --fs-body-max: 18px;
  --fs-caption-min: 12px;
  --fs-caption-max: 14px;

  /* ============================================
     🌈 GRADIENT BUILDER (Defaults)
     Gradients are controlled via Theme Settings only
     
     --gradient-custom is not implemented; use preset gradients instead:
     - --gradient-primary: Button/text gradient
     - --gradient-card: Card background
     - --gradient-featured: Featured cards
     ============================================ */
  --gradient-type: linear;                    /* linear | radial (for reference) */
  --gradient-angle: 135deg;                   /* used for linear gradients */
  --gradient-color-1: var(--master-accent-primary);
  --gradient-color-2: var(--master-accent-secondary);
  --gradient-color-3: color-mix(in srgb, var(--master-accent-primary) 25%, transparent);
  --gradient-position-1: 0%;
  --gradient-position-2: 50%;
  --gradient-position-3: 100%;
  --gradient-radial-position: 50% 50%;       /* e.g., '0% 0%', '50% 50%', '100% 0%' */
  --gradient-overlay-opacity: 0;              /* 0 - 1 (for reference) */
  --gradient-custom: var(--gradient-primary); /* Fallback to preset gradient */

  /* ============================================
     ✨ SHADOWS & HOVER EFFECTS (Primitives + Composite)
     Composite --shadow-card will be built in Liquid; defaults here
     ============================================ */
  --shadow-x: 0px; /* Primitive shadow X offset */
  --shadow-y: 15px; /* Primitive shadow Y offset */
  --shadow-blur: 30px; /* Primitive shadow blur */
  --shadow-spread: -10px; /* Primitive shadow spread */
  --shadow-color: 17, 24, 39;                 /* rgb components for rgba() */
  --shadow-opacity: 0.3;                      /* 0 - 1 */
  --shadow-card: var(--shadow-card-lift); /* Composite shadow built in theme.liquid */
  --hover-lift-amount: 6px; /* Distance cards lift on hover */
  --hover-scale-amount: 1.05; /* Scale factor on hover (105%) */
}

/* ============================================
   🎨 GLOBAL MINIMAL CARD COMPONENT
   Use this class for any minimal card with vertical accent line
   Frosted glass effect, vertical accent line, hover behavior
   ============================================ */

.ds-minimal-card {
  background: var(--frosted-glass-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding-left: calc(var(--space-lg) + var(--border-width-accent) + var(--space-xs));
  backdrop-filter: blur(var(--frosted-glass-blur));
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur));
  box-shadow: 0 0 0 0 transparent;
}

.ds-minimal-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--border-width-accent);
  background: var(--gradient-primary);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.ds-minimal-card:hover {
  background: var(--color-background-card-hover);
  transform: var(--transform-lift-xs);
  box-shadow: var(--shadow-card-lift);
}

/* Disable hover effects on touch devices */
@media (hover: none), (pointer: coarse) {
  .ds-minimal-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--frosted-glass-bg);
  }
}

/* ============================================
   🎨 GLOBAL PRIMARY BUTTON COMPONENT
   Use this class for all primary action buttons
   Gradient fill, shimmer effect, hover lift
   ============================================ */

.btn-primary,
.ds-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: var(--color-text-button-primary);
  font-family: var(--font-body-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.btn-primary:hover,
.ds-btn-primary:hover,
.btn-primary:focus-visible,
.ds-btn-primary:focus-visible {
  transform: var(--transform-lift-xs);
  box-shadow: var(--shadow-card-lift);
}

.btn-primary:active,
.ds-btn-primary:active {
  transform: scale(0.97);
  box-shadow: none;
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   🎨 GLOBAL SECONDARY BUTTON COMPONENT
   Use this class for secondary action buttons
   Gradient border, frosted glass, hover behavior
   ============================================ */

.btn-secondary,
.ds-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-default);
  font-family: var(--font-body-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: var(--border-width-md) solid transparent;
  background-clip: padding-box;
}

.btn-secondary::before,
.ds-btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  padding: var(--border-width-md);
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.btn-secondary:hover,
.ds-btn-secondary:hover,
.btn-secondary:focus-visible,
.ds-btn-secondary:focus-visible {
  transform: var(--transform-lift-xs);
  color: var(--color-primary);
}

.btn-secondary:hover::before,
.ds-btn-secondary:hover::before,
.btn-secondary:focus-visible::before,
.ds-btn-secondary:focus-visible::before {
  background: var(--gradient-primary);
  opacity: 1;
}

.btn-secondary:active,
.ds-btn-secondary:active {
  transform: scale(0.97);
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================
   FROSTED GLASS UTILITY CLASS
   Apply to any card for glassmorphism effect
   Browser Compatibility: backdrop-filter requires -webkit- prefix for Safari
   ============================================= */
.frosted-glass-card {
  background: var(--frosted-glass-bg) !important;
  backdrop-filter: blur(var(--frosted-glass-blur));
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur));
}</target_file_content>