/* resources/css/app.css */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    /* الخطوط */
    /* --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji'; */
  --font-sans: "IBM Plex Sans Arabic", sans-serif; /* خط للعناوين */
          /* --font-sans: 'Inter', 'Cairo', sans-serif; خط للنصوص */
    /* الأنصاف (Border Radius) */
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* الألوان الأساسية من shadcn/ui */
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    /* ========== ألوان استديو سكوب المخصصة ========== */
    /* اللون الذهبي الرئيسي (محدث) */
    --color-studio-gold: var(--studio-gold);
    --color-studio-gold-dark: var(--studio-gold-dark);
    --color-studio-gold-light: var(--studio-gold-light);

    /* باقي ألوان الاستديو */
    --color-studio-dark: var(--studio-dark);
    --color-studio-floor: var(--studio-floor);
    --color-studio-blue: var(--studio-blue);
    --color-studio-text: var(--studio-text);

    /* تدرجات الذهبي حسب اللون #cca33e */
    --color-gold-50: var(--gold-50);
    --color-gold-100: var(--gold-100);
    --color-gold-200: var(--gold-200);
    --color-gold-300: var(--gold-300);
    --color-gold-400: var(--gold-400);
    --color-gold-500: var(--gold-500);
    --color-gold-600: var(--gold-600);
    --color-gold-700: var(--gold-700);
    --color-gold-800: var(--gold-800);
    --color-gold-900: var(--gold-900);

    /* تدرجات الأزرق */
    --color-blue-50: var(--blue-50);
    --color-blue-100: var(--blue-100);
    --color-blue-200: var(--blue-200);
    --color-blue-300: var(--blue-300);
    --color-blue-400: var(--blue-400);
    --color-blue-500: var(--blue-500);
    --color-blue-600: var(--blue-600);
    --color-blue-700: var(--blue-700);
    --color-blue-800: var(--blue-800);
    --color-blue-900: var(--blue-900);

    /* تدرجات الرمادي للاستديو */
    --color-gray-dark-100: var(--gray-dark-100);
    --color-gray-dark-200: var(--gray-dark-200);
    --color-gray-dark-300: var(--gray-dark-300);
    --color-gray-dark-400: var(--gray-dark-400);
    --color-gray-dark-500: var(--gray-dark-500);
    --color-gray-dark-600: var(--gray-dark-600);
    --color-gray-dark-700: var(--gray-dark-700);
    --color-gray-dark-800: var(--gray-dark-800);
    --color-gray-dark-900: var(--gray-dark-900);
}

:root {
    /* ألوان shadcn/ui الأساسية (معدلة للاستديو) */
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);

    /* اللون الأساسي أصبح الذهبي الجديد #cca33e */
    --primary: oklch(0.72 0.13 85.5); /* #cca33e */
    --primary-foreground: oklch(0 0 0);

    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.708 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);

    /* اللون الثانوي (أزرق) */
    --accent: oklch(0.6 0.2 250);
    --accent-foreground: oklch(0.985 0 0);

    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);

    /* الحدود بالذهب الجديد */
    --border: oklch(0.72 0.13 85.5 / 0.15);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.72 0.13 85.5);

    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.75rem;

    /* Sidebar بالذهب الجديد */
    --sidebar: oklch(0.145 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.72 0.13 85.5);
    --sidebar-primary-foreground: oklch(0 0 0);
    --sidebar-accent: oklch(0.205 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.72 0.13 85.5);

    /* ========== ألوان استديو سكوب ========== */
    /* اللون الذهبي الرئيسي #cca33e */
    --studio-gold: oklch(0.72 0.13 85.5);
    --studio-gold-dark: oklch(0.62 0.11 85.5);
    --studio-gold-light: oklch(0.82 0.10 85.5);

    /* باقي الألوان */
    --studio-dark: oklch(0.13 0 0);
    --studio-floor: oklch(0.18 0 0);
    --studio-blue: oklch(0.6 0.2 250);
    --studio-text: oklch(0.708 0 0);

    /* تدرجات الذهبي بناءً على #cca33e */
    --gold-50: oklch(0.92 0.05 85.5);
    --gold-100: oklch(0.87 0.07 85.5);
    --gold-200: oklch(0.82 0.09 85.5);
    --gold-300: oklch(0.77 0.11 85.5);
    --gold-400: oklch(0.74 0.12 85.5);
    --gold-500: oklch(0.72 0.13 85.5); /* #cca33e */
    --gold-600: oklch(0.62 0.11 85.5);
    --gold-700: oklch(0.52 0.09 85.5);
    --gold-800: oklch(0.42 0.07 85.5);
    --gold-900: oklch(0.32 0.05 85.5);

    /* تدرجات الأزرق */
    --blue-50: oklch(0.85 0.12 250);
    --blue-100: oklch(0.8 0.14 250);
    --blue-200: oklch(0.75 0.16 250);
    --blue-300: oklch(0.7 0.18 250);
    --blue-400: oklch(0.65 0.19 250);
    --blue-500: oklch(0.6 0.2 250);
    --blue-600: oklch(0.5 0.17 250);
    --blue-700: oklch(0.4 0.14 250);
    --blue-800: oklch(0.3 0.11 250);
    --blue-900: oklch(0.2 0.08 250);

    /* تدرجات الرمادي الداكن */
    --gray-dark-100: oklch(0.25 0 0);
    --gray-dark-200: oklch(0.22 0 0);
    --gray-dark-300: oklch(0.19 0 0);
    --gray-dark-400: oklch(0.16 0 0);
    --gray-dark-500: oklch(0.13 0 0);
    --gray-dark-600: oklch(0.1 0 0);
    --gray-dark-700: oklch(0.08 0 0);
    --gray-dark-800: oklch(0.05 0 0);
    --gray-dark-900: oklch(0.02 0 0);

     --color-bg-primary: oklch(0.13 0 0);   /* #121212 */
    --color-bg-secondary: oklch(0.21 0 0); /* #1E1E1E */
    --color-text-primary: oklch(1 0 0);    /* #FFFFFF */
    --color-text-secondary: oklch(0.71 0 0); /* #A3A3A3 */

    /* لون العلامة التجارية (ذهبي) */
    --color-brand-gold: oklch(0.75 0.14 85.3); /* #D4AF37 */

    /* ألوان الوظائف والحالات */
    --color-accent-blue: oklch(0.62 0.21 259.4); /* #3B82F6 */
    --color-overlay-dark: oklch(0 0 0 / 0.8);

      --color-bg-primary: var(--color-bg-primary);
    --color-bg-secondary: var(--color-bg-secondary);
    --color-text-primary: var(--color-text-primary);
    --color-text-secondary: var(--color-text-secondary);
    --color-brand-gold: var(--color-brand-gold);
    --color-accent-blue: var(--color-accent-blue);
    --color-overlay-dark: var(--color-overlay-dark);
}

/* الوضع المظلم */
.dark {
    --studio-gold: oklch(0.68 0.12 85.5);
    --studio-blue: oklch(0.55 0.19 250);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground font-sans;
    }

    /* إضافة الخطوط العربية */
    h1, h2, h3, h4, h5, h6 {
        /* font-family: 'Playfair Display', 'Instrument Sans', serif; */
    }
}

/* ========== كلاسات مساعدة مخصصة ========== */
@layer components {
    /* تأثيرات الذهبي الجديد */
    .bg-studio-gold-gradient {
        background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
    }

    .bg-studio-blue-gradient {
        background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    }

    /* توهج بالذهب الجديد */
    .studio-gold-glow {
        box-shadow:
            0 0 30px oklch(0.72 0.13 85.5 / 0.2),
            0 0 60px oklch(0.72 0.13 85.5 / 0.05);
    }

    /* توهج أزرق */
    .studio-blue-glow {
        box-shadow:
            0 0 30px oklch(0.6 0.2 250 / 0.15),
            0 0 60px oklch(0.6 0.2 250 / 0.05);
    }

    /* border ذهبي */
    .studio-border-gold {
        border: 1px solid oklch(0.72 0.13 85.5 / 0.25);
    }

    /* overlay متدرج */
    .studio-gradient-overlay {
        background: linear-gradient(
            180deg,
            var(--studio-dark) 0%,
            oklch(0.13 0 0 / 0.4) 40%,
            oklch(0.13 0 0 / 0.6) 70%,
            var(--studio-dark) 100%
        );
    }

    /* نص ذهبي */
    .text-gold {
        color: oklch(0.72 0.13 85.5);
    }

    /* خلفية ذهبية مع شفافية */
    .bg-gold-subtle {
        background-color: oklch(0.72 0.13 85.5 / 0.1);
    }
}