/**
 * SCSS Variables
 *
 * Design tokens for the Links module (Free)
 * Aligned with WordPress admin color palette and PRO design system
 */

// ============================================
// Colors - Primary
// ============================================
$color-primary: #2271b1;
$color-primary-hover: #135e96;
$color-primary-dark: #0a4b78;
$color-primary-light: #e0e5f0;
$color-primary-lightest: #f0f4f8;

// ============================================
// Colors - Semantic
// ============================================
$color-success: #4ab147;
$color-success-bg: #d4edda;
$color-success-text: #155724;
$color-success-dark: #2d7a2a;

$color-danger: #d63638;
$color-danger-hover: #b32d2e;
$color-danger-bg: #f8d7da;
$color-danger-text: #721c24;

$color-warning: #f0b849;
$color-warning-bg: #fff3cd;
$color-warning-text: #856404;

$color-info: #00a0d2;
$color-info-bg: #d1ecf1;
$color-info-text: #0c5460;

// ============================================
// Colors - Grays & Text
// ============================================
$color-text-primary: #1e1e1e;
$color-text-secondary: #50575e;
$color-text-tertiary: #757575;
$color-text-muted: #a0a5aa;
$color-text-dark: #1d2327;
$color-text-light: #646970;

$color-border: #e0e0e0;
$color-border-light: #f0f0f0;
$color-border-dark: #dcdcde;
$color-border-input: #8c8f94;

$color-bg-white: #fff;
$color-bg-light: #f8f9fa;
$color-bg-lighter: #fafafa;
$color-bg-hover: #f6f7f7;
$color-bg-gray: #f0f0f1;

// Skeleton loading colors
$color-skeleton-base: #f2f3f5;
$color-skeleton-highlight: #e9eaed;

// ============================================
// Spacing
// ============================================
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-2xl: 24px;
$spacing-3xl: 32px;
$spacing-4xl: 40px;

// ============================================
// Border Radius
// ============================================
$radius-sm: 3px;
$radius-md: 4px;
$radius-lg: 6px;
$radius-xl: 8px;

// ============================================
// Transitions
// ============================================
$transition-fast: 0.15s ease;
$transition-normal: 0.2s ease;

// ============================================
// Shadows
// ============================================
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
$shadow-focus: 0 0 0 1px #2271b1;

// ============================================
// Typography
// ============================================
$font-size-xs: 11px;
$font-size-sm: 12px;
$font-size-base: 13px;
$font-size-md: 14px;
$font-size-lg: 18px;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

$line-height-normal: 1.4;
$line-height-relaxed: 1.5;

// ============================================
// Component-specific
// ============================================

// Table
$table-header-bg: $color-bg-light;
$table-row-hover: #f5f5f5;
$table-cell-padding: $spacing-lg $spacing-xl;

// Badge
$badge-padding: 4px 10px;
$badge-font-size: $font-size-sm;
$badge-radius: $radius-md;

// Button
$button-padding: 8px $spacing-lg;
$button-height: 36px;

// Input
$input-height: 38px;
$input-padding: 6px $spacing-md;
$input-border-width: 1px;

// Breakpoints
$breakpoint-mobile: 782px;