KSA-ORACLE/resources/css/app.css

@import 'tailwindcss';

@import 'tw-animate-css';

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

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

@theme inline {
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Citadel Script', cursive;

    --font-sans: var(--font-body);

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --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-background);
    --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);
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        font-family: var(--font-body);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-heading);
    }

    .font-accent {
        font-family: var(--font-accent);
    }
}
:root {
    /* Palette aliases for use with Tailwind arbitrary values */
    --midnight-blue: #1f2a44;
    --spiritual-earth: #a06d52;
    --subtle-gold: #d7ba8d;
    --linen: #d3d1cd;
    --pure-white: #ffffff;
    --light-ivory: #f8f6f1;

    --background: var(--light-ivory);
    --foreground: var(--midnight-blue);

    --card: var(--pure-white);
    --card-foreground: var(--midnight-blue);

    --popover: var(--pure-white);
    --popover-foreground: var(--midnight-blue);

    --primary: var(--midnight-blue);
    --primary-foreground: var(--pure-white);

    --secondary: var(--linen);
    --secondary-foreground: var(--midnight-blue);

    --muted: var(--light-ivory);
    --muted-foreground: var(--spiritual-earth);

    --accent: var(--subtle-gold);
    --accent-foreground: var(--midnight-blue);

    --destructive: #e63946;
    --destructive-foreground: var(--pure-white);

    --border: var(--linen);
    --input: var(--linen);
    --ring: var(--subtle-gold);

    --chart-1: var(--midnight-blue);
    --chart-2: var(--spiritual-earth);
    --chart-3: var(--subtle-gold);
    --chart-4: var(--light-ivory);
    --chart-5: var(--linen);

    --radius: 0.5rem;

    /* Sidebar */
    --sidebar-background: var(--light-ivory);
    --sidebar-foreground: var(--midnight-blue);
    --sidebar-primary: var(--midnight-blue);
    --sidebar-primary-foreground: var(--pure-white);
    --sidebar-accent: var(--subtle-gold);
    --sidebar-accent-foreground: var(--midnight-blue);
    --sidebar-border: var(--linen);
    --sidebar-ring: var(--subtle-gold);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    /* Apply font-family directly to body */
    body {
        font-family: var(--font-body), sans-serif !important;
        @apply bg-background text-foreground;
    }

    html {
        font-family: var(--font-body), sans-serif;
    }
}

@layer utilities {
    .font-accent {
        font-family: var(--font-accent), cursive;
    }

    .citadel-script {
        font-family: var(--font-accent);
    }

    .bg-blur {
        backdrop-filter: blur(8px);
    }

    .text-shadow-custom {
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    }
}

@font-face {
    font-family: 'Citadel Script';
    src:
        url('@/fonts/CitadelScript/CitadelScript.woff2') format('woff2'),
        url('@/fonts/CitadelScript/CitadelScript.woff') format('woff'),
        url('@/fonts/CitadelScript/CitadelScript.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('@/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('@/fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('@/fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}