/* /shared/css/main.css */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

:root {
    /* --- Core Brand Colors --- */
    --primary-color: #3b82f6;       /* Bright Blue */
    --primary-accent: #6366f1;      /* Indigo Pop */
    --secondary-color: #f97316;     /* Vibrant Orange */

    /* --- The "Pop" Palette (High Saturation) --- */
    --pop-rose: #f43f5e;
    --pop-pink: #ec4899;
    --pop-purple: #a855f7;
    --pop-indigo: #6366f1;
    --pop-blue: #3b82f6;
    --pop-cyan: #06b6d4;
    --pop-teal: #14b8a6;
    --pop-green: #22c55e;
    --pop-lime: #84cc16;
    --pop-yellow: #eab308;
    --pop-amber: #f59e0b;
    --pop-orange: #f97316;

    /* --- Backgrounds & Text --- */
    --dark-bg: #1e293b;
    --light-bg: #f8fafc;
    --text-dark: #0f172a;
    --text-light: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    /* --- Component Colors --- */
    --portal-background: #f1f5f9;   /* Crisp gray-blue white */
    --card-background: #ffffff;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    /* --- UI Properties --- */
    --border-radius: 16px;          /* Softer, modern radius */
    --nav-height: 70px;

    /* --- Shadows & Glows --- */
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --box-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);

    /* Colored Shadows (The "Glow" Effect) */
    --shadow-primary: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
    --shadow-accent: 0 10px 25px -5px rgba(99, 102, 241, 0.4);
    --shadow-success: 0 10px 25px -5px rgba(34, 197, 94, 0.4);
    --shadow-warning: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
    --shadow-danger: 0 10px 25px -5px rgba(239, 68, 68, 0.4);

    /* --- Gradients ("The Pop") --- */
    /* Modern, diagonal gradients with slightly more contrast */
    --gradient-primary: linear-gradient(135deg, var(--pop-blue) 0%, var(--pop-indigo) 100%);
    --gradient-accent: linear-gradient(135deg, var(--pop-indigo) 0%, var(--pop-purple) 100%);

    /* Functional Gradients */
    --gradient-event: linear-gradient(135deg, var(--pop-blue), var(--pop-cyan));
    --gradient-market: linear-gradient(135deg, var(--pop-teal), var(--pop-green));
    --gradient-wallet: linear-gradient(135deg, var(--pop-amber), var(--pop-yellow));
    --gradient-community: linear-gradient(135deg, var(--pop-purple), var(--pop-pink));
    --gradient-dining: linear-gradient(135deg, var(--pop-rose), var(--pop-orange));
    --gradient-maint: linear-gradient(135deg, var(--pop-fuchsia), var(--pop-purple)); /* Fixed var name */
    --gradient-transport: linear-gradient(135deg, var(--pop-yellow), var(--pop-lime));
    --gradient-cleaning: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));

    /* Special "Mesh" Gradient for backgrounds */
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
                     radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
                     radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
                     radial-gradient(at 0% 100%, rgba(245, 158, 11, 0.15) 0px, transparent 50%);
}

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

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Rubik', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--portal-background);
    color: var(--text-primary);
}

/* Default text alignment */
body, html, h1, h2, h3, h4, h5, h6, p, span, div, input, select, button, textarea, label, a, li {
    text-align: start;
}

[dir="rtl"] {
    font-family: 'Rubik', sans-serif;
}

/* Preload Fix */
body.preload * {
    transition: none !important;
}