/* ============================================
   CONSOLIDATED THEME SYSTEM - PRODUCTION PARITY
   
   This file consolidates:
   - packages/sk-app/src/styles/css/production-css-variables.css
   - packages/sk-components/src/styles/css/theme-variables.css  
   - packages/sk-app/src/styles/theme-variables.css
   - Eliminated: packages/sk-app/public/static/css/widget-theme.css
   
   Ensures 100% visual parity with production
   ============================================ */

/* ===============================
   TIER 1: BASE DESIGN TOKENS
   =============================== */
:root {
    /* Base Color Palette */
    --base-white: #ffffff;
    --base-black: #000000;
    --base-red: #dc2626;
    --base-production-green: #29f085;
    /* Production primary */
    --base-production-gray: #3b4147;
    /* Production secondary */
    --base-dark-gray: #424242;
    /* Production table headers */
    --base-panel-dark: #131313;
    /* Production panel headers */
    --base-text-gray: #474749;
    /* Production text */
    --base-border-gray: #e9ecf3;
    /* Production borders */
    --base-light-gray: #f5f5f5;
    --base-disabled-gray: #c9c9c9;
    --base-minor-text: #666666;
    --base-highlight-text: #434242;

    /* Base Design Tokens */
    --base-border-radius-none: 0;
    --base-border-radius-btn: 10px;
    /* Production button radius */
    --base-font-size-panel: 14px;
    --base-font-weight-semi-bold: 600;
    --base-shadow-panel: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ===============================
   TIER 2: SEMANTIC THEME VARIABLES
   =============================== */
:root {
    /* PRODUCTION PRIMARY COLORS - EXACT MATCH */
    --theme-primary-color: var(--base-production-green);
    /* #29f085 - GREEN */
    --theme-secondary-color: var(--base-production-gray);
    /* #3b4147 - DARK GRAY */
    --theme-background-color: var(--base-white);
    --theme-text-color: var(--base-text-gray);
    /* #474749 */
    --theme-border-color: var(--base-border-gray);
    /* #e9ecf3 */

    /* TEXT SYSTEM - PRODUCTION MATCH */
    --theme-text-color-minor: var(--base-minor-text);
    /* #666 */
    --theme-text-color-highlight: var(--base-highlight-text);
    /* #434242 */
    --theme-text-primary: var(--base-text-gray);
    --theme-text-link: #bb1b0d;
    /* Production red links */
    --theme-text-link-hover: #a01409;

    /* PANEL SYSTEM - PRODUCTION EXACT */
    --theme-panel-head-background-color: var(--base-panel-dark);
    /* #131313 */
    --theme-panel-head-color: var(--base-white);
    --theme-panel-head-background-color-highlight: var(--base-white);
    --theme-panel-content-background-color: var(--base-white);
    --theme-panel-content-background-color-highlight: var(--base-dark-gray);
    /* #424242 */
    --theme-panel-box-shadow-transparency: 0.15;

    /* TABLE SYSTEM - PRODUCTION EXACT */
    --theme-table-background-color: var(--base-white);
    --theme-table-header-background-color: var(--base-dark-gray);
    /* #424242 */
    --theme-table-header-text-color: var(--base-black);
    /* BLACK text on gray */
    --theme-table-row-odd-background-color: var(--base-white);
    --theme-table-border-color: var(--base-production-green);
    /* GREEN borders */

    /* FORM SYSTEM - PRODUCTION EXACT */
    --theme-form-control-background-color: var(--base-dark-gray);
    /* #424242 */
    --theme-form-control-text-color: var(--base-text-gray);

    /* BUTTON SYSTEM - PRODUCTION EXACT */
    --theme-btn-primary-text-color: var(--base-white);
    --theme-btn-secondary-text-color: var(--base-white);
    --theme-btn-border-radius: var(--base-border-radius-btn);
    /* 10px */
    --theme-btn-disabled-background-color: var(--base-disabled-gray);
    /* #c9c9c9 */
    --theme-btn-disabled-color: var(--base-text-gray);

    /* INTERACTION STATES - PRODUCTION EXACT */
    --theme-border-color-hover: #a8a8a8;
    --theme-tooltip-background-color: #333;
    --theme-tooltip-text-color: #f5f5f5;
    --theme-link-color: #bb1b0d;
    /* Production red */
    --theme-error-color: red;

    /* DESIGN TOKENS - PRODUCTION EXACT */
    --theme-border-radius: var(--base-border-radius-none);
    /* 0 - NO RADIUS */
    --theme-color-white: var(--base-white);
    --theme-color-black: var(--base-black);
    --theme-color-gray: #9e9e9e;
    --theme-color-light-gray: var(--base-light-gray);
    --theme-color-dark-gray: var(--base-dark-gray);
    --theme-panel-font-size: var(--base-font-size-panel);
    --theme-font-size-panel: var(--base-font-size-panel);
    --theme-font-weight-semi-bold: var(--base-font-weight-semi-bold);

    /* LEGACY COMPATIBILITY MAPPINGS */
    --theme-panel-head-bgColor: var(--base-panel-dark);
    /* Component compatibility */
    --theme-panel-head-bgColor-highlight: #5d5d5d;
    --theme-table-header-bg: var(--base-dark-gray);
    --theme-table-header-text: var(--base-white);
    --theme-table-content-bg: var(--base-white);
}

/* ===============================
   LIGHT THEME OVERRIDES
   =============================== */
body.light-theme {
    --theme-background-color: var(--base-white);
    --theme-panel-head-background-color: #d8d8d8;
    /* Light theme panels */
    --theme-panel-head-background-color-highlight: #b2b2b2;
    --theme-panel-head-color: #262626;
    /* Dark text on light */
    --theme-panel-content-background-color: var(--base-white);
    --theme-panel-content-background-color-highlight: #d8d8d8;
    --theme-border-color: #c9c9c9;
    --theme-text-color: #4a4a4a;
    --theme-text-color-minor: #757575;
    --theme-text-color-highlight: #262626;
    --theme-table-header-background-color: #e8e8e8;
    --theme-table-header-text-color: #4a4a4a;
    --theme-form-control-background-color: var(--base-white);
    --theme-form-control-text-color: #4a4a4a;
    --theme-tooltip-background-color: #4a4a4a;
    --theme-tooltip-text-color: var(--base-white);
    --theme-link-color: #1c4e86;
    --theme-error-color: #d9534f;
}

/* ===============================
   WIDGET THEME OVERRIDES - GRAYSCALE
   Neutral theme for external embedding
   =============================== */
.sk-widget,
.sk-widget.light-theme,
body.sk-widget,
html.sk-widget {
    /* WIDGET NEUTRAL COLORS - GRAYSCALE */
    --theme-primary-color: #666666 !important;
    /* Neutral gray instead of green */
    --theme-secondary-color: var(--base-production-gray) !important;
    /* Keep production gray */
    --theme-background-color: var(--base-white) !important;
    --theme-text-color: var(--base-text-gray) !important;
    /* Keep production text */
    --theme-border-color: var(--base-border-gray) !important;
    /* Keep production borders */

    /* WIDGET TEXT SYSTEM */
    --theme-text-color-minor: var(--base-minor-text) !important;
    --theme-text-color-highlight: var(--base-highlight-text) !important;
    --theme-text-link: #666666 !important;
    /* Neutral link color */
    --theme-text-link-hover: #555555 !important;

    /* WIDGET PANEL SYSTEM - MAINTAIN PRODUCTION STRUCTURE */
    --theme-panel-head-background-color: var(--base-panel-dark) !important;
    /* Keep dark headers */
    --theme-panel-head-color: var(--base-white) !important;
    --theme-panel-content-background-color: var(--base-white) !important;
    --theme-panel-content-background-color-highlight: var(--base-dark-gray) !important;

    /* WIDGET TABLE SYSTEM - MAINTAIN PRODUCTION STRUCTURE */
    --theme-table-background-color: var(--base-white) !important;
    --theme-table-header-background-color: var(--base-dark-gray) !important;
    --theme-table-header-text-color: var(--base-white) !important;
    /* White text for contrast */
    --theme-table-border-color: #666666 !important;
    /* Neutral borders */

    /* WIDGET FORM SYSTEM */
    --theme-form-control-background-color: var(--base-dark-gray) !important;
    --theme-form-control-text-color: var(--base-text-gray) !important;

    /* WIDGET BUTTON SYSTEM */
    --theme-btn-primary-text-color: var(--base-white) !important;
    --theme-btn-secondary-text-color: var(--base-white) !important;
    --theme-btn-border-radius: var(--base-border-radius-btn) !important;

    /* STANDARD CSS VARIABLE COMPATIBILITY */
    --primary-color: #666666 !important;
    --secondary-color: var(--base-production-gray) !important;
    --background-color: var(--base-white) !important;
    --text-color: var(--base-text-gray) !important;
    --border-color: var(--base-border-gray) !important;
}

/* ===============================
   TIER 3: COMPONENT VARIABLES
   =============================== */

/* Button Components */
:root {
    --component-button-primary-background: var(--theme-primary-color);
    --component-button-primary-color: var(--theme-btn-primary-text-color);
    --component-button-primary-border: var(--theme-primary-color);
    --component-button-primary-background-hover: color-mix(in srgb, var(--theme-primary-color) 85%, black);

    --component-button-secondary-background: transparent;
    --component-button-secondary-color: var(--theme-primary-color);
    --component-button-secondary-border: var(--theme-primary-color);
    --component-button-secondary-background-hover: var(--theme-primary-color);
    --component-button-secondary-color-hover: var(--theme-btn-secondary-text-color);

    --component-button-disabled-background: var(--theme-btn-disabled-background-color);
    --component-button-disabled-color: var(--theme-btn-disabled-color);

    --component-button-border-radius: var(--theme-btn-border-radius);
    --component-button-font-size: var(--base-font-size-panel);
    --component-button-font-weight: var(--base-font-weight-semi-bold);
}

/* Panel Components */
:root {
    --component-panel-background: var(--theme-panel-content-background-color);
    --component-panel-border: 1px solid var(--theme-border-color);
    --component-panel-border-radius: var(--theme-border-radius);
    --component-panel-shadow: var(--base-shadow-panel);

    --component-panel-header-background: var(--theme-panel-head-background-color);
    --component-panel-header-color: var(--theme-panel-head-color);
    --component-panel-header-font-size: var(--theme-panel-font-size);
    --component-panel-header-font-weight: var(--theme-font-weight-semi-bold);
}

/* Table Components */
:root {
    --component-table-background: var(--theme-table-background-color);
    --component-table-border: 1px solid var(--theme-table-border-color);
    --component-table-border-radius: var(--theme-border-radius);

    --component-table-header-background: var(--theme-table-header-background-color);
    --component-table-header-color: var(--theme-table-header-text-color);
    --component-table-header-font-weight: var(--theme-font-weight-semi-bold);

    --component-table-row-hover-background: var(--theme-panel-content-background-color-highlight);
}

/* Form Components */
:root {
    --component-input-background: var(--theme-form-control-background-color);
    --component-input-color: var(--theme-form-control-text-color);
    --component-input-border: 1px solid var(--theme-border-color);
    --component-input-border-focus: 1px solid var(--theme-primary-color);
    --component-input-border-radius: var(--theme-border-radius);

    --component-label-color: var(--theme-text-color);
    --component-label-font-weight: var(--theme-font-weight-semi-bold);
}

/* Tooltip Components */
:root {
    --component-tooltip-background: var(--theme-tooltip-background-color);
    --component-tooltip-color: var(--theme-tooltip-text-color);
    --component-tooltip-border-radius: var(--base-border-radius-btn);
    --component-tooltip-font-size: var(--base-font-size-panel);
}

/* ===============================
   LEGACY COMPATIBILITY
   Support for existing variable names
   =============================== */
:root {
    /* Standard CSS Variable Mapping */
    --primary-color: var(--theme-primary-color);
    --secondary-color: var(--theme-secondary-color);
    --background-color: var(--theme-background-color);
    --text-color: var(--theme-text-color);
    --border-color: var(--theme-border-color);
}
/* 
 * Production Color Parity Fix - SIMPLIFIED
 * Basic color overrides for production matching
 */

:root {
  --theme-primary-color: #ee650d !important;
  --theme-secondary-color: #2c5aa0 !important;
  --theme-text-color: #474749 !important;
  --theme-background-color: #ffffff !important;
}

/* Basic production color overrides */
.btn-primary {
  background-color: #ee650d !important;
  border-color: #ee650d !important;
}

.text-primary {
  color: #ee650d !important;
}

/* Ensure widgets use production colors */
.sk-widget {
  background-color: #ffffff !important;
  background-color: var(--theme-background, #ffffff) !important;
  color: #474749 !important;
}




/*# sourceMappingURL=main.9cc00041.css.map*/