@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-title: 'Montserrat ExtraBold', sans-serif;
    --font-sub-title: 'Poppins', cursive;
    --font-text: 'Roboto', sans-serif;

    --font-body: var(--font-text);
    --font-heading: var(--font-title);
    --font-accent: var(--font-sub-title);

    --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-weight: 900 !important; /* Montserrat Black for all headings */
    }

    .font-accent {
        font-family: var(--font-accent);
    }
}
:root {
    /* Brand variables */
    --c-black: #000000;
    --c-green: #9ace8a;
    --c-purple: #7d5ba6; /* softer purple primary */
    --c-gold: #f0ba2d;
    --c-white: #ffffff;
    /* Additional accent stops for hero gradient */
    --c-magenta: #d94f93;
    --c-red: #e54b4d;
    --c-orange: #f28c2a;
    --c-blue: #2cc5e5;

    /* Light (default) theme — softer, not too bright */
    --background: #f5effa;
    --foreground: #1f1630;

    --card: #ffffff;
    --card-foreground: #1f1630;

    --popover: #ffffff;
    --popover-foreground: #1f1630;

    --primary: var(--c-purple);
    --primary-foreground: var(--c-white);

    --secondary: #ede7f5;
    --secondary-foreground: #1f1630;

    --muted: #eee7f7;
    --muted-foreground: #5b4b72;

    --accent: #b89bd6;
    --accent-foreground: #1f1630;

    --destructive: #ef4444;
    --destructive-foreground: var(--c-white);

    --border: #e2d7f2;
    --input: #ded1ef;
    --ring: var(--c-purple);

    --chart-1: var(--c-purple);
    --chart-2: #b89bd6;
    --chart-3: var(--c-green);
    --chart-4: #7a6b91;
    --chart-5: #523f6a;

    --radius: 0.5rem;

    /* Sidebar */
    --sidebar-background: #faf7ff;
    --sidebar-foreground: #1f1630;
    --sidebar-primary: var(--c-purple);
    --sidebar-primary-foreground: var(--c-white);
    --sidebar-accent: #b89bd6;
    --sidebar-accent-foreground: #1f1630;
    --sidebar-border: #e2d7f2;
    --sidebar-ring: var(--c-purple);
}

/* Dim dark mode overrides */
.dark {
    --background: #221a2b;
    --foreground: #ece6f4;

    --card: #2b2136;
    --card-foreground: #f1ecf7;

    --popover: #2b2136;
    --popover-foreground: #f1ecf7;

    --primary: var(--c-purple);
    --primary-foreground: var(--c-white);

    --secondary: #2e2439;
    --secondary-foreground: #eae4f3;

    --muted: #3a2d49;
    --muted-foreground: #c8bfe0;

    --accent: #b89bd6;
    --accent-foreground: #1f1630;

    --destructive: #ff7676;
    --destructive-foreground: var(--c-white);

    --border: #4c3a60;
    --input: #4c3a60;
    --ring: #9c7ca5;

    --chart-1: var(--c-purple);
    --chart-2: #b89bd6;
    --chart-3: var(--c-green);
    --chart-4: #7a6b91;
    --chart-5: #523f6a;

    --sidebar-background: #2b2136;
    --sidebar-foreground: #f1ecf7;
    --sidebar-primary: var(--c-purple);
    --sidebar-primary-foreground: var(--c-white);
    --sidebar-accent: #b89bd6;
    --sidebar-accent-foreground: #1f1630;
    --sidebar-border: #4c3a60;
    --sidebar-ring: #9c7ca5;
}

/* Legacy aliases so existing components using old variables keep working */
:root {
    --midnight-blue: var(--c-white); /* legacy text color now maps to white for dark theme */
    --subtle-gold: var(--c-gold);
    --linen: #d3d1cd;
    --pure-white: var(--c-white);
    --light-ivory: #f8f6f1;
    --spiritual-earth: #a06d52;
}

@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;
    }

    .font-title {
        font-family: var(--font-title), sans-serif;
    }

    .font-sub-title {
        font-family: var(--font-sub-title), cursive;
    }

    .font-text {
        font-family: var(--font-text), sans-serif;
    }

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

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

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

    /* Gentle hero overlay and background image helper */
    .bg-hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)), var(--hero-image, url('/images/hero.jpg'));
        background-size: cover;
        background-position: center;
    }

    /* Softer lilac gradient for headings */
    .text-accent-gradient {
        background: linear-gradient(45deg, #b89bd6, #7d5ba6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }
}

@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 ExtraBold';
    src: url('@/fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

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