SalonRo/src/styles/globals.css

@import "tailwindcss";

*,
*::before,
*::after,
*::-webkit-scrollbar {
    box-sizing: border-box;
    direction: rtl;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

@layer utilities {
    .bg-gradient-center-to-left {
        background: linear-gradient(to left, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
    }
}
/* disable pull to refresh */
html,
body {
    overscroll-behavior: none;
}

body {
    margin: 0;
    font-family: "Ravi", sans-serif;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
    background-color: #fff;
    color: #333;
}

* {
    font-family: "Ravi", sans-serif;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

body,
main,
div,
section,
header,
footer,
button,
input {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

button {
    cursor: pointer;
}

.container {
    width: 100%;
    @media (width >= 40rem /* 640px */) {
        max-width: 95%;
    }
    @media (width >= 48rem /* 768px */) {
        max-width: 95%;
    }
    @media (width >= 64rem /* 1024px */) {
        max-width: 95%;
    }
    @media (width >= 80rem /* 1280px */) {
        max-width: 95%;
    }
    @media (width >= 96rem /* 1536px */) {
        max-width: 90%;
    }
}

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
}
.maplibregl-popup-content {
    width: 0px !important;
    height: 0px !important;
    background-color: transparent !important;
    position: relative !important;
}

.maplibregl-popup-tip {
    display: none !important;
}
body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: "Ravi", sans-serif;
}

:root {
    --color-map-bg: var(--color-surface);
    --color-pwa-primary: var(--color-primary-100);
    --color-pwa-text: var(--color-text-primary);
    --color-navbar-dot: var(--color-gray-400);
}

@theme {
    /* =====================
       Primary (Purple)
    ====================== */
    --color-primary-100: #7d34b9;
    --color-primary-200: #9a5cff;
    --color-primary-300: #b38bff;
    --color-primary-400: #d1c2ff;
    --color-primary-500: #ede9ff;

    /* =====================
       Background & Surface
    ====================== */
    --color-bg: #ffffff;
    --color-surface: #f8f9fb;
    --color-card: #ffffff;
    --color-border: #e5e7eb;

    /* =====================
       Text
    ====================== */
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;

    /* =====================
       State colors
    ====================== */
    --color-success: #22c55e;
    --color-warning: #facc15;
    --color-error: #ef4444;
    --color-info: #0ea5e9;

    /* =====================
       Gray scale
    ====================== */
    --color-gray-50: #fcfcfc;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #f0f0f0;
    --color-gray-300: #d9d9d9;
    --color-gray-400: #bfbfbf;
    --color-gray-500: #8c8c8c;
    --color-gray-600: #595959;
    --color-gray-700: #454545;
    --color-gray-800: #262626;
    --color-gray-900: #1f1f1f;
}

[data-theme="dark"] {
    --color-bg: #121212;
    --color-surface: #181818;
    --color-card: #1f1f1f;
    --color-border: #2a2a2a;

    --color-text-primary: #ffffff;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;

    --color-primary-100: #b38bff;
    --color-primary-200: #9a5cff;
    --color-primary-300: #7d34b9;

    --color-gray-50: #1f1f1f;
    --color-gray-100: #262626;
    --color-gray-200: #2a2a2a;
    --color-gray-300: #404040;
    --color-gray-400: #525252;
    --color-gray-500: #737373;
    --color-gray-600: #a3a3a3;
    --color-gray-700: #d4d4d4;
    --color-gray-800: #e5e5e5;
    --color-gray-900: #fafafa;
}