/* CSS Variables - Light Theme */
:root {
    /* Base font size: fluid scaling based on viewport width */
    font-size: clamp(14px, 0.8rem + 0.25vw, 18px);

    --header-scale: 0.9;
    /* 10% reduction factor */

    --primary: #10b981;
    --primary-dark: #059669;
    --primary-light: #34d399;
    --secondary: #94a3b8;
    --accent: #10b981;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --background: #f8fafc;
    --surface: #ffffff;
    --muted-surface: #f1f5f9;
    --text: #1e293b;
    --muted: #475569;
    --card-bg: #ffffff;
    --accent-hover: #059669;
    --disabled-color: #cbd5e1;
    --secondary-text: #475569;
    --verde-green: #10b981;

    /* Grays for light theme */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Shadows - scaled by 0.8 */
    --shadow: 0 1.6px 3.2px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 0.8px 1.6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 3.2px 6.4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 6.4px 12.8px rgba(0, 0, 0, 0.2);

    /* Listings tokens - scaled by 0.8 */
    --listing-row-height: 100px;
    --listing-gap: 11.2px;
    --listing-image-w: 128px;
    --listing-image-h: 100px;
    --listing-sidebar-w: 112px;
    /* Tablet */
    --listing-image-w-md: 112px;
    --listing-image-h-md: 76px;
    --listing-sidebar-w-md: 96px;
    /* Mobile */
    --listing-image-w-sm: 96px;
    --listing-image-h-sm: 68px;
    --listing-sidebar-w-sm: auto;
}