/*
 * LiteWorkPro application design contract.
 *
 * This file owns product-level visual decisions and intentionally loads after
 * the Hoodcoder.Blazor foundation so the application can specialize HC tokens
 * without depending on a third-party theme framework.
 */

:root {
    color-scheme: light;

    /* Brand and semantic color */
    --lwp-brand-50: #f5f3ff;
    --lwp-brand-100: #ede9fe;
    --lwp-brand-200: #ddd6fe;
    --lwp-brand-300: #c4b5fd;
    --lwp-brand-400: #a78bfa;
    --lwp-brand-500: #8b5cf6;
    --lwp-brand-600: #7c3aed;
    --lwp-brand-700: #6d28d9;
    --lwp-brand-800: #5b21b6;
    --lwp-brand-900: #4c1d95;
    --lwp-brand-rgb: 109, 40, 217;
    --lwp-accent: #0f766e;
    --lwp-secondary: #64748b;
    --lwp-success: #15803d;
    --lwp-warning: #b45309;
    --lwp-danger: #be123c;
    --lwp-info: #0369a1;
    --lwp-secondary-rgb: 100, 116, 139;
    --lwp-success-rgb: 21, 128, 61;
    --lwp-warning-rgb: 180, 83, 9;
    --lwp-danger-rgb: 190, 18, 60;
    --lwp-info-rgb: 3, 105, 161;
    --lwp-success-soft: #ecfdf3;
    --lwp-warning-soft: #fff7ed;
    --lwp-danger-soft: #fff1f2;
    --lwp-info-soft: #f0f9ff;

    /* Surfaces and content */
    --lwp-canvas: #f6f7fb;
    --lwp-surface: #ffffff;
    --lwp-surface-raised: #ffffff;
    --lwp-surface-muted: #f1f3f8;
    --lwp-surface-inset: #e9edf5;
    --lwp-scrim: rgb(15 23 42 / 58%);
    --lwp-text: #172033;
    --lwp-text-muted: #596579;
    --lwp-text-subtle: #7b879a;
    --lwp-heading: #111827;
    --lwp-text-on-brand: #ffffff;
    --lwp-white: #ffffff;
    --lwp-black: #020617;
    --lwp-white-rgb: 255, 255, 255;
    --lwp-black-rgb: 2, 6, 23;
    --lwp-body-rgb: 23, 32, 51;
    --lwp-light-rgb: 241, 243, 248;
    --lwp-dark-rgb: 17, 24, 39;
    --lwp-link: #6d28d9;
    --lwp-link-hover: #4c1d95;

    /* Borders and focus */
    --lwp-border-subtle: #e3e7ef;
    --lwp-border: #d2d8e3;
    --lwp-border-strong: #9aa5b5;
    --lwp-warning-border: #fed7aa;
    --lwp-focus-color: #7c3aed;
    --lwp-focus-ring: 0 0 0 3px rgb(124 58 237 / 26%);
    --lwp-focus-ring-high-contrast: 0 0 0 3px Canvas, 0 0 0 5px Highlight;

    /* Elevation */
    --lwp-shadow-xs: 0 1px 2px rgb(15 23 42 / 5%);
    --lwp-shadow-sm: 0 2px 8px rgb(15 23 42 / 7%);
    --lwp-shadow-md: 0 12px 28px rgb(15 23 42 / 10%);
    --lwp-shadow-lg: 0 24px 60px rgb(15 23 42 / 16%);
    --lwp-shadow-overlay: 0 30px 90px rgb(15 23 42 / 24%);

    /* Radius */
    --lwp-radius-xs: 0.375rem;
    --lwp-radius-sm: 0.625rem;
    --lwp-radius-md: 0.875rem;
    --lwp-radius-lg: 1.125rem;
    --lwp-radius-xl: 1.5rem;
    --lwp-radius-pill: 999rem;

    /* Spacing */
    --lwp-space-0: 0;
    --lwp-space-1: 0.25rem;
    --lwp-space-2: 0.5rem;
    --lwp-space-3: 0.75rem;
    --lwp-space-4: 1rem;
    --lwp-space-5: 1.25rem;
    --lwp-space-6: 1.5rem;
    --lwp-space-8: 2rem;
    --lwp-space-10: 2.5rem;
    --lwp-space-12: 3rem;
    --lwp-space-16: 4rem;
    --lwp-space-20: 5rem;
    --lwp-page-gutter: 0;
    --lwp-section-gap: clamp(1.25rem, 2vw, 2rem);

    /* Typography */
    --lwp-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lwp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --lwp-text-xs: 0.75rem;
    --lwp-text-sm: 0.875rem;
    --lwp-text-md: 1rem;
    --lwp-text-lg: 1.125rem;
    --lwp-text-xl: 1.25rem;
    --lwp-text-2xl: clamp(1.5rem, 2vw, 1.875rem);
    --lwp-text-3xl: clamp(1.875rem, 3vw, 2.5rem);
    --lwp-leading-tight: 1.2;
    --lwp-leading-normal: 1.5;
    --lwp-leading-relaxed: 1.7;
    --lwp-weight-regular: 400;
    --lwp-weight-medium: 500;
    --lwp-weight-semibold: 600;
    --lwp-weight-bold: 700;

    /* Controls and touch */
    --lwp-control-height-sm: 2.25rem;
    --lwp-control-height: 2.75rem;
    --lwp-control-height-lg: 3.25rem;
    --lwp-touch-target: 2.75rem;
    --lwp-control-padding-inline: 1rem;

    /* Responsive contract (documentation and container-query use) */
    --lwp-breakpoint-mobile: 375px;
    --lwp-breakpoint-tablet: 768px;
    --lwp-breakpoint-desktop: 1280px;
    --lwp-breakpoint-large: 1920px;
    --lwp-breakpoint-ultrawide: 2560px;
    --lwp-content-max: 120rem;
    --lwp-grid-gutter-x: 1.5rem;
    --lwp-grid-gutter-y: 0;

    /* Motion */
    --lwp-duration-instant: 80ms;
    --lwp-duration-fast: 150ms;
    --lwp-duration-base: 220ms;
    --lwp-duration-slow: 360ms;
    --lwp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --lwp-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --lwp-transition-interactive:
        color var(--lwp-duration-fast) var(--lwp-ease-standard),
        background-color var(--lwp-duration-fast) var(--lwp-ease-standard),
        border-color var(--lwp-duration-fast) var(--lwp-ease-standard),
        box-shadow var(--lwp-duration-fast) var(--lwp-ease-standard),
        transform var(--lwp-duration-instant) var(--lwp-ease-standard);

    /* Product shell */
    --lwp-sidebar-width: 18rem;
    --lwp-sidebar-compact-width: 4.5rem;
    --lwp-header-height: 4.25rem;
    --lwp-z-sticky: 100;
    --lwp-z-menu: 300;
    --lwp-z-drawer: 500;
    --lwp-z-modal: 600;
    --lwp-z-toast: 700;

    /* Collection defaults */
    --lwp-table-background: transparent;
    --lwp-table-color: var(--lwp-text);
    --lwp-table-accent-background: transparent;
    --lwp-table-striped-background: var(--lwp-surface-muted);
    --lwp-table-striped-color: var(--lwp-text);
    --lwp-table-active-background: var(--lwp-brand-100);
    --lwp-table-active-color: var(--lwp-heading);
    --lwp-table-hover-background: var(--lwp-brand-50);
    --lwp-table-hover-color: var(--lwp-heading);

    /* Specialize Hoodcoder tokens with LiteWorkPro's product identity. */
    --hc-bg: var(--lwp-canvas);
    --hc-shell-bg: var(--lwp-canvas);
    --hc-surface-bg: var(--lwp-surface);
    --hc-surface-muted-bg: var(--lwp-surface-muted);
    --hc-surface-color: var(--lwp-text);
    --hc-heading-color: var(--lwp-heading);
    --hc-text: var(--lwp-text);
    --hc-text-soft: var(--lwp-text-subtle);
    --hc-muted-color: var(--lwp-text-muted);
    --hc-primary: var(--lwp-brand-700);
    --hc-primary-bg: var(--lwp-brand-50);
    --hc-success: var(--lwp-success);
    --hc-success-bg: var(--lwp-success-soft);
    --hc-warning: var(--lwp-warning);
    --hc-warning-bg: var(--lwp-warning-soft);
    --hc-error: var(--lwp-danger);
    --hc-error-bg: var(--lwp-danger-soft);
    --hc-info: var(--lwp-info);
    --hc-info-bg: var(--lwp-info-soft);
    --hc-border: var(--lwp-border);
    --hc-border-color: var(--lwp-border);
    --hc-border-soft: var(--lwp-border-subtle);
    --hc-border-hover: var(--lwp-brand-400);
    --hc-border-focus: var(--lwp-focus-color);
    --hc-shadow-focus: var(--lwp-focus-ring);
    --hc-shadow-sm: var(--lwp-shadow-xs);
    --hc-shadow-md: var(--lwp-shadow-sm);
    --hc-shadow-lg: var(--lwp-shadow-md);
    --hc-shadow-menu: var(--lwp-shadow-lg);
    --hc-radius-sm: var(--lwp-radius-sm);
    --hc-radius-md: var(--lwp-radius-md);
    --hc-radius-lg: var(--lwp-radius-lg);
    --hc-radius-xl: var(--lwp-radius-xl);
    --hc-control-height-sm: var(--lwp-control-height-sm);
    --hc-control-height-md: var(--lwp-control-height);
    --hc-control-height-lg: var(--lwp-control-height-lg);
    --hc-z-sticky: var(--lwp-z-sticky);
    --hc-z-dropdown: var(--lwp-z-menu);
    --hc-z-drawer: var(--lwp-z-drawer);
    --hc-z-modal: var(--lwp-z-modal);
    --hc-z-toast: var(--lwp-z-toast);
}

:root[data-hc-theme="dark"] {
    color-scheme: dark;

    --lwp-brand-50: #21183d;
    --lwp-brand-100: #2d2054;
    --lwp-brand-200: #493480;
    --lwp-brand-300: #7456b5;
    --lwp-brand-400: #a78bfa;
    --lwp-brand-500: #b8a2ff;
    --lwp-brand-600: #c4b5fd;
    --lwp-brand-700: #d8ccff;
    --lwp-brand-800: #e6deff;
    --lwp-brand-900: #f3f0ff;
    --lwp-brand-rgb: 196, 181, 253;
    --lwp-accent: #5eead4;
    --lwp-secondary: #aeb8c8;
    --lwp-success: #4ade80;
    --lwp-warning: #fbbf24;
    --lwp-danger: #fb7185;
    --lwp-info: #38bdf8;
    --lwp-secondary-rgb: 174, 184, 200;
    --lwp-success-rgb: 74, 222, 128;
    --lwp-warning-rgb: 251, 191, 36;
    --lwp-danger-rgb: 251, 113, 133;
    --lwp-info-rgb: 56, 189, 248;
    --lwp-success-soft: #10291d;
    --lwp-warning-soft: #2d210e;
    --lwp-danger-soft: #32131a;
    --lwp-info-soft: #10283a;
    --lwp-canvas: #0d111b;
    --lwp-surface: #151b28;
    --lwp-surface-raised: #1b2231;
    --lwp-surface-muted: #202838;
    --lwp-surface-inset: #0f1521;
    --lwp-scrim: rgb(2 6 23 / 76%);
    --lwp-text: #e6eaf1;
    --lwp-text-muted: #aeb8c8;
    --lwp-text-subtle: #8793a6;
    --lwp-heading: #f8fafc;
    --lwp-text-on-brand: #171022;
    --lwp-white: #ffffff;
    --lwp-black: #000000;
    --lwp-body-rgb: 230, 234, 241;
    --lwp-light-rgb: 32, 40, 56;
    --lwp-dark-rgb: 248, 250, 252;
    --lwp-link: #c4b5fd;
    --lwp-link-hover: #ddd6fe;
    --lwp-border-subtle: #252e3f;
    --lwp-border: #344055;
    --lwp-border-strong: #637089;
    --lwp-warning-border: #854d0e;
    --lwp-focus-color: #c4b5fd;
    --lwp-focus-ring: 0 0 0 3px rgb(196 181 253 / 32%);
    --lwp-shadow-xs: 0 1px 2px rgb(0 0 0 / 24%);
    --lwp-shadow-sm: 0 3px 12px rgb(0 0 0 / 28%);
    --lwp-shadow-md: 0 14px 34px rgb(0 0 0 / 34%);
    --lwp-shadow-lg: 0 28px 70px rgb(0 0 0 / 44%);
    --lwp-shadow-overlay: 0 34px 100px rgb(0 0 0 / 58%);
}

html {
    min-width: 20rem;
    background: var(--lwp-canvas);
    color: var(--lwp-text);
    font-family: var(--lwp-font-sans);
    line-height: var(--lwp-leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100dvh;
    margin: 0;
    background: var(--lwp-canvas);
    color: var(--lwp-text);
}

a {
    color: var(--lwp-link);
}

a:hover {
    color: var(--lwp-link-hover);
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="menuitem"],
    [tabindex]
):focus-visible {
    outline: 2px solid var(--lwp-focus-color);
    outline-offset: 2px;
    box-shadow: var(--lwp-focus-ring);
}

:where(button, [role="button"], input, select) {
    min-height: min(var(--lwp-touch-target), 100%);
}

::selection {
    background: var(--lwp-brand-200);
    color: var(--lwp-heading);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --lwp-duration-instant: 1ms;
        --lwp-duration-fast: 1ms;
        --lwp-duration-base: 1ms;
        --lwp-duration-slow: 1ms;
    }

    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

@media (forced-colors: active) {
    :root {
        --lwp-focus-ring: var(--lwp-focus-ring-high-contrast);
    }

    :where(button, input, select, textarea, [role="button"], [role="menuitem"]) {
        border: 1px solid ButtonText;
    }
}

@media (pointer: coarse) {
    :root {
        --lwp-touch-target: 3rem;
    }
}