/**
 * ProfiRadar Modern Minimalistic Design System
 *
 * This file defines the foundational CSS variables for the entire theme.
 * All spacing, colors, typography, shadows, and transitions should reference these variables.
 */

:root {
    /* ===== SPACING SCALE (8px base) ===== */
    /* Use these for padding, margin, and gaps */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;

    /* ===== BORDER RADIUS ===== */
    /* Minimal, consistent rounded corners */
    --radius-none: 0;
    --radius-sm: 4px;      /* For inputs, small UI elements */
    --radius-md: 8px;      /* For cards, buttons - most common */
    --radius-lg: 12px;     /* For large containers (use sparingly) */
    --radius-full: 9999px; /* For pills, circles, tags */

    /* ===== SHADOWS ===== */
    /* Only 2 levels - subtle and lifted */
    --shadow-none: none;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* ===== BORDERS ===== */
    /* Light, subtle borders for minimal design */
    --border-color-light: #e8e8e8;
    --border-color-default: #d0d0d0;
    --border-color-dark: #b0b0b0;
    --border-width: 1px;

    /* ===== NEUTRAL COLORS ===== */
    /* Gray scale for backgrounds, text, and borders */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-300: #d0d0d0;
    --gray-400: #b0b0b0;
    --gray-500: #909090;
    --gray-600: #707070;
    --gray-700: #505050;
    --gray-800: #303030;
    --gray-900: #1a1a1a;

    /* ===== SEMANTIC COLORS ===== */
    /* For status, feedback, and notifications */
    --color-success: #27ae60;
    --color-error: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #2196f3;

    /* Success/Error with transparency */
    --color-success-light: rgba(39, 174, 96, 0.1);
    --color-error-light: rgba(231, 76, 60, 0.1);
    --color-warning-light: rgba(243, 156, 18, 0.1);
    --color-info-light: rgba(33, 150, 243, 0.1);

    /* ===== TYPOGRAPHY ===== */
    /* Font sizes - modular scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;

    /* Line heights */
    --line-height-tight: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.7;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Letter spacing */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;

    /* ===== TRANSITIONS ===== */
    /* Fast, simple transitions for modern feel */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;

    /* ===== Z-INDEX SCALE ===== */
    /* Consistent layering */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;

    /* ===== BREAKPOINTS (for reference in media queries) ===== */
    /* Not used directly but documented here */
    /* --breakpoint-sm: 480px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 1024px; */
    /* --breakpoint-xl: 1200px; */

    /* ===== ACCENT COLOR ===== */
    /* Provided by parent theme - use sparingly for CTAs only */
    /* var(--accent) is already available from parent theme */
    /* Use it primarily for: */
    /* - Primary action buttons */
    /* - Links in content */
    /* - Active/selected states */
    /* - Key interactive elements */
}

/**
 * BASE ELEMENT RESETS FOR MINIMAL DESIGN
 * Apply minimalistic styling to common elements
 */

/* Ensure consistent box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default focus outline, add accessible custom one */
:focus-visible {
    outline: 2px solid var(--accent, #0073aa);
    outline-offset: 2px;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Improve text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * UTILITY CLASSES
 * Reusable classes for common patterns
 */

/* Spacing utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Shadow utilities */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

/* Border utilities */
.border { border: var(--border-width) solid var(--border-color-default); }
.border-light { border: var(--border-width) solid var(--border-color-light); }
.border-dark { border: var(--border-width) solid var(--border-color-dark); }

/* Border radius utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Text utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Color utilities */
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-900 { color: var(--gray-900); }

.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }

/**
 * FEATURED/PROMOTED LISTING BADGES
 * Badges to indicate listings with elevated visibility
 */
.listing-featured-badge,
.listing-promoted-badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: 6px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: white;
    border-radius: var(--radius-full);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-sm);
}

.listing-featured-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.listing-promoted-badge {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/**
 * DESIGN SYSTEM DOCUMENTATION
 *
 * SPACING PHILOSOPHY:
 * - Use the 8px scale consistently
 * - Prefer larger spacing for breathing room
 * - Start with --space-lg (32px) for card padding
 * - Use --space-md (24px) for sections
 * - Use --space-sm (16px) for form fields
 *
 * SHADOW PHILOSOPHY:
 * - Default: no shadow (flat design)
 * - Cards at rest: --shadow-sm
 * - Cards on hover: --shadow-md (optional)
 * - Never use shadows > --shadow-md
 *
 * BORDER PHILOSOPHY:
 * - Prefer subtle borders over shadows
 * - Use --border-color-light for most borders
 * - Use 1px borders exclusively
 *
 * COLOR PHILOSOPHY:
 * - Default to neutrals (white, grays)
 * - Use var(--accent) only for primary CTAs
 * - Text: use --gray-700 for body, --gray-900 for headings
 * - Backgrounds: white or --gray-50
 *
 * TYPOGRAPHY PHILOSOPHY:
 * - Increase from current sizes for readability
 * - Use --line-height-normal (1.6) for body text
 * - Reduce font-weight variations (400, 600, 700 max)
 *
 * TRANSITION PHILOSOPHY:
 * - Use --transition-fast (0.15s) for most interactions
 * - Keep it simple: opacity, color, border changes only
 * - Avoid transforms (translateY, scale, etc.)
 */