// ============================================================================
// Variables
// ============================================================================

// Colors
// ----------------------------------------------------------------------------
$color-foreground: #1e1e1e;
$color-background: #fff;
$color-background-hover: #f0f0f1;
$color-border: #e0e0e0;
$color-border-light: #d6e2ed;
$color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
$color-accent-hover: var(--wp-components-color-accent-darker-20 var(--wp-admin-theme-color-darker-20, #3858e9));
$color-accent-active-bg: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), transparent 96%);

// WordPress CSS Variables (with fallbacks)
$wp-color-foreground: var(--wp-components-color-foreground, $color-foreground);
$wp-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, $color-accent));

// Spacing
// ----------------------------------------------------------------------------
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 32px;
$spacing-xl: 40px;

// Border
// ----------------------------------------------------------------------------
$border-width: 1px;
$border-width-thick: 3px;
$border-radius: 4px;
$border-radius-none: 0;

// Typography
// ----------------------------------------------------------------------------
$font-size-base: 13px;
$font-size-icon: 20px;
$font-size-help: 1.1em;
$font-weight-normal: 400;
$line-height-base: 1.2;
$line-height-icon: 1;

// Layout
// ----------------------------------------------------------------------------
$max-width-container: 1440px;
$tab-list-width: 200px;
$tab-panel-height: 65vh;
$tab-min-height: 40px;
$icon-size: 20px;

// Transitions
// ----------------------------------------------------------------------------
$transition-base: all 0.1s ease;

// Grid & Gaps
// ----------------------------------------------------------------------------
$gap-none: 0px;
$gap-xs: $spacing-xs;
$gap-sm: $spacing-sm;
$gap-md: $spacing-md;
$gap-lg: $spacing-lg;
$gap-xl: $spacing-xl;

// Grid Layout
// ----------------------------------------------------------------------------
$grid-columns-main-sidebar: 3fr 1fr;