/**
 * BEEP! Merchant Website Design System
 * 
 * Design tokens extracted from Flutter theme folder
 * CI: Black & White with modern liquid glass styling
 * Typography: Mulish font family
 */

/* Import Mulish font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');

/* ===================================================================
   ROOT VARIABLES
   =================================================================== */

:root {
    /* === PRIMARY CI COLORS === */
    --color-primary: #000000;
    /* Black (CI) */
    --color-primary-light: #333333;
    /* Lighter black for hover states */
    --color-secondary: #FFFFFF;
    /* White (CI) */
    --color-secondary-dark: #F8F9FA;
    /* Slightly off-white for contrast */

    /* === BACKGROUND SYSTEM === */
    --color-background: #FFFFFF;
    /* Pure white */
    --color-surface: #FFFFFF;
    /* Card/container backgrounds */
    --color-surface-variant: #F8F9FA;
    /* Subtle contrast surfaces */
    --color-surface-elevated: #FAFBFC;
    /* Elevated components */

    /* === LIQUID GLASS COLORS === */
    /* Ultra Thin Material - For subtle overlays */
    --glass-ultra-thin-surface: rgba(255, 255, 255, 0.96);
    /* 96% white */
    --glass-ultra-thin-border: rgba(0, 0, 0, 0.10);
    /* 10% black */
    --glass-ultra-thin-overlay: rgba(0, 0, 0, 0.02);
    /* 2% black */

    /* Thin Material - For toolbars and navigation */
    --glass-thin-surface: rgba(255, 255, 255, 0.94);
    /* 94% white */
    --glass-thin-border: rgba(0, 0, 0, 0.12);
    /* 12% black */
    --glass-thin-overlay: rgba(0, 0, 0, 0.03);
    /* 3% black */

    /* Regular Material - Standard glass */
    --glass-regular-surface: rgba(255, 255, 255, 0.92);
    /* 92% white */
    --glass-regular-border: rgba(0, 0, 0, 0.15);
    /* 15% black */
    --glass-regular-overlay: rgba(0, 0, 0, 0.05);
    /* 5% black */

    /* Thick Material - Heavy overlays */
    --glass-thick-surface: rgba(255, 255, 255, 0.90);
    /* 90% white */
    --glass-thick-border: rgba(0, 0, 0, 0.20);
    /* 20% black */
    --glass-thick-overlay: rgba(0, 0, 0, 0.08);
    /* 8% black */

    /* Ultra Thick Material - Maximum frosted effect */
    --glass-ultra-thick-surface: rgba(255, 255, 255, 0.85);
    /* 85% white */
    --glass-ultra-thick-border: rgba(0, 0, 0, 0.25);
    /* 25% black */
    --glass-ultra-thick-overlay: rgba(0, 0, 0, 0.10);
    /* 10% black */

    /* === TEXT HIERARCHY === */
    --color-text-primary: #000000;
    /* High contrast black (CI) */
    --color-text-secondary: #374151;
    /* Medium contrast for secondary text */
    --color-text-tertiary: #6B7280;
    /* Lower contrast for tertiary info */
    --color-text-muted: #9CA3AF;
    /* Subtle text for hints/placeholders */
    --color-text-on-primary: #FFFFFF;
    /* White text on black backgrounds */
    --color-text-on-surface: #111827;
    /* Slightly softer black for readability */

    /* === SEMANTIC STATUS COLORS === */
    --color-success: #059669;
    /* Rich green for confirmations/success */
    --color-success-light: #ECFDF5;
    /* Light green background */
    --color-success-dark: #047857;
    /* Darker green for emphasis */

    --color-error: #DC2626;
    /* Strong red for errors/warnings */
    --color-error-light: #FEF2F2;
    /* Light red background */
    --color-error-dark: #B91C1C;
    /* Darker red for emphasis */

    --color-warning: #D97706;
    /* Amber for warnings/attention */
    --color-warning-light: #FEF3C7;
    /* Light amber background */
    --color-warning-dark: #92400E;
    /* Darker amber for emphasis */

    --color-info: #2563EB;
    /* Clear blue for information */
    --color-info-light: #EFF6FF;
    /* Light blue background */
    --color-info-dark: #1D4ED8;
    /* Darker blue for emphasis */

    /* === SHOPPING APP SPECIFIC COLORS === */
    --color-price: #059669;
    /* Green for prices (positive association) */
    --color-discount: #DC2626;
    /* Red for discounts/sales (attention-grabbing) */

    /* === BRAND ACCENT PINK === */
    --color-accent-pink: #EC4899;
    /* Pink accent from brand theme */
    --color-accent-pink-light: #FCE7F3;
    /* Light pink background */
    --color-accent-pink-dark: #DB2777;
    /* Darker pink for emphasis */

    /* === BORDER AND SHADOW SYSTEM === */
    --color-border: #E5E7EB;
    /* Light gray borders */
    --color-border-light: #F3F4F6;
    /* Very light borders */
    --color-border-dark: #D1D5DB;
    /* Medium gray borders */
    --color-border-focus: #374151;
    /* Dark border for focus states */

    --shadow-light: rgba(0, 0, 0, 0.02);
    /* Ultra-light shadow (2% opacity) */
    --shadow: rgba(0, 0, 0, 0.04);
    /* Very subtle shadow (4% opacity) */
    --shadow-medium: rgba(0, 0, 0, 0.06);
    /* Medium shadow (6% opacity) */
    --shadow-dark: rgba(0, 0, 0, 0.10);
    /* Stronger shadow (10% opacity) */

    /* === INTERACTION STATES === */
    --color-hover: rgba(0, 0, 0, 0.03);
    /* Light black overlay for hover */
    --color-pressed: rgba(0, 0, 0, 0.07);
    /* Medium black overlay for pressed */
    --color-focus: rgba(0, 0, 0, 0.12);
    /* Focus ring color */
    --color-selected: rgba(0, 0, 0, 0.04);
    /* Selection background */
    --color-disabled: #F9FAFB;
    /* Disabled background */
    --color-disabled-text: #D1D5DB;
    /* Disabled text color */

    /* === OVERLAY SYSTEM === */
    --overlay-light: rgba(0, 0, 0, 0.25);
    /* Light modal overlay (25% opacity) */
    --overlay-medium: rgba(0, 0, 0, 0.40);
    /* Medium modal overlay (40% opacity) */
    --overlay-dark: rgba(0, 0, 0, 0.50);
    /* Dark modal overlay (50% opacity) */
    --overlay-heavy: rgba(0, 0, 0, 0.70);
    /* Heavy overlay for critical modals */

    /* === TYPOGRAPHY === */
    --font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --font-size-heading-1: 32px;
    --font-size-heading-2: 18px;
    --font-size-heading-3: 20px;
    --font-size-heading-4: 18px;
    --font-size-heading-5: 16px;

    --font-size-body: 16px;
    --font-size-body-large: 18px;
    --font-size-body-medium: 14px;
    --font-size-body-small: 12px;

    --font-size-button: 14px;
    --font-size-caption: 12px;
    --font-size-overline: 10px;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-heading-1: 1.25;
    --line-height-heading-2: 1.33;
    --line-height-heading-3: 1.4;
    --line-height-heading-4: 1.44;
    --line-height-heading-5: 1.5;

    --line-height-body: 1.5;
    --line-height-body-large: 1.44;
    --line-height-body-medium: 1.43;
    --line-height-body-small: 1.33;

    /* === SPACING === */
    /* Base spacing unit: 8px */
    --spacing-base: 8px;

    --spacing-xs: 4px;
    /* 0.5 * base */
    --spacing-sm: 8px;
    /* 1 * base */
    --spacing-md: 16px;
    /* 2 * base */
    --spacing-lg: 24px;
    /* 3 * base */
    --spacing-xl: 32px;
    /* 4 * base */
    --spacing-xxl: 40px;
    /* 5 * base */
    --spacing-2xl: 48px;
    /* 6 * base */
    --spacing-3xl: 64px;
    /* 8 * base */
    --spacing-4xl: 96px;
    /* 12 * base */

    /* Component-specific spacing */
    --spacing-mobile-padding: 16px;
    --spacing-screen-padding: 20px;
    --spacing-card-padding: 16px;
    --spacing-button-padding: 16px;
    --spacing-section-spacing: 24px;

    /* Touch target spacing */
    --spacing-touch-target: 48px;
    --spacing-touch-padding: 12px;

    /* === BORDER RADIUS === */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Component-specific radius */
    --radius-card: 16px;
    --radius-button: 32px;
    /* Very rounded for CI */
    --radius-input: 12px;
    --radius-dialog: 20px;
    --radius-glass-surface: 24px;
    /* For glassmorphism */

    /* === BUTTON DIMENSIONS === */
    --button-height: 48px;
    /* Standard button height */
    --button-height-small: 40px;
    /* Compact button height */
    --button-height-large: 56px;
    /* Large button height */

    /* === LIQUID GLASS BLUR VALUES === */
    --blur-ultra-thin: 10px;
    /* Menu bars, subtle overlays */
    --blur-thin: 20px;
    /* Navigation bars, tab bars */
    --blur-regular: 30px;
    /* Standard modals, sheets */
    --blur-thick: 40px;
    /* Heavy overlays, critical dialogs */
    --blur-ultra-thick: 50px;
    /* Maximum frosted effect */

    /* === BREAKPOINTS === */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;

    /* === Z-INDEX SCALE === */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-cookie: 9999;    /* Cookie banner - always on top */
}

/* ===================================================================
   BASE STYLES
   =================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    min-height: 100vh;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* ===================================================================
   TYPOGRAPHY CLASSES
   =================================================================== */

.heading-1 {
    font-size: var(--font-size-heading-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading-1);
    color: var(--color-text-primary);
}

.heading-2 {
    font-size: var(--font-size-heading-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading-2);
    color: var(--color-text-primary);
}

.heading-3 {
    font-size: var(--font-size-heading-3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading-3);
    color: var(--color-text-primary);
}

.heading-4 {
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading-4);
    color: var(--color-text-primary);
}

.heading-5 {
    font-size: var(--font-size-heading-5);
    font-weight: var(--font-weight-semibold);
    Line-height: var(--line-height-heading-5);
    color: var(--color-text-primary);
}

.body {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
}

.body-large {
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-large);
    color: var(--color-text-primary);
}

.body-medium {
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-medium);
    color: var(--color-text-primary);
}

.body-small {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-small);
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-muted {
    color: var(--color-text-muted);
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
}

/* Layout */
.section {
    padding: var(--spacing-xxl) 0;
}

@media (min-width: 768px) {
    .section {
        padding: 64px 0;
    }
}

/* Flex utilities */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-between {
    justify-content: space-between;
}

.flex-gap-sm {
    gap: var(--spacing-sm);
}

.flex-gap-md {
    gap: var(--spacing-md);
}

.flex-gap-lg {
    gap: var(--spacing-lg);
}

/* Grid utilities */
.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Spacing utilities */
.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

/* Visibility utilities */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Text alignment */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ===================================================================
   ICON SYSTEM (Lucide Icons)
   Professional B2B Icon Framework aligned with BEEP! CI
   =================================================================== */

/* Base Icon Styles */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    /* Inherits parent text color */
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
    flex-shrink: 0;
    /* Prevents icon distortion in flex containers */
}

/* Icon Size Variants */
.icon-xs {
    width: 12px;
    height: 12px;
    stroke-width: 2.5px;
    /* Slightly thicker for visibility at small sizes */
}

.icon-sm {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
}

.icon-md {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}

.icon-lg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5px;
    /* Thinner for larger icons */
}

.icon-xl {
    width: 48px;
    height: 48px;
    stroke-width: 1.5px;
}

.icon-xxl {
    width: 64px;
    height: 64px;
    stroke-width: 1px;
    /* Very thin for extra-large feature icons */
}

/* Icon Color Variants (CI-Aligned) */
.icon-primary {
    stroke: var(--color-primary);
    /* Black */
}

.icon-secondary {
    stroke: var(--color-text-secondary);
    /* Dark gray */
}

.icon-tertiary {
    stroke: var(--color-text-tertiary);
    /* Medium gray */
}

.icon-muted {
    stroke: var(--color-text-muted);
    /* Light gray */
}

.icon-white {
    stroke: #FFFFFF;
    /* For dark backgrounds */
}

/* Semantic Color Icons */
.icon-success {
    stroke: var(--color-success);
    /* Green for positive actions */
}

.icon-error {
    stroke: var(--color-error);
    /* Red for warnings */
}

.icon-warning {
    stroke: var(--color-warning);
    /* Amber for attention */
}

.icon-info {
    stroke: var(--color-info);
    /* Blue for information */
}

/* Brand Accent Icons (Conversion-Optimized) */
.icon-accent {
    stroke: var(--color-accent-pink);
    /* Pink accent for marketing/engagement */
}

/* Icon Animation Utilities */
.icon-animated {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-animated:hover {
    transform: scale(1.1);
}

/* Pulse Animation for CTAs (conversion optimization) */
@keyframes icon-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

/* Spin Animation for Loading States */
@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-spin {
    animation: icon-spin 1s linear infinite;
}

/* Icon in Button Context */
.button .icon,
.button-primary .icon,
.button-secondary .icon {
    margin-right: 8px;
}

.button .icon:last-child {
    margin-right: 0;
    margin-left: 8px;
}

/* Icon-Only Buttons */
.button-icon {
    padding: 0;
    width: var(--button-height);
    min-height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-icon.button-small {
    width: var(--button-height-small);
    min-height: var(--button-height-small);
}

.button-icon.button-large {
    width: var(--button-height-large);
    min-height: var(--button-height-large);
}

/* Icon in Link Context */
a .icon {
    transition: all 0.2s ease;
}

a:hover .icon {
    transform: translateX(2px);
    /* Subtle movement for directional affordance */
}

/* Icon Badge Container (for feature cards) */
.icon-badge {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.icon-badge .icon {
    width: 32px;
    height: 32px;
}

/* Icon Badge Variants */
.icon-badge-primary {
    background-color: var(--color-primary);
}

.icon-badge-primary .icon {
    stroke: var(--color-text-on-primary);
}

.icon-badge-glass {
    background-color: var(--glass-regular-surface);
    border: 1px solid var(--glass-regular-border);
    backdrop-filter: blur(var(--blur-regular));
}