@import 'tailwindcss';

@import 'tw-animate-css';

@import './themes.css';
@import './styles.css';

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

@custom-variant dark (&:where(.dark, .dark *, [data-mode='dark'], [data-mode='dark'] *));

/* ==================================================================== */
/* Tailwind bridge. Everything resolves through CSS variables so the    */
/* document and every scoped preview re-theme without a rebuild.        */
/* ==================================================================== */
@theme inline {
    --font-sans: var(--ui-font-sans);
    --font-display: var(--ui-font-display);
    --font-mono:
        ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'JetBrains Mono',
        Menlo, Consolas, monospace;

    --text-sm: var(--ui-text-sm);
    --text-sm--line-height: var(--ui-text-sm-lh);

    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-foreground-secondary: var(--foreground-secondary);

    --color-surface: var(--surface);
    --color-surface-secondary: var(--surface-secondary);
    --color-surface-tertiary: var(--surface-tertiary);

    --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-hover: var(--primary-hover);
    --color-primary-active: var(--primary-active);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary-subtle: var(--primary-subtle);

    --color-secondary: var(--secondary);
    --color-secondary-hover: var(--secondary-hover);
    --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-border: var(--border);
    --color-border-strong: var(--border-strong);
    --color-input: var(--input);
    --color-input-focus: var(--input-focus);
    --color-ring: var(--ring);

    --color-success: var(--success);
    --color-success-background: var(--success-background);
    --color-warning: var(--warning);
    --color-warning-background: var(--warning-background);
    --color-danger: var(--danger);
    --color-danger-background: var(--danger-background);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-info: var(--info);
    --color-info-background: var(--info-background);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-muted: var(--sidebar-muted);
    --color-sidebar-hover: var(--sidebar-hover);
    --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-icon: var(--sidebar-icon);
    --color-sidebar-icon-active: var(--sidebar-icon-active);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    --color-overlay: var(--overlay);

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

    --radius-xs: var(--ui-radius-xs);
    --radius-sm: var(--ui-radius-sm);
    --radius-md: var(--ui-radius-md);
    --radius-lg: var(--ui-radius-lg);
    --radius-xl: var(--ui-radius-xl);
    --radius-2xl: var(--ui-radius-2xl);
    --radius-control: var(--ui-radius-control);
    --radius-item: var(--ui-radius-item);
    --radius-menu: var(--ui-radius-menu);
    --radius-card: var(--ui-radius-card);
    --radius-dialog: var(--ui-radius-dialog);
    --radius-badge: var(--ui-radius-badge);

    --shadow-xs: var(--ui-control-shadow);
    --shadow-sm: var(--ui-card-shadow);
    --shadow-md: var(--ui-popover-shadow);
    --shadow-lg: var(--ui-popover-shadow);
    --shadow-xl: var(--ui-dialog-shadow);
    --shadow-control: var(--ui-control-shadow);
    --shadow-card: var(--ui-card-shadow);
    --shadow-popover: var(--ui-popover-shadow);
    --shadow-dialog: var(--ui-dialog-shadow);

    --ease-ui: var(--ui-ease);

    --animate-caret-blink: caret-blink 1.1s ease-out infinite;

    @keyframes caret-blink {
        0%,
        70%,
        100% {
            opacity: 1;
        }

        20%,
        50% {
            opacity: 0;
        }
    }
}

/* ==================================================================== */
/* Type roles. Components pick a role, the active style picks the face. */
/* ==================================================================== */
/* Named `type-*`, not `text-*`, so tailwind-merge never mistakes them for
   text colors and drops them. */
@utility type-title {
    font-family: var(--ui-font-display);
    font-size: var(--ui-title-size);
    line-height: var(--ui-title-lh);
    font-weight: var(--ui-title-weight);
    letter-spacing: var(--ui-title-tracking);
    text-wrap: balance;
}

@utility font-heading {
    font-family: var(--ui-font-display);
    letter-spacing: var(--ui-heading-tracking);
}

@utility type-figure {
    font-family: var(--ui-font-display);
    font-weight: var(--ui-figure-weight);
    letter-spacing: var(--ui-figure-tracking);
    font-variant-numeric: tabular-nums lining-nums;
}

@utility type-overline {
    font-size: var(--ui-overline-size);
    line-height: 1rem;
    font-weight: var(--ui-overline-weight);
    letter-spacing: var(--ui-overline-tracking);
    text-transform: var(--ui-overline-transform);
    font-variant-caps: var(--ui-overline-caps);

    /* Preflight resets text-transform on buttons (sortable headers). */
    & :where(button) {
        text-transform: inherit;
    }
}

/* ==================================================================== */
/* Surface roles for markup that cannot use the primitives directly     */
/* (native controls, hand-built panels). They mirror Card, Popover and  */
/* Input so every style treats them identically.                        */
/* ==================================================================== */
@utility panel {
    border-radius: var(--ui-radius-card);
    border: 1px solid var(--ui-card-border);
    background-color: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--ui-card-shadow);
}

@utility floating {
    border-radius: var(--ui-radius-menu);
    border: 1px solid var(--ui-popover-border);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--ui-popover-shadow);
}

@utility field {
    height: var(--ui-control-h);
    min-width: 0;
    border-radius: var(--ui-radius-control);
    border: 1px solid var(--ui-input-border);
    background-color: var(--ui-input-bg);
    padding-inline: 0.75rem;
    font-size: var(--ui-text-sm);
    line-height: var(--ui-text-sm-lh);
    color: var(--foreground);
    box-shadow: var(--ui-input-shadow);
    outline: none;
    transition:
        border-color 150ms var(--ui-ease),
        box-shadow 150ms var(--ui-ease);

    &::placeholder {
        color: var(--muted-foreground);
    }

    &:hover {
        border-color: color-mix(in oklab, var(--foreground) 25%, transparent);
    }

    &:focus-visible {
        border-color: var(--ring);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent);
    }

    &[aria-invalid='true'] {
        border-color: var(--danger);
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }
}

/* ==================================================================== */
/* Base                                                                 */
/* ==================================================================== */
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-border);
    }

    * {
        @apply outline-ring/50;
        scrollbar-width: thin;
    }

    /* The root paints the canvas so overscroll and short pages never show
       a different color, and Glass's ambient field covers the viewport. */
    html {
        background-color: var(--background);
        background-image: var(--ui-canvas-image);
        background-attachment: fixed;
        font-feature-settings: var(--ui-font-features);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        scrollbar-color: color-mix(in oklab, var(--foreground) 20%, transparent)
            transparent;
    }

    body {
        @apply font-sans text-sm text-foreground;
    }

    ::selection {
        background-color: color-mix(in oklab, var(--primary) 24%, transparent);
        color: inherit;
    }

    input,
    textarea,
    [contenteditable] {
        caret-color: var(--primary);
    }

    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }

    :where(a) {
        text-underline-offset: 0.2em;
        text-decoration-thickness: from-font;
    }

    :where(code, kbd, samp) {
        font-family: var(--font-mono);
        font-size: 0.92em;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        ::before,
        ::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ==================================================================== */
/* Signal — the product's status language. A steady dot for settled     */
/* states, a slow ring for anything still in flight.                    */
/* ==================================================================== */
@keyframes signal-ring {
    0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);
    }
}

@utility signal-live {
    animation: signal-ring 1.8s var(--ui-ease) infinite;
}

/* Theme switches cross-fade through the View Transitions API. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--ui-ease);
}

/* ==================================================================== */
/* Marketing landing (Welcome) — scroll reveal + hero motion only.      */
/* ==================================================================== */
@keyframes landing-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

.landing-reveal {
    transition:
        opacity 220ms var(--ui-ease),
        transform 220ms var(--ui-ease);
}

.landing-reveal[data-revealed='false'] {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
}

.landing-reveal[data-revealed='true'] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.landing-page {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .landing-page {
        scroll-behavior: auto;
    }

    .landing-reveal {
        transition: none;
    }
}