/* ============================================
   FIDEM CSS Custom Properties
   Dark mode default, light mode toggle
   ============================================ */

:root {
  color-scheme: dark;

  /* --- Dark theme (default) --- */
  --bg: #0D0D0D;
  --surface: #1A1A1A;
  --surface-alt: #222222;
  --accent: #4ECDC4;
  --accent-hover: #3DBDB4;
  --accent-glow: rgba(78, 205, 196, 0.25);
  --danger: #FF6B6B;
  --danger-hover: #E55A5A;
  --success: #4ECB71;
  --warning: #F5A623;
  --text: #E0E0E0;
  --text-sub: #A0A0A0;
  --text-dim: #666666;
  --border: #2A2A2A;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: rgba(0, 0, 0, 0.4);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A0A0A0'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  /* --- Spacing --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* --- Typography --- */
  --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --line-height: 1.6;
  --line-height-tight: 1.3;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* --- Timing --- */
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 500ms ease-out;

  /* --- Z-index --- */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* --- Layout --- */
  --max-width: 480px;
  --touch-min: 44px;
  --btn-height: 48px;
  --header-height: 56px;

  /* --- Safe area --- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* --- Light theme --- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --surface-alt: #EEEEEE;
  --accent: #1E8C82;
  --accent-hover: #136860;
  --accent-glow: rgba(23, 122, 113, 0.2);
  --danger: #E04545;
  --danger-hover: #CC3333;
  --success: #2E9B4E;
  --warning: #D4891A;
  --text: #1A1A1A;
  --text-sub: #666666;
  --text-dim: #999999;
  --border: #DDDDDD;
  --overlay: rgba(0, 0, 0, 0.4);
  --shadow: rgba(0, 0, 0, 0.1);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666666'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}