/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* 1. CSS Zero foundation - reset and variables must load first */
@import url("/assets/css-zero/reset-4a3c3684.css");
@import url("/assets/css-zero/variables-fccc0bed.css");

/* 2. Application styles */
@import url("/assets/alert-2dea3aaf.css");
@import url("/assets/base-f501eb12.css");
@import url("/assets/breadcrumb-225b4541.css");
@import url("/assets/button-41dc7284.css");
@import url("/assets/card-1080a585.css");
@import url("/assets/command-1f90e152.css");
@import url("/assets/dialog-860e1eb9.css");
@import url("/assets/flash-07c16069.css");
@import url("/assets/group-12f953da.css");
@import url("/assets/icons-91c2a5d6.css");
@import url("/assets/input-a3bc7ad3.css");
@import url("/assets/layouts-cdbe46d0.css");
@import url("/assets/menu-4eb67a56.css");
@import url("/assets/popover-6950a786.css");
@import url("/assets/prose-11b3c3a8.css");
@import url("/assets/sheet-9cf3271f.css");
@import url("/assets/sidebar_menu-91d55db5.css");
@import url("/assets/table-f8c91274.css");
@import url("/assets/color_scheme-0fedfe3e.css");
@import url("/assets/badge-f28de2e7.css");
@import url("/assets/list-6d4284ed.css");
@import url("/assets/tabs-7a807e3c.css");
@import url("/assets/trix-7d9200c7.css");
@import url("/assets/input_copyable-4e9a65e2.css");
@import url("/assets/datepicker-98ccdafd.css");
@import url("/assets/forms-b7d3eef6.css");
@import url("/assets/event_hero-d671e9f9.css");
@import url("/assets/switch-54e3b264.css");
@import url("/assets/period_filter-974c84ff.css");
@import url("/assets/settings-3dcc51b1.css");

@import url("/assets/pages/dashboard-757d1082.css");
@import url("/assets/pages/public-33871ffb.css");

/* 3. CSS Zero utilities - must load last to ensure proper cascade priority */
@import url("/assets/css-zero/utilities-093ca43f.css");

:root {
    --default-font-family: "Inter", system-ui, sans-serif;
    --container-width: 100%;

    /* Backgrounds — match demo surface stack for strong card contrast */
    --color-bg: light-dark(var(--neutral-200), oklch(0.1 0 0));
    --color-bg-elevated: light-dark(oklch(0.95 0 0), oklch(0.16 0 0));
    --color-surface: light-dark(oklch(1 0 0), oklch(0.2 0 0));

     /* Elevation surfaces (0 = lowest, 4 = highest) */
     --color-surface-0: light-dark(var(--neutral-200), oklch(0.1 0 0));
     --color-surface-1: light-dark(oklch(0.9 0 0), oklch(0.13 0 0));
     --color-surface-2: light-dark(oklch(0.95 0 0), oklch(0.16 0 0));
     --color-surface-3: light-dark(oklch(1 0 0), oklch(0.2 0 0));
     --color-surface-4: light-dark(oklch(1 0 0), oklch(0.23 0 0));

    /* Text with warm undertones */
    --color-text: light-dark(var(--neutral-900), var(--neutral-50));
    --color-text-reversed: light-dark(var(--neutral-50), var(--neutral-900));
    --color-text-subtle: light-dark(var(--neutral-500), var(--neutral-400));

    /* Links stay blue for recognition */
    --color-link: light-dark(var(--blue-700), var(--blue-400));

    /* Warm borders */
    --color-border-light: light-dark(var(--neutral-100), var(--neutral-800));
    --color-border: light-dark(var(--neutral-300), var(--neutral-700));
    --color-border-dark: light-dark(var(--neutral-400), var(--neutral-600));

    /* Selection & highlight: sky blue in light, monochrome in dark */
    --color-selected: light-dark(var(--sky-100), var(--neutral-800));
    --color-selected-dark: light-dark(var(--blue-300), var(--blue-800));
    --color-highlight: light-dark(var(--sky-200), var(--neutral-800));

    /* Primary action: amber (the brand color) */
    --color-primary: light-dark(var(--neutral-950), var(--neutral-100));
    --color-secondary: light-dark(var(--neutral-100), var(--neutral-800));
    --color-negative: light-dark(var(--red-500), var(--red-800));
    --color-positive: light-dark(var(--emerald-500), var(--emerald-800));
}

html, body {
    -webkit-font-smoothing: antialiased;
}

html.light {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

/*.btn:not(.menu__item) {
    transition: all;
    transition-duration: var(--time-200);

    &:hover {
        filter: var(--drop-shadow);
    }

    &:active {
        opacity: 0.8;
        filter: var(--drop-shadow-sm);

        .icon {
            transform: rotate(8deg);
        }
    }

    .icon {
        transition: all;
        transition-duration: var(--time-200);
    }
}
*/