// ==========================================================================
// SKYUI PROJECT VARIABLES
// ==========================================================================
// Project-specific variable overrides that build upon the shared-ui token system
// Import order: base tokens → semantic tokens → project overrides
// NOTE: Semantic tokens are imported in styles.scss and available here
// ==========================================================================

// ==========================================================================
// FONT FAMILY OVERRIDES
// ==========================================================================
// Override base font families to use Comfortaa
$base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
$base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

@import '../../../shared-ui/src/styles/semantic';

// These overrides will cascade through all semantic typography tokens
// that use $base-typography-font-family-sans and $base-typography-font-family-display

// ==========================================================================
// PROJECT-SPECIFIC OVERRIDES
// ==========================================================================
// Custom values that override semantic tokens for SkyUI project needs
// Use semantic tokens as base values to maintain design system consistency

// BRAND CUSTOMIZATION
// Override brand colors while maintaining semantic structure
$skyui-brand-primary: $semantic-color-brand-primary !default;
$skyui-brand-secondary: $semantic-color-brand-secondary !default;
$skyui-brand-accent: $semantic-color-brand-tertiary !default;

// SURFACE CUSTOMIZATION 
// Project-specific surface treatments
$skyui-surface-elevated: $semantic-color-surface-elevated !default;
$skyui-surface-sunken: $semantic-color-surface-sunken !default;
$skyui-surface-interactive: $semantic-color-surface-interactive !default;

// TYPOGRAPHY SCALE ADJUSTMENTS
// Semantic typography tokens can be overridden for project-specific needs
$skyui-heading-display: $semantic-typography-heading-display !default;
$skyui-heading-h1: $semantic-typography-heading-h1 !default;
$skyui-heading-h2: $semantic-typography-heading-h2 !default;
$skyui-body-large: $semantic-typography-body-large !default;
$skyui-body-medium: $semantic-typography-body-medium !default;

// SPACING CUSTOMIZATION
// Build on semantic spacing tokens
$skyui-space-component: $semantic-spacing-component-md !default;
$skyui-space-layout: $semantic-spacing-layout-lg !default;
$skyui-space-section: $semantic-spacing-section-xl !default;

// INTERACTIVE ELEMENTS
// Button and form element customizations
$skyui-interactive-primary: $semantic-color-interactive-primary !default;
$skyui-interactive-secondary: $semantic-color-interactive-secondary !default;
$skyui-border-radius-component: $semantic-border-radius-md !default;
$skyui-border-radius-container: $semantic-border-radius-lg !default;

// ELEVATION & SHADOWS
// Project-specific shadow treatments
$skyui-shadow-elevated: $semantic-shadow-elevated !default;
$skyui-shadow-floating: $semantic-shadow-floating !default;

// ==========================================================================
// COMPONENT-SPECIFIC OVERRIDES
// ==========================================================================
// Variables for specific component customizations

// Dashboard specific
$skyui-dashboard-grid-gap: $semantic-spacing-layout-md !default;
$skyui-dashboard-card-padding: $semantic-spacing-component-lg !default;

// Navigation specific  
$skyui-nav-height: 64px !default;
$skyui-sidebar-width: 280px !default;
$skyui-sidebar-collapsed-width: 72px !default;

// Form specific
$skyui-input-border-radius: $semantic-border-radius-sm !default;
$skyui-input-padding: $semantic-spacing-component-sm !default;