:root {
  --color-primary: #111111;
  --color-secondary: #ffffff;
  --color-accent: #00a085;
  --color-background: #f7f7f7;
  --color-border: #e6e6e6;
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-h1: 36px;
  --line-height-sm: 1.3;
  --line-height-md: 1.5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  --transition-normal: all .2s ease;
  --transition-slow: all .4s ease;
  --duration-normal: .2s;
  --ease-ease: ease;

  --z-index-dropdown: 1000;
  --z-index-fixed: 1100;
  --z-index-modal: 2000;
  --z-index-toast: 3000;
  --z-index-tooltip: 4000;

  --btn-border-radius-sm: 4px;
  --btn-border-radius-md: 6px;
  --btn-border-radius-lg: 8px;
  --btn-border-radius-xl: 12px;
  --btn-font-size-sm: 13px;
  --btn-font-size-md: 14px;
  --btn-font-size-lg: 16px;
  --btn-font-size-xl: 18px;
  --btn-padding-sm: 6px 10px;
  --btn-padding-md: 8px 14px;
  --btn-padding-lg: 12px 18px;
  --btn-padding-xl: 14px 22px;

  --control-btn-size: 44px;
  --control-btn-bg: #fff;
  --control-btn-border: 1px solid var(--color-border);
  --control-btn-border-radius: 8px;
  --control-btn-shadow: var(--shadow-sm);
  --control-btn-hover-bg: #f5f5f5;
  --control-btn-hover-shadow: var(--shadow-md);
  --control-btn-active-bg: var(--color-accent);
  --control-btn-active-color: #fff;

  --control-panel-bg: #fff;
  --control-panel-border: 1px solid var(--color-border);
  --control-panel-border-radius: 12px;
  --control-panel-shadow: var(--shadow-md);
  --control-panel-padding: 16px;

  --card-border-radius: 12px;
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding: 16px;

  --material-preview-size: 64px;
  --material-preview-border-radius: 8px;
  --material-preview-shadow: var(--shadow-sm);
  --material-preview-selected-border: var(--color-accent);

  --canvas-background: #f0f0f0;
  --canvas-border: none;
  --canvas-border-radius: 0;

  --loading-overlay-bg: rgba(255,255,255,.85);
  --loading-spinner-color: var(--color-accent);
  --loading-spinner-size: 40px;
  --loading-text-color: var(--color-text-primary);

  --modal-backdrop: rgba(0,0,0,.45);
  --modal-border-radius: 12px;
  --modal-shadow: var(--shadow-lg);
  --modal-padding: 20px;

  --notification-bg: #fff;
  --notification-border: 1px solid var(--color-border);
  --notification-border-radius: 8px;
  --notification-shadow: var(--shadow-lg);
  --notification-padding: 14px;

  --input-border-width: 1px;
  --input-border-radius: 6px;
  --input-font-size: 14px;
  --input-height: 40px;
  --input-padding: 8px 12px;

  --mobile-padding: 12px;
  --mobile-font-size: 14px;
  --mobile-btn-size: 44px;
  --mobile-control-panel-padding: 12px;
}