/* ==========================================================================
   Company Theme Tokens
   Company-owned, persisted values
   No selectors, no framework references
   ========================================================================== */

/* --------------------------------------------------------------------------
   LIGHT THEME (default)
   -------------------------------------------------------------------------- */
:root {
    /* Fonts */
    --ws-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --ws-font-size: 14px;

    /* ============================================================
       SEMANTIC COLORS
       ============================================================ */
    --ws-primary: #bc4b2f;
    --ws-primary-rgb: 188, 75, 47;
    --ws-primary-text: #ffffff;
    --ws-secondary: #6c757d;
    --ws-secondary-rgb: 108, 117, 125;
    --ws-secondary-text: #ffffff;
    --ws-accent: #ec407a;
    --ws-accent-rgb: 240, 106, 182;
    --ws-accent-text: #ffffff;
    /* ------------------------------------------------------------
       STATUS COLORS (light/dark aware)
       ------------------------------------------------------------ */
    /* Success */
    --ws-success-light: #198754;
    --ws-success-light-rgb: 25, 135, 84;
    --ws-success-dark: #2fbf8f;
    --ws-success-dark-rgb: 47, 191, 143;
    --ws-success: var(--ws-success-light);
    --ws-success-rgb: var(--ws-success-light-rgb);
    --ws-success-text: #ffffff;
    /* Info */
    --ws-info-light: #0dcaf0;
    --ws-info-light-rgb: 13, 202, 240;
    --ws-info-dark: #4dd4ff;
    --ws-info-dark-rgb: 77, 212, 255;
    --ws-info: var(--ws-info-light);
    --ws-info-rgb: var(--ws-info-light-rgb);
    --ws-info-text: #000000;
    /* Warning */
    --ws-warning-light: #ffc107;
    --ws-warning-light-rgb: 255, 193, 7;
    --ws-warning-dark: #ffcd39;
    --ws-warning-dark-rgb: 255, 205, 57;
    --ws-warning: var(--ws-warning-light);
    --ws-warning-rgb: var(--ws-warning-light-rgb);
    --ws-warning-text: #212529;
    /* Danger */
    --ws-danger-light: #dc3545;
    --ws-danger-light-rgb: 220, 53, 69;
    --ws-danger-dark: #ff6b6b;
    --ws-danger-dark-rgb: 255, 107, 107;
    --ws-danger: var(--ws-danger-light);
    --ws-danger-rgb: var(--ws-danger-light-rgb);
    --ws-danger-text: #ffffff;
    /* ============================================================
       SEMANTIC INTERACTION STATES (hover/pressed/focus/disabled)
       ============================================================ */
    /* Primary */
    --ws-primary-hover: var(--ws-primary); /* color mixed later */
    --ws-primary-pressed: var(--ws-primary); /* color mixed later */
    --ws-primary-focus: var(--ws-primary); /* color mixed later */
    --ws-primary-disabled: var(--ws-primary); /* color mixed later */
    /* Secondary */
    --ws-secondary-hover: var(--ws-secondary); /* color mixed later */
    --ws-secondary-pressed: var(--ws-secondary); /* color mixed later */
    --ws-secondary-focus: var(--ws-secondary); /* color mixed later */
    --ws-secondary-disabled: var(--ws-secondary); /* color mixed later */
    /* Accent */
    --ws-accent-hover: var(--ws-accent); /* color mixed later */
    --ws-accent-pressed: var(--ws-accent); /* color mixed later */
    --ws-accent-focus: var(--ws-accent); /* color mixed later */
    --ws-accent-disabled: var(--ws-accent); /* color mixed later */
    /* Success */
    --ws-success-hover: var(--ws-success); /* color mixed later */
    --ws-success-pressed: var(--ws-success); /* color mixed later */
    --ws-success-focus: var(--ws-success); /* color mixed later */
    --ws-success-disabled: var(--ws-success); /* color mixed later */
    /* Info */
    --ws-info-hover: var(--ws-info); /* color mixed later */
    --ws-info-pressed: var(--ws-info); /* color mixed later */
    --ws-info-focus: var(--ws-info); /* color mixed later */
    --ws-info-disabled: var(--ws-info); /* color mixed later */
    /* Warning */
    --ws-warning-hover: var(--ws-warning); /* color mixed later */
    --ws-warning-pressed: var(--ws-warning); /* color mixed later */
    --ws-warning-focus: var(--ws-warning); /* color mixed later */
    --ws-warning-disabled: var(--ws-warning); /* color mixed later */
    /* Danger */
    --ws-danger-hover: var(--ws-danger); /* color mixed later */
    --ws-danger-pressed: var(--ws-danger); /* color mixed later */
    --ws-danger-focus: var(--ws-danger); /* color mixed later */
    --ws-danger-disabled: var(--ws-danger); /* color mixed later */
    /* ============================================================
       TEXT COLORS
       ============================================================ */
    --ws-text-base-light: #212529;
    --ws-text-base-light-rgb: 33, 37, 41;
    --ws-text-base-dark: #e0e0e0;
    --ws-text-base-dark-rgb: 224, 224, 224;
    --ws-text-base: var(--ws-text-base-light);
    --ws-text-base-rgb: var(--ws-text-base-light-rgb);
    --ws-text-secondary-light: #495057;
    --ws-text-secondary-light-rgb: 73, 80, 87;
    --ws-text-secondary-dark: #c0c0c0;
    --ws-text-secondary-dark-rgb: 192, 192, 192;
    --ws-text-secondary: var(--ws-text-secondary-light);
    --ws-text-secondary-rgb: var(--ws-text-secondary-light-rgb);
    --ws-text-muted-light: #6c757d;
    --ws-text-muted-light-rgb: 108, 117, 125;
    --ws-text-muted-dark: #999999;
    --ws-text-muted-dark-rgb: 153, 153, 153;
    --ws-text-muted: var(--ws-text-muted-light);
    --ws-text-muted-rgb: var(--ws-text-muted-light-rgb);
    /* ============================================================
       TEXT INTERACTION STATES
       ============================================================ */
    --ws-text-base-hover: var(--ws-text-base); /* color mixed later */
    --ws-text-base-pressed: var(--ws-text-base); /* color mixed later */
    --ws-text-base-focus: var(--ws-text-base); /* color mixed later */
    --ws-text-base-disabled: var(--ws-text-base); /* color mixed later */
    /* ============================================================
       BACKGROUNDS / SURFACES
       ============================================================ */
    --ws-bg-base-light: #ffffff;
    --ws-bg-base-dark: #000000;
    --ws-bg-base: var(--ws-bg-base-light);
    --ws-bg-alt-light: #f8f9fa;
    --ws-bg-alt-dark: #121111;
    --ws-bg-alt: var(--ws-bg-alt-light);
    --ws-bg-muted-light: #f1f3f5;
    --ws-bg-muted-dark: #232529;
    --ws-bg-muted: var(--ws-bg-muted-light);
    --ws-bg-body-light: #f9fafb;
    --ws-bg-body-dark: #191919;
    --ws-bg-body: var(--ws-bg-body-light);
    --ws-bg-selection: var(--ws-primary); /* color mixed later */
    --ws-table-bg-color-hover: var(--ws-bg-base);
    --ws-text-selection: var(--ws-primary-text);
    /* ============================================================
       BORDERS & RADIUS
       ============================================================ */
    --ws-border-base-light: #ced4da;
    --ws-border-base-dark: #555555;
    --ws-border-base: var(--ws-border-base-light);
    --ws-border-muted-light: #dfe2e6;
    --ws-border-muted-dark: #3a3a3a;
    --ws-border-muted: var(--ws-border-muted-light);
    --ws-border-disabled-light: var(--ws-border-base-light); /* color mixed later */
    --ws-border-disabled-dark: var(--ws-border-base-dark); /* color mixed later */
    --ws-border-disabled: var(--ws-border-disabled-light);
    --ws-border-focus: var(--ws-border-base); /* color mixed later */
    --ws-border-primary-light: var(--ws-primary);
    --ws-border-secondary-light: var(--ws-secondary);
    --ws-border-success-light: var(--ws-success);
    --ws-border-info-light: var(--ws-info);
    --ws-border-warning-light: var(--ws-warning);
    --ws-border-danger-light: var(--ws-danger);
    --ws-border-primary-dark: var(--ws-primary);
    --ws-border-secondary-dark: var(--ws-secondary);
    --ws-border-success-dark: var(--ws-success);
    --ws-border-info-dark: var(--ws-info);
    --ws-border-warning-dark: var(--ws-warning);
    --ws-border-danger-dark: var(--ws-danger);
    --ws-border-primary: var(--ws-border-primary-light);
    --ws-border-secondary: var(--ws-border-secondary-light);
    --ws-border-success: var(--ws-border-success-light);
    --ws-border-info: var(--ws-border-info-light);
    --ws-border-warning: var(--ws-border-warning-light);
    --ws-border-danger: var(--ws-border-danger-light);
    --ws-border-primary-hover: var(--ws-border-primary); /* color mixed later */
    --ws-border-secondary-hover: var(--ws-border-secondary); /* color mixed later */
    --ws-border-success-hover: var(--ws-border-success); /* color mixed later */
    --ws-border-info-hover: var(--ws-border-info); /* color mixed later */
    --ws-border-warning-hover: var(--ws-border-warning); /* color mixed later */
    --ws-border-danger-hover: var(--ws-border-danger); /* color mixed later */
    --ws-border-radius: 48px;
    /* ============================================================
       APPBAR / NAVMENU / LOGO
       ============================================================ */
    --ws-logo-url-light: url('images/company_logos/WisysLogo_light.svg');
    --ws-logo-url-dark: url('images/company_logos/WisysLogo_dark.svg');
    --ws-logo-url: var(--ws-logo-url-light);
    --ws-logo-width: 100px;
    --ws-logo-height: 30px;
    --ws-appbar-bg-light: #FFFFFF;
    --ws-appbar-bg-dark: #191919;
    --ws-appbar-bg: var(--ws-appbar-bg-light);
    --ws-appbar-text-light: var(--ws-text-base-light);
    --ws-appbar-text-dark: var(--ws-text-base-dark);
    --ws-appbar-text: var(--ws-appbar-text-light);
    --ws-appbar-border-bottom-width: 1px;
    --ws-appbar-border-bottom-color-light: var(--ws-border-muted-light);
    --ws-appbar-border-bottom-color-dark: var(--ws-border-muted-dark);
    --ws-appbar-border-bottom-color: var(--ws-appbar-border-bottom-color-light);
    --ws-appbar-bg-hover-light: var(--ws-bg-muted-light);
    --ws-appbar-bg-hover-dark: var(--ws-bg-muted-dark);
    --ws-appbar-bg-hover: var(--ws-appbar-bg-hover-light);
    --ws-navmenu-bg-light: #f9fafb;
    --ws-navmenu-bg-dark: #191919;
    --ws-navmenu-bg: var(--ws-navmenu-bg-light);
    --ws-navmenu-text-light: var(--ws-text-base-light);
    --ws-navmenu-text-dark: var(--ws-text-base-dark);
    --ws-navmenu-text: var(--ws-navmenu-text-light);
    --ws-navmenu-border-right-width: 0px;
    --ws-navmenu-border-right-color-light: var(--ws-border-muted-light);
    --ws-navmenu-border-right-color-dark: var(--ws-border-muted-dark);
    --ws-navmenu-border-right-color: var(--ws-navmenu-border-right-color-light);
    --ws-navmenu-bg-hover-light: var(--ws-bg-muted-light);
    --ws-navmenu-bg-hover-dark: var(--ws-bg-muted-dark);
    --ws-navmenu-bg-hover: var(--ws-navmenu-bg-hover-light);
    /* ============================================================
       BOX SHADOW
       ============================================================ */
    --ws-shadow-color-light: #000000;
    --ws-shadow-color-light-rgb: 0, 0, 0; /* RGB only */
    --ws-shadow-color-dark: #000000;
    --ws-shadow-color-dark-rgb: 0, 0, 0; /* RGB only */
    --ws-shadow-color-rgb: var(--ws-shadow-color-light-rgb);
    --ws-shadow-opacity-light: 0.10;
    --ws-shadow-opacity-dark: 0.10;
    --ws-shadow-opacity: var(--ws-shadow-opacity-light);
    --ws-shadow-geometry-btn: 0px 0px 0px 0px;
    --ws-shadow-geometry-input: 0px 0px 0px 0px;
    --ws-shadow-geometry-surface: 0px 0px 0px 0px;
    --ws-shadow-geometry-overlay: 0px 0px 0px 0px;
    --ws-box-shadow-btn: var(--ws-shadow-geometry-btn) rgba(var(--ws-shadow-color-rgb), var(--ws-shadow-opacity));
    --ws-box-shadow-input: var(--ws-shadow-geometry-input) rgba(var(--ws-shadow-color-rgb), var(--ws-shadow-opacity));
    --ws-box-shadow-surface: var(--ws-shadow-geometry-surface) rgba(var(--ws-shadow-color-rgb), var(--ws-shadow-opacity));
    --ws-box-shadow-overlay: var(--ws-shadow-geometry-overlay) rgba(var(--ws-shadow-color-rgb), var(--ws-shadow-opacity));
    /* Light theme color-mix values */
    --ws-interaction-raise-mix: black;
    --ws-interaction-lower-mix: white;
}

    /* --------------------------------------------------------------------------
   DARK THEME
   -------------------------------------------------------------------------- */
    :root[data-bs-theme="dark"] {
        --ws-bg-body: var(--ws-bg-body-dark);
        --ws-bg-base: var(--ws-bg-base-dark);
        --ws-bg-alt: var(--ws-bg-alt-dark);
        --ws-bg-muted: var(--ws-bg-muted-dark);
        --ws-text-base: var(--ws-text-base-dark);
        --ws-text-base-rgb: var(--ws-text-base-dark-rgb);
        --ws-text-secondary: var(--ws-text-secondary-dark);
        --ws-text-secondary-rgb: var(--ws-text-secondary-dark-rgb);
        --ws-text-muted: var(--ws-text-muted-dark);
        --ws-text-muted-rgb: var(--ws-text-muted-dark-rgb);
        --ws-border-base: var(--ws-border-base-dark);
        --ws-border-muted: var(--ws-border-muted-dark);
        --ws-border-disabled: var(--ws-border-disabled-dark);
        /* Status color switch */
        --ws-success: var(--ws-success-dark);
        --ws-success-rgb: var(--ws-success-dark-rgb);
        --ws-info: var(--ws-info-dark);
        --ws-info-rgb: var(--ws-info-dark-rgb);
        --ws-warning: var(--ws-warning-dark);
        --ws-warning-rgb: var(--ws-warning-dark-rgb);
        --ws-danger: var(--ws-danger-dark);
        --ws-danger-rgb: var(--ws-danger-dark-rgb);
        --ws-border-primary: var(--ws-border-primary-dark);
        --ws-border-secondary: var(--ws-border-secondary-dark);
        --ws-border-success: var(--ws-border-success-dark);
        --ws-border-info: var(--ws-border-info-dark);
        --ws-border-warning: var(--ws-border-warning-dark);
        --ws-border-danger: var(--ws-border-danger-dark);
        --ws-logo-url: var(--ws-logo-url-dark);
        --ws-appbar-bg: var(--ws-appbar-bg-dark);
        --ws-appbar-text: var(--ws-appbar-text-dark);
        --ws-appbar-border-bottom-color: var(--ws-appbar-border-bottom-color-dark);
        --ws-appbar-bg-hover: var(--ws-appbar-bg-hover-dark);
        --ws-navmenu-bg: var(--ws-navmenu-bg-dark);
        --ws-navmenu-text: var(--ws-navmenu-text-dark);
        --ws-navmenu-border-right-color: var(--ws-navmenu-border-right-color-dark);
        --ws-navmenu-bg-hover: var(--ws-navmenu-bg-hover-dark);
        --ws-shadow-color-rgb: var(--ws-shadow-color-dark-rgb);
        --ws-shadow-opacity: var(--ws-shadow-opacity-dark);
        /* Dark theme color-mix values */
        --ws-interaction-raise-mix: white;
        --ws-interaction-lower-mix: black;
    }

/* ==========================================================================
   Derived Interaction Tokens - If color-mix supprted
   ========================================================================== */
@supports (color: color-mix(in oklch, red, black)) {
    :root {
        --ws-primary-hover: color-mix(in oklch, var(--ws-primary), var(--ws-interaction-raise-mix) 15%);
        --ws-primary-pressed: color-mix(in oklch, var(--ws-primary), var(--ws-interaction-raise-mix) 25%);
        --ws-primary-focus: color-mix(in oklch, var(--ws-primary), var(--ws-interaction-raise-mix) 20%);
        --ws-primary-disabled: color-mix(in oklch, var(--ws-primary), var(--ws-interaction-lower-mix) 40%);
        /* Secondary */
        --ws-secondary-hover: color-mix(in oklch, var(--ws-secondary), var(--ws-interaction-raise-mix) 15%);
        --ws-secondary-pressed: color-mix(in oklch, var(--ws-secondary), var(--ws-interaction-raise-mix) 25%);
        --ws-secondary-focus: color-mix(in oklch, var(--ws-secondary), var(--ws-interaction-raise-mix) 20%);
        --ws-secondary-disabled: color-mix(in oklch, var(--ws-secondary), var(--ws-interaction-lower-mix) 40%);
        /* Accent */
        --ws-accent-hover: color-mix(in oklch, var(--ws-accent), var(--ws-interaction-raise-mix) 15%);
        --ws-accent-pressed: color-mix(in oklch, var(--ws-accent), var(--ws-interaction-raise-mix) 25%);
        --ws-accent-focus: color-mix(in oklch, var(--ws-accent), var(--ws-interaction-raise-mix) 20%);
        --ws-accent-disabled: color-mix(in oklch, var(--ws-accent), var(--ws-interaction-lower-mix) 40%);
        /* Success */
        --ws-success-hover: color-mix(in oklch, var(--ws-success), var(--ws-interaction-raise-mix) 15%);
        --ws-success-pressed: color-mix(in oklch, var(--ws-success), var(--ws-interaction-raise-mix) 25%);
        --ws-success-focus: color-mix(in oklch, var(--ws-success), var(--ws-interaction-raise-mix) 20%);
        --ws-success-disabled: color-mix(in oklch, var(--ws-success), var(--ws-interaction-lower-mix) 40%);
        /* Info */
        --ws-info-hover: color-mix(in oklch, var(--ws-info), var(--ws-interaction-raise-mix) 15%);
        --ws-info-pressed: color-mix(in oklch, var(--ws-info), var(--ws-interaction-raise-mix) 25%);
        --ws-info-focus: color-mix(in oklch, var(--ws-info), var(--ws-interaction-raise-mix) 20%);
        --ws-info-disabled: color-mix(in oklch, var(--ws-info), var(--ws-interaction-lower-mix) 40%);
        /* Warning */
        --ws-warning-hover: color-mix(in oklch, var(--ws-warning), var(--ws-interaction-raise-mix) 15%);
        --ws-warning-pressed: color-mix(in oklch, var(--ws-warning), var(--ws-interaction-raise-mix) 25%);
        --ws-warning-focus: color-mix(in oklch, var(--ws-warning), var(--ws-interaction-raise-mix) 20%);
        --ws-warning-disabled: color-mix(in oklch, var(--ws-warning), var(--ws-interaction-lower-mix) 40%);
        /* Danger */
        --ws-danger-hover: color-mix(in oklch, var(--ws-danger), var(--ws-interaction-raise-mix) 15%);
        --ws-danger-pressed: color-mix(in oklch, var(--ws-danger), var(--ws-interaction-raise-mix) 25%);
        --ws-danger-focus: color-mix(in oklch, var(--ws-danger), var(--ws-interaction-raise-mix) 20%);
        --ws-danger-disabled: color-mix(in oklch, var(--ws-danger), var(--ws-interaction-lower-mix) 40%);
        /* Text */
        --ws-text-base-hover: color-mix(in oklch, var(--ws-text-base), var(--ws-interaction-raise-mix) 15%);
        --ws-text-base-pressed: color-mix(in oklch, var(--ws-text-base), var(--ws-interaction-raise-mix) 25%);
        --ws-text-base-focus: color-mix(in oklch, var(--ws-text-base), var(--ws-interaction-raise-mix) 20%);
        --ws-text-base-disabled: color-mix(in oklch, var(--ws-text-base), var(--ws-interaction-lower-mix) 40%);
        /* borders */
        --ws-border-disabled-light: color-mix(in oklch, var(--ws-border-base-light), var(--ws-bg-base-light), 50%);
        --ws-border-disabled-dark: color-mix(in oklch, var(--ws-border-base-dark), var(--ws-bg-base-dark), 50%);
        --ws-border-focus: color-mix(in oklch, var(--ws-border-base), var(--ws-interaction-raise-mix) 20%);
        --ws-border-primary-hover: color-mix(in oklch, var(--ws-border-primary), var(--ws-interaction-lower-mix) 15%);
        --ws-border-secondary-hover: color-mix(in oklch, var(--ws-border-secondary), var(--ws-interaction-lower-mix) 15%);
        --ws-border-success-hover: color-mix(in oklch, var(--ws-border-success), var(--ws-interaction-lower-mix) 15%);
        --ws-border-info-hover: color-mix(in oklch, var(--ws-border-info), var(--ws-interaction-lower-mix) 15%);
        --ws-border-warning-hover: color-mix(in oklch, var(--ws-border-warning), var(--ws-interaction-lower-mix) 15%);
        --ws-border-danger-hover: color-mix(in oklch, var(--ws-border-danger), var(--ws-interaction-lower-mix) 15%);
        /* misc */
        --ws-bg-selection: color-mix(in oklch, var(--ws-primary), var(--ws-interaction-lower-mix) 80%);
        --ws-table-bg-color-hover: color-mix(in oklch, var(--ws-bg-base), var(--ws-interaction-raise-mix) 5%);
    }
}