/**
 * WC OSAS - CSS Variables
 * Core design tokens used across all stylesheets
 * Version: 0.5.21
 */

:root {
  /* ============================================================
     Core Brand Colors
     ============================================================ */
  --osas-primary : #0073aa;
  --osas-accent  : #00a0d2;
  
  /* ============================================================
     Grayscale Palette
     ============================================================ */
  --osas-gray-50  : #f9fafb;
  --osas-gray-100 : #f3f4f6;
  --osas-gray-200 : #e5e7eb;
  --osas-gray-300 : #d1d5db;
  --osas-gray-400 : #9ca3af;
  --osas-gray-500 : #6b7280;
  --osas-gray-600 : #4b5563;
  --osas-gray-700 : #374151;
  --osas-gray-800 : #1f2937;
  --osas-gray-900 : #111827;
  
  /* ============================================================
     Semantic Colors
     ============================================================ */
  --osas-success : #10b981;
  --osas-warning : #f59e0b;
  --osas-error   : #ef4444;
  --osas-info    : #3b82f6;
  
  /* ============================================================
     Component Sizing
     ============================================================ */
  --osas-btn-pad    : .5rem 1rem;
  --osas-btn-pad-sm : .35rem .75rem;
  --osas-icon-gap   : .35em;
  --osas-btn-radius : 4px;
  --osas-card-radius: 8px;
  
  /* ============================================================
     Transitions
     ============================================================ */
  --osas-transition : 0.2s;
  
  /* ============================================================
     Borders & Shadows
     ============================================================ */
  --osas-border-color : #e0e0e0;
  --osas-shadow-sm    : 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --osas-shadow       : 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --osas-shadow-md    : 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}