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

:root {
  color-scheme: dark;

  /* --- Dark theme (default) --- */
  --bg: #111114;
  --surface: #1A1A1F;
  --surface-alt: #232328;
  --accent: #C4A46E;
  --accent-hover: #D4B87E;
  --accent-glow: rgba(196, 164, 110, 0.20);
  --danger: #E8614D;
  --danger-hover: #D4503E;
  --success: #5EAA6B;
  --warning: #D9952E;
  --text: #DAD5CE;
  --text-sub: #9B968F;
  --text-dim: #948F87;
  --border: #2A2A30;
  --overlay: rgba(0, 0, 0, 0.55);
  --shadow: rgba(0, 0, 0, 0.45);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239B968F'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  /* --- Glass panel --- */
  --glass-bg: rgba(26, 26, 31, 0.88);
  --glass-border: rgba(255, 255, 255, 0.08);

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

  /* --- Typography (4-step scale) --- */
  --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --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;

  /* --- Easing --- */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* --- Duration --- */
  --dur-micro: 100ms;
  --dur-small: 200ms;
  --dur-medium: 350ms;
  --dur-large: 500ms;

  /* --- Z-index --- */
  --z-pulse: 0;
  --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: #F5F2ED;
  --surface: #FEFCF8;
  --surface-alt: #EDE9E2;
  --accent: #7A6535;
  --accent-hover: #6B5830;
  --accent-glow: rgba(122, 101, 53, 0.18);
  --danger: #C44E3A;
  --danger-hover: #B04230;
  --success: #3D8B4E;
  --warning: #B8802A;
  --text: #1E1C18;
  --text-sub: #6B665D;
  --text-dim: #696259;
  --border: #D8D4CC;
  --overlay: rgba(0, 0, 0, 0.35);
  --shadow: rgba(0, 0, 0, 0.08);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B665D'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  /* --- Glass panel --- */
  --glass-bg: rgba(254, 252, 248, 0.88);
  --glass-border: rgba(0, 0, 0, 0.08);
}