/*
 * Aurora — a worked example as much as a template.
 *
 * Nothing here is a Blade change, a build step or a deploy. It is one file of
 * custom properties, loaded after the panel's own stylesheet, and it moves the
 * navigation to a dark indigo, warms the page, rounds everything a little more
 * and keeps the panel's own compact density.
 */

:root {
    /* ---- Shape and density ---- */
    --ui-radius-sm: 0.625rem;
    --ui-radius: 0.875rem;
    --ui-radius-lg: 1.25rem;

    /* Control height and header height are left to the panel (2026-09-13):
       the roomier 44px controls and 72px header this template shipped with
       pushed the send form below the fold on a 1366x768 laptop. */
    --ui-sidebar-w: 16rem;

    /* ---- The page ---- */
    --ui-canvas: oklch(0.978 0.007 285);
    --ui-surface: oklch(1 0 0);
    --ui-raised: oklch(0.972 0.01 285);
    --ui-sunken: oklch(0.962 0.012 285);

    --ui-line: oklch(0.915 0.012 285);
    --ui-line-strong: oklch(0.855 0.016 285);

    --ui-ink: oklch(0.24 0.03 285);
    --ui-ink-muted: oklch(0.5 0.024 285);
    --ui-ink-subtle: oklch(0.64 0.02 285);

    /* ---- The navigation ----
     * Mixed from --ui-brand-base rather than a fixed indigo, so a reseller who
     * sets their own colour gets a sidebar in it instead of ours.
     */
    --ui-sidebar-bg: color-mix(in oklab, var(--ui-brand-base) 32%, oklch(0.22 0.045 285));
    --ui-sidebar-ink: oklch(0.98 0.005 285);
    --ui-sidebar-ink-muted: oklch(0.83 0.02 285);
    --ui-sidebar-ink-subtle: oklch(0.68 0.025 285);
    --ui-sidebar-line: oklch(1 0 0 / 0.12);
    --ui-sidebar-hover: oklch(1 0 0 / 0.09);
    --ui-sidebar-active-bg: oklch(1 0 0 / 0.16);
    --ui-sidebar-active-ink: oklch(1 0 0);
    --ui-sidebar-mark: color-mix(in oklab, var(--ui-brand-base) 45%, white);

    /* ---- Depth ---- */
    --ui-shadow-sm: 0 1px 2px oklch(0.3 0.04 285 / 0.05), 0 2px 6px oklch(0.3 0.04 285 / 0.05);
    --ui-shadow: 0 4px 10px oklch(0.3 0.04 285 / 0.07), 0 12px 28px oklch(0.3 0.04 285 / 0.08);
    --ui-shadow-lg: 0 12px 32px oklch(0.3 0.04 285 / 0.12), 0 32px 64px oklch(0.3 0.04 285 / 0.12);
}

:root.dark {
    --ui-canvas: oklch(0.175 0.018 285);
    --ui-surface: oklch(0.222 0.021 285);
    --ui-raised: oklch(0.262 0.023 285);
    --ui-sunken: oklch(0.196 0.019 285);

    --ui-line: oklch(0.315 0.022 285);
    --ui-line-strong: oklch(0.405 0.026 285);

    --ui-ink: oklch(0.965 0.006 285);
    --ui-ink-muted: oklch(0.74 0.018 285);
    --ui-ink-subtle: oklch(0.6 0.018 285);

    /* On a dark page the navigation is the darker panel, not the lighter one —
       otherwise it reads as a card floating over the content. */
    --ui-sidebar-bg: color-mix(in oklab, var(--ui-brand-base) 16%, oklch(0.155 0.02 285));
    --ui-sidebar-line: oklch(1 0 0 / 0.08);
    --ui-sidebar-hover: oklch(1 0 0 / 0.07);
    --ui-sidebar-active-bg: oklch(1 0 0 / 0.12);
}

/* Components can be restyled directly, not only re-coloured. Here the header is
   a solid bar rather than a blurred pane, and the cards are lifted further off
   the page than the default. */
.app-bar {
    backdrop-filter: none;
    background-color: var(--ui-surface);
    border-bottom-color: var(--ui-line);
}

.ui-card {
    box-shadow: var(--ui-shadow);
}

.ui-btn--primary {
    box-shadow: 0 1px 2px oklch(0.2 0.05 285 / 0.2), 0 4px 12px color-mix(in oklab, var(--ui-brand) 35%, transparent);
}