// UI Kit Variables
// --------------------------------------------------

@use "sass:color";

// Core Color Palette
// --------------------------------------------------
$Black-Color: #000000;
$Dark-Gray-1: #373737;
$Dark-Gray-2: #4D4D4D;
$Dark-Gray-3: #BDBDBD;
$Red: #CF0106;
$Green: #28B446;
$Yellow: #ffc107;
$Light-Gray-1: #929292;
$Light-Gray-2: #EAEAEA;
$Light-Gray-3: #F3F3F3;
$White: #FFFFFF;
$Link: #6d5cae;
$Link-on-dark: #0185CF;

// Typography
// --------------------------------------------------
$font-header: 'Montserrat', Arial, sans-serif;
$font-body: 'Open Sans', Arial, sans-serif;
$text-color: $Black-Color;
$base-font-family: "Montserrat", "Open Sans", Arial, sans-serif;

// Semantic Color Aliases (legacy Pages mapping)
// --------------------------------------------------
$color-master: $Light-Gray-1;
$color-master-light: $Light-Gray-1;
$color-master-lighter: $Light-Gray-2;
$color-master-lightest: $Light-Gray-3;
$color-master-dark: $Dark-Gray-1;

$color-white: $White;
$color-black: $Black-Color;

$color-success: $Green;
$color-complete: $Link-on-dark;
$color-primary: $Link;
$color-warning: $Yellow;
$color-danger: $Red;
$color-info: $Dark-Gray-1;

// Derived color variants (only those actively used)
$color-complete-lighter: color.mix($color-complete, $color-white, 20%);
$color-primary-dark: color.mix($color-primary, $color-black, 81%);
$color-warning-dark: color.mix($color-warning, $color-black, 81%);
$color-info-lighter: color.mix($color-info, $color-white, 20%);
$color-info-dark: color.mix($color-info, $color-black, 81%);

// Menu
// --------------------------------------------------
$menu-bezier: 0.05, 0.74, 0.27, 0.99;
$menu-icon-size: 40px;
$color-menu: #2b303b;
$color-menu-dark: color.mix($color-menu, #000, 77%);
// Pre-computed: blend-hardlight(color.mix($color-menu, #fff, 92%), #fff)
$color-menu-light: #788296;
$color-menu-link-hover: #fff;

// Body
// --------------------------------------------------
$body-background: $color-master-lightest;

// Layout
// --------------------------------------------------
$layout-header-height: 60px;
$layout-sidepanel-width-collapsed: 70px;
$layout-sidepanel-width: 280px;

// Panels
// --------------------------------------------------
$panel-border-color: rgba(0, 0, 0, 0.07);
$panel-padding: 20px;
$panel-heading-padding: $panel-padding $panel-padding 7px $panel-padding;
$panel-condensed-heading-padding: 13px 13px 0 13px;
$panel-condensed-body-padding: 13px;

// Forms
// --------------------------------------------------
$form-control-border-color: $Light-Gray-3;

// Z-Index Scale
// --------------------------------------------------
$zIndex-1: 100;
$zIndex-2: 200;
$zIndex-3: 300;
$zIndex-4: 400;
$zIndex-5: 500;
$zIndex-6: 600;
$zIndex-7: 700;
$zIndex-8: 800;
$zIndex-9: 900;
$zIndex-10: 1000;

$zIndex-sidebar: $zIndex-10;
$zIndex-portlet: $zIndex-6;

// Borders
// --------------------------------------------------
$default-border-size: 5px;