@use "sass:math";
@use "sass:map";
@use "sass:color";

//THEME SPECIFIC VARIABLES (defined before forwarding cx)
// pick theme color scheme
$primary-color-blue: #47ccde !default;
$primary-color-gray: #607d8b !default;
$primary-color-brown: #795548 !default;
$primary-color-pink: #c2185b !default;
$primary-color-purple: #673ab7 !default;
$primary-color-red: #d32f2f !default;
$primary-color-black: #212121 !default;
$primary-color-green: #4caf50 !default;
$primary-color-indigo: #3f51b5 !default;
$primary-color-teal: #009688 !default;

$cx-theme-primary-color: #49c7de !default;
$cx-theme-primary-color-light: color.adjust(
   $cx-theme-primary-color,
   $lightness: 8%
) !default;
$cx-theme-primary-color-dark: color.adjust(
   $cx-theme-primary-color,
   $lightness: -7%
) !default;

$cx-theme-primary-text-color: color.adjust(
   $cx-theme-primary-color,
   $lightness: -15%
) !default;

$cx-theme-accent-color: #ffffb0 !default;
$cx-theme-danger-color: #ec695f !default;
$cx-theme-danger-color-dark: color.adjust(
   $cx-theme-danger-color,
   $lightness: -15%
) !default;
$cx-theme-secondary-text-color: #757575 !default;

$cx-theme-background-gradient: linear-gradient(
   to top right,
   $cx-theme-primary-color-dark,
   $cx-theme-primary-color
) !default;

$cx-theme-focus-box-shadow: 0 0 2px 2px rgba($cx-theme-primary-color, 0.4) !default;

// shadows
$cx-theme-box-shadow: 0 1px 10px rgba(197, 176, 176, 0.1) !default;
$cx-theme-box-shadow-elevated: 0 2px 20px rgba(0, 0, 0, 0.2) !default;

// pick theme size
$normal-base-size: 14px !default;
$small-base-size: 12px !default;
$cx-theme-base-size: $normal-base-size !default;

// =============================================================================
// BASE VALUES (defined before @forward so they can be used in computed values)
// =============================================================================

// Core base values
$cx-theme-font-family: ("Open Sans", "Roboto", sans-serif);
$cx-theme-color: rgba(0, 0, 0, 0.7);
$cx-theme-default-color-light: rgba(0, 0, 0, 0.6);
$cx-theme-border-color: #d3d8d6;
$cx-theme-default-border-color-light: color.adjust(
   $cx-theme-border-color,
   $lightness: 10%
);
$cx-theme-border-radius: 4px;
$cx-theme-background-color: #fff;

// Box base values
$cx-theme-box-font-size: 14px;
$cx-theme-box-line-height: 24px;
$cx-theme-box-padding: 5px;
$cx-theme-icon-size: 16px;

// Button base values
$cx-theme-button-background-color: #f3f3f3;

// =============================================================================
// Forward cx/src/variables with ALL theme overrides
// =============================================================================
@forward "cx/src/variables" with (
   // -------------------------------------------------------------------------
   // Core defaults (from util/scss/defaults.scss)
   // -------------------------------------------------------------------------
   $cx-default-font-family: $cx-theme-font-family !default,
   $cx-default-color: $cx-theme-color !default,
   $cx-default-border-color: $cx-theme-border-color !default,
   $cx-default-border-radius: $cx-theme-border-radius !default,
   $cx-default-container-padding: 5px !default,

   // -------------------------------------------------------------------------
   // Box (from widgets/box.scss)
   // -------------------------------------------------------------------------
   $cx-default-icon-size: $cx-theme-icon-size !default,
   $cx-default-box-font-size: $cx-theme-box-font-size !default,
   $cx-default-box-line-height: $cx-theme-box-line-height !default,
   $cx-default-box-border-width: 1px !default,
   $cx-default-box-padding: $cx-theme-box-padding !default,

   // -------------------------------------------------------------------------
   // Button (from widgets/Button.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-button-font-size: 11px !default,
   $cx-default-button-font-weight: 600 !default,
   $cx-default-button-background-color: $cx-theme-button-background-color
      !default,
   $cx-default-button-border-width: 1px !default,
   $cx-default-button-border-color: lightgray !default,
   $cx-default-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !default,
   $cx-default-button-color: $cx-theme-color !default,
   $cx-default-button-border-radius: $cx-theme-border-radius !default,
   $cx-default-button-padding: $cx-theme-box-padding
      (
         2 * $cx-theme-box-padding + $cx-theme-box-line-height -
            $cx-theme-icon-size
      )
      !default,

   // -------------------------------------------------------------------------
   // Dropdown (from widgets/overlay/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-dropdown-arrow-offset: 26px !default,

   // -------------------------------------------------------------------------
   // Toast (from widgets/overlay/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-toast-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !default,
   $cx-default-toast-padding: 10px !default,

   // -------------------------------------------------------------------------
   // Window (from widgets/overlay/Window.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-window-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !default,
   $cx-default-window-header-padding: 10px 10px 10px 20px !default,
   $cx-default-window-header-font-size: 18px !default,
   $cx-default-window-body-padding: 10px 20px 10px 20px !default,
   $cx-default-window-header-color: $cx-theme-primary-text-color !default,
   $cx-default-window-header-background-color: $cx-theme-background-color
      !default,

   // -------------------------------------------------------------------------
   // Grid (from widgets/grid/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-grid-header-font-weight: 700 !default,
   $cx-default-grid-font-size: $cx-theme-box-font-size - 1px !default,
   $cx-default-grid-border-radius: $cx-theme-border-radius !default,
   $cx-default-grid-border-color: color.adjust(
         $cx-theme-border-color,
         $lightness: 5%
      )
      !default,
   $cx-default-grid-header-font-size: $cx-theme-box-font-size - 3px !default,
   $cx-default-grid-header-line-height: $cx-theme-box-line-height !default,
   $cx-default-grid-header-color: $cx-theme-color !default,
   $cx-default-grid-header-background-color: color.adjust(
         $cx-theme-button-background-color,
         $lightness: 1%
      )
      !default,
   $cx-default-grid-header-border-color: color.adjust(
         $cx-theme-border-color,
         $lightness: 5%
      )
      !default,
   $cx-default-grid-header-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !default,
   $cx-default-grid-header-padding: $cx-theme-box-padding
      (1.5 * $cx-theme-box-padding) !default,
   $cx-default-grid-data-background-color: #fff !default,
   $cx-default-grid-data-padding: $cx-theme-box-padding
      (1.5 * $cx-theme-box-padding) !default,
   $cx-default-grid-data-line-height: $cx-theme-box-line-height !default,

   // -------------------------------------------------------------------------
   // Form / Input (from widgets/form/Field.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-input-width: 200px !default,
   $cx-default-input-background-color: #f8f9fb !default,
   $cx-default-input-font-size: $cx-theme-box-font-size - 1px !default,
   $cx-default-input-border-color: $cx-theme-default-border-color-light !default,
   $cx-default-input-border-radius: $cx-theme-border-radius !default,
   $cx-default-input-padding: $cx-theme-box-padding
      (1.5 * $cx-theme-box-padding) !default,
   $cx-default-input-left-tool-left: 6px !default,
   $cx-default-input-left-tool-spacing: 2px !default,
   $cx-default-input-right-tool-right: 6px !default,
   $cx-default-input-tool-size: $cx-theme-box-line-height !default,
   $cx-default-input-left-tool-size: $cx-theme-box-line-height !default,
   $cx-default-clear-size: $cx-theme-box-line-height !default,
   $cx-use-box-line-height-fix: false !default,

   // -------------------------------------------------------------------------
   // Label (from widgets/form/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-label-font-size: 12px !default,
   $cx-default-label-color: rgba(0, 0, 0, 38) !default,

   // -------------------------------------------------------------------------
   // Calendar (from widgets/form/Calendar.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-calendar-background-color: #fff !default,
   $cx-default-calendar-border-width: 0px !default,
   $cx-default-calendar-padding: 0 0 10px !default,
   $cx-default-calendar-border-color: $cx-theme-default-border-color-light
      !default,
   $cx-default-calendar-border-radius: $cx-theme-border-radius !default,
   $cx-default-calendar-box-shadow: $cx-theme-box-shadow-elevated !default,
   $cx-default-calendar-header-font-size: $cx-theme-box-font-size + 2px !default,
   $cx-default-calendar-header-color: $cx-theme-color !default,
   $cx-default-calendar-header-background-color: $cx-theme-background-color
      !default,
   $cx-default-calendar-day-font-size: 11px !default,
   $cx-default-calendar-day-border-radius: $cx-theme-border-radius !default,

   // -------------------------------------------------------------------------
   // Checkbox (from widgets/form/Checkbox.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-checkbox-size: $cx-theme-box-line-height - 8px !default,
   $cx-default-checkbox-border-color: $cx-theme-border-color !default,

   // -------------------------------------------------------------------------
   // Radio (from widgets/form/Radio.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-radio-size: $cx-theme-box-line-height - 8px !default,
   $cx-default-radio-color: $cx-theme-primary-color-light !default,
   $cx-default-radio-border-color: $cx-theme-border-color !default,

   // -------------------------------------------------------------------------
   // Lookup tag (from widgets/form/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-input-tag-font-size: 12px !default,
   $cx-default-input-tag-border-radius: $cx-theme-border-radius !default,
   $cx-default-input-tag-spacing: 4px !default,
   $cx-default-input-tag-padding: 0 !default,

   // -------------------------------------------------------------------------
   // ColorPicker (from widgets/form/ColorPicker.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-colorpicker-border-width: 1px !default,
   $cx-default-colorpicker-box-shadow: none !default,
   $cx-default-colorpicker-font-family: $cx-theme-font-family !default,
   $cx-default-colorpicker-background-color: #fff !default,

   // -------------------------------------------------------------------------
   // DateTimePicker (from widgets/form/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-datetimepicker-border-color: transparent !default,
   $cx-default-datetimepicker-border-radius: $cx-theme-border-radius !default,
   $cx-default-wheel-clip-border-color: transparent !default,

   // -------------------------------------------------------------------------
   // Tab (from widgets/nav/Tab.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-tab-font-weight: 700 !default,
   $cx-default-tab-background-color: transparent !default,
   $cx-default-tab-border-width: 0 !default,
   $cx-default-tab-border-color: transparent !default,
   $cx-default-tab-color: $cx-theme-default-color-light !default,
   $cx-default-tab-font-size: $cx-theme-box-font-size - 1px !default,
   $cx-default-tab-border-radius: $cx-theme-border-radius !default,
   $cx-default-tab-padding: $cx-theme-box-padding
      (2 * $cx-theme-box-padding + 10px) !default,

   // -------------------------------------------------------------------------
   // Scroller (from widgets/nav/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-scroller-button-size: 30px !default,

   // -------------------------------------------------------------------------
   // Menu separator (from widgets/nav/Menu.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-menu-separator-color: #e9e9e9 !default,

   // -------------------------------------------------------------------------
   // Slider (from widgets/form/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-slider-axis-size: 4px !default,
   $cx-default-slider-handle-size: 16px !default,
   $cx-default-slider-handle-border-width: 0 !default,
   $cx-default-slider-axis-background-color:
      $cx-theme-default-border-color-light
      !default,
   $cx-default-slider-range-background-color: $cx-theme-primary-color-light
      !default,
   $cx-default-slider-handle-background-color: $cx-theme-primary-color-light
      !default,
   $cx-default-slider-handle-border-color: $cx-theme-primary-color-light
      !default,
   $cx-default-slider-handle-box-shadow: $cx-theme-box-shadow !default,

   // -------------------------------------------------------------------------
   // Switch (from widgets/form/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-switch-axis-size: 24px !default,
   $cx-default-switch-handle-size: 18px !default,
   $cx-default-switch-width: 40px !default,
   $cx-default-switch-axis-background-color:
      $cx-theme-default-border-color-light
      !default,
   $cx-default-switch-range-background-color: $cx-theme-primary-color-light
      !default,
   $cx-default-switch-handle-background-color: #fff !default,
   $cx-default-switch-handle-border-color: #fff !default,
   $cx-default-switch-handle-box-shadow: $cx-theme-box-shadow-elevated !default,

   // -------------------------------------------------------------------------
   // Progress bar (from widgets/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-progressbar-width: 200px !default,
   $cx-default-progressbar-height: 16px !default,
   $cx-default-progressbar-font-size: 10px !default,
   $cx-default-progressbar-border-width: 0 !default,
   $cx-default-progressbar-color: $cx-theme-color !default,
   $cx-default-progressbar-background-color:
      $cx-theme-default-border-color-light
      !default,
   $cx-default-progressbar-indicator-background-color: rgba(
         $cx-theme-primary-color,
         0.6
      )
      !default,

   // -------------------------------------------------------------------------
   // List (from widgets/variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-list-item-padding: 8px 12px !default,

   // -------------------------------------------------------------------------
   // Chart palette (from charts/palette.variables.scss)
   // -------------------------------------------------------------------------
   $cx-default-palette-fill-whiten: 30% !default,
   $cx-default-palette-fill-hover-whiten: 50% !default,
   $cx-default-palette-fill-selected-whiten: 0% !default,
   $cx-default-palette-fill-disabled-whiten: 90% !default,
   $cx-default-palette-fill-blacken: 5% !default,
   $cx-default-palette-fill-hover-blacken: 5% !default,
   $cx-default-palette-fill-selected-blacken: 7% !default,
   $cx-default-palette-fill-disabled-blacken: 0% !default
);

// =============================================================================
// THEME-SPECIFIC VARIABLES (not in cx framework)
// These are only available in this file and files that @use this file
// =============================================================================

// Theme-specific derived variables
$cx-theme-default-color-light: $cx-theme-default-color-light !default;
$cx-theme-default-border-color-light: $cx-theme-default-border-color-light !default;
$cx-theme-default-transition: all 0.35s ease !default;
$cx-theme-default-font-weight: 400 !default;
$cx-theme-default-paragraph-line-height: 1.5 !default;
$cx-theme-default-background-color: $cx-theme-background-color !default;

// Theme-specific input styling
$cx-theme-default-input-box-shadow: null !default;

// Theme-specific section styling
$cx-theme-default-section-box-shadow: 0 3px 18px rgba(0, 0, 0, 0.1) !default;
$cx-theme-default-section-border-radius: $cx-theme-border-radius !default;

// Theme-specific menu styling
$cx-theme-default-menu-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !default;