@import 'tailwindcss';

/* ── Dark mode: class-based (not OS media query) ─────────────────────────── */
@custom-variant dark (&:where(.dark, .dark *));

/* ── Plugins ─────────────────────────────────────────────────────────────── */
@plugin "@tailwindcss/forms";
@plugin "tailwindcss-animate";

/* ── Content sources ─────────────────────────────────────────────────────── */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../**/*.jsx';

/* ── Design tokens ───────────────────────────────────────────────────────── */
@theme {
    /* Typography */
    --font-sans: 'DM Sans', 'Segoe UI', sans-serif;
    --font-display: 'Sora', 'Segoe UI', sans-serif;

    /* Border radius — driven by --radius runtime variable */
    --radius-sm:  calc(var(--radius) - 4px);
    --radius-md:  calc(var(--radius) - 2px);
    --radius-lg:  var(--radius);
    --radius-xl:  calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);

    /* Semantic color utilities — resolved at runtime via CSS vars */
    --color-background:           hsl(var(--background));
    --color-foreground:           hsl(var(--foreground));
    --color-card:                 hsl(var(--card));
    --color-card-foreground:      hsl(var(--card-foreground));
    --color-popover:              hsl(var(--popover));
    --color-popover-foreground:   hsl(var(--popover-foreground));
    --color-primary:              hsl(var(--primary));
    --color-primary-foreground:   hsl(var(--primary-foreground));
    --color-secondary:            hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-muted:                hsl(var(--muted));
    --color-muted-foreground:     hsl(var(--muted-foreground));
    --color-accent:               hsl(var(--accent));
    --color-accent-foreground:    hsl(var(--accent-foreground));
    --color-destructive:          hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));
    --color-border:               hsl(var(--border));
    --color-input:                hsl(var(--input));
    --color-ring:                 hsl(var(--ring));
    --color-chart-1:              hsl(var(--chart-1));
    --color-chart-2:              hsl(var(--chart-2));
    --color-chart-3:              hsl(var(--chart-3));
    --color-chart-4:              hsl(var(--chart-4));
    --color-chart-5:              hsl(var(--chart-5));

    /* Panel — dark surface used for CTAs, highlighted cards, etc.
       Adapts slightly between light and dark so it always reads as "dark panel" */
    --color-panel: hsl(var(--panel));
}

/* ── Runtime theme variables ─────────────────────────────────────────────── */
@layer base {
    :root {
        --radius: 0.625rem;

        /* Panel surface — dark in both modes, slightly lighter in light */
        --panel: 32 8% 15%;

        /* Light mode */
        --background:           34 33% 97%;
        --foreground:           32  8% 15%;
        --card:                  0  0% 100%;
        --card-foreground:       32  8% 15%;
        --popover:               0  0% 100%;
        --popover-foreground:    32  8% 15%;
        --primary:              22 89% 54%;
        --primary-foreground:    0  0% 98%;
        --secondary:            45 11% 93%;
        --secondary-foreground:  32  8% 15%;
        --muted:                45 11% 93%;
        --muted-foreground:      32  5% 40%;
        --accent:               69 77% 49%;
        --accent-foreground:     32  8% 15%;
        --destructive:           0 84% 60%;
        --destructive-foreground: 0  0% 98%;
        --border:               32  8% 82%;
        --input:                32  8% 82%;
        --ring:                 22 89% 54%;
        --chart-1:              22 89% 54%;
        --chart-2:              69 77% 49%;
        --chart-3:             197 37% 24%;
        --chart-4:              43 74% 66%;
        --chart-5:              27 87% 67%;
    }

    .dark {
        /* Panel surface — deeper in dark mode */
        --panel: 25 10% 11%;

        /* Dark mode — warm charcoal palette */
        --background:           25 10%  6%;
        --foreground:           34 20% 94%;
        --card:                 25 10%  9%;
        --card-foreground:      34 20% 94%;
        --popover:              25 10%  9%;
        --popover-foreground:   34 20% 94%;
        --primary:              22 89% 54%;
        --primary-foreground:    0  0% 98%;
        --secondary:            25  8% 14%;
        --secondary-foreground: 34 20% 94%;
        --muted:                25  8% 14%;
        --muted-foreground:     32  5% 55%;
        --accent:               69 77% 49%;
        --accent-foreground:    32  8% 15%;
        --destructive:           0 63% 31%;
        --destructive-foreground: 0  0% 98%;
        --border:               25  8% 16%;
        --input:                25  8% 16%;
        --ring:                 22 89% 54%;
        --chart-1:              22 89% 54%;
        --chart-2:              69 77% 49%;
        --chart-3:              30 80% 55%;
        --chart-4:             280 65% 60%;
        --chart-5:             340 75% 55%;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-background text-foreground antialiased;
    }
}

/* ── Component utilities ─────────────────────────────────────────────────── */
@layer components {
    .uf-display {
        font-family: var(--font-display);
        letter-spacing: -0.025em;
    }

    /* Glass morphism — light and dark aware */
    .uf-glass {
        @apply border border-white/20 bg-white/[0.07] backdrop-blur-xl
               dark:border-white/[0.07] dark:bg-white/[0.04];
    }

    .uf-glass-solid {
        @apply border border-white/80 bg-white/75 backdrop-blur-xl
               dark:border-white/[0.08] dark:bg-white/[0.05];
    }

    .uf-card {
        @apply rounded-2xl border border-white/70 bg-white/80 backdrop-blur-xl
               shadow-[0_20px_60px_-30px_rgba(45,42,41,0.25)]
               dark:border-white/[0.07] dark:bg-white/[0.04]
               dark:shadow-[0_20px_60px_-30px_rgba(0,0,0,0.5)];
    }

    .uf-chip {
        @apply inline-flex items-center rounded-full border border-border
               bg-white/90 px-4 py-2 text-xs font-semibold
               tracking-[0.08em] text-muted-foreground uppercase;
    }

    .uf-button-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl
               bg-primary px-6 py-3 text-sm font-semibold text-white
               shadow-lg shadow-primary/30 transition
               hover:brightness-95
               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50;
    }

    .uf-button-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl
               border border-border bg-white/80 px-6 py-3 text-sm
               font-semibold text-muted-foreground backdrop-blur transition
               hover:border-border hover:bg-white
               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35
               dark:border-white/10 dark:bg-white/[0.05] dark:text-white/70
               dark:hover:bg-white/10;
    }
}