@charset "UTF-8";
/**
 * Variables
 * CSS Custom Properties for RemoteMeeting
 */

/* ==========================================================================
   Colors
   ========================================================================== */
:root {
  /* Theme Colors */
  --theme-color: #00ac39;
  --theme-color-dark: #009633;
  --theme-color-light: #00c442;
  
  /* Text Colors */
  --text-primary: #222222;
  --text-secondary: #333333;
  --text-tertiary: #484848;
  --text-muted: #666666;
  --text-light: #999999;
  --text-white: #ffffff;
  
  /* Background Colors */
  --bg-white: #ffffff;
  --bg-light: #f5f5f5;
  --bg-gray: #eeeeee;
  --bg-dark: #333333;
  
  /* Border Colors */
  --border-light: #dddddd;
  --border-default: #cccccc;
  --border-dark: #999999;
  
  /* State Colors */
  --color-success: #00ac39;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;
}

/* ==========================================================================
   Typography
   ========================================================================== */
:root {
  /* Font Families */
  --font-primary: 'Noto Sans KR', 'Noto Sans JP', 'Malgun Gothic', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --font-icon: 'rm-icon', 'FontAwesome', sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 26px;
  --font-size-2xl: 50px;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ==========================================================================
   Spacing
   ========================================================================== */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

/* ==========================================================================
   Layout
   ========================================================================== */
:root {
  /* Container */
  --container-max-width: 1200px;
  --container-padding: 16px;
  
  /* Grid */
  --grid-columns: 12;
  --grid-gap: 24px;
  
  /* Breakpoints (for reference in JS) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1200px;
}

/* ==========================================================================
   Animation
   ========================================================================== */
:root {
  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  
  /* Easings */
  --ease-default: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================================================
   Z-Index Scale
   ========================================================================== */
:root {
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}