/* ============================================================
   Disky Fun — Design Tokens
   ============================================================
   진짜 윈도98 픽셀 퍼펙트 + 디스키펀 정체성
   테마 전환 = 이 파일의 변수만 바꿈
   ============================================================ */

/* ─── 폰트 (CDN) ──────────────────────────────────────── */

@font-face {
  font-family: 'Galmuri11';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2107@1.1/Galmuri11.woff2') format('woff2');
  font-weight: normal;
  font-display: block;
}

@font-face {
  font-family: 'Galmuri11Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2107@1.1/Galmuri11-Bold.woff2') format('woff2');
  font-weight: bold;
  font-display: block;
}

@font-face {
  font-family: 'DSEG7';
  src: url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'DSEG14';
  src: url('https://cdn.jsdelivr.net/gh/keshikan/DSEG@v0.46/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}


:root {
  /* ─── 폰트 패밀리 ──────────────────────────────────── */
  --font-system: 'Galmuri11', 'Dotum', '돋움', 'Tahoma', monospace;
  --font-bold: 'Galmuri11Bold', 'Galmuri11', 'Dotum', monospace;
  --font-digital7: 'DSEG7', 'Courier New', monospace;
  --font-digital14: 'DSEG14', 'Courier New', monospace;
  
  /* ─── 폰트 크기 (픽셀 폰트 = 정수 크기) ──────────── */
  --fs-xs: 10px;
  --fs-sm: 11px;     /* Win98 표준 */
  --fs-base: 11px;
  --fs-md: 12px;
  --fs-lg: 14px;
  --fs-xl: 16px;
  --fs-2xl: 20px;
  --fs-3xl: 28px;
  --fs-boot: 40px;   /* 부팅 로고 */
  
  /* ─── Win98 색상 팔레트 (정확) ────────────────────── */
  
  /* 시스템 색 - 변경 X */
  --c-white: #ffffff;
  --c-black: #000000;
  --c-bg: #c0c0c0;          /* 윈도 회색 */
  --c-bg-light: #dfdfdf;    /* 베벨 밝은 면 */
  --c-bg-dark: #808080;     /* 베벨 어두운 면 */
  --c-bg-darker: #404040;   /* 베벨 가장 어두운 */
  --c-bg-darkest: #000000;
  
  /* 강조색 - 테마 변경 가능 */
  --c-title-active-from: #000080;     /* 진청 - 활성 타이틀 시작 */
  --c-title-active-to: #1084d0;       /* 밝은 청 - 활성 타이틀 끝 */
  --c-title-active-text: #ffffff;
  --c-title-inactive-from: #7b7b7b;
  --c-title-inactive-to: #a5a5a5;
  --c-title-inactive-text: #d4d0c8;
  --c-accent: #000080;                /* 시스템 강조색 (선택, 호버) */
  --c-accent-text: #ffffff;
  
  /* 데스크탑 */
  --c-desktop: #008080;               /* Win98 청록 */
  
  /* 컨텐츠 (창 안) */
  --c-content-bg: #ffffff;
  --c-content-text: #000000;
  
  /* 상태 */
  --c-disabled: #808080;
  --c-disabled-shadow: #ffffff;       /* 비활성 텍스트 음각 */
  --c-link: #0000ee;
  --c-link-visited: #551a8b;
  
  /* ─── 베벨 시스템 (Win98 픽셀 퍼펙트) ──────────────── */
  
  /* 밖으로 튀어나옴 (버튼 기본, 패널) */
  --bevel-out: 
    inset 1px 1px 0 var(--c-bg-light),
    inset -1px -1px 0 var(--c-bg-dark);
  
  /* 밖으로 튀어나옴 - 강함 (창 외곽) */
  --bevel-out-strong:
    inset 1px 1px 0 var(--c-white),
    inset -1px -1px 0 var(--c-black),
    inset 2px 2px 0 var(--c-bg-light),
    inset -2px -2px 0 var(--c-bg-dark);
  
  /* 안으로 들어감 (입력 필드, 컨텐츠 영역) */
  --bevel-in:
    inset 1px 1px 0 var(--c-bg-dark),
    inset -1px -1px 0 var(--c-white);
  
  /* 안으로 들어감 - 강함 (컨텐츠 영역) */
  --bevel-in-strong:
    inset 1px 1px 0 var(--c-bg-darker),
    inset -1px -1px 0 var(--c-white),
    inset 2px 2px 0 var(--c-bg-dark),
    inset -2px -2px 0 var(--c-bg-light);
  
  /* 눌림 (active 상태 버튼) */
  --bevel-pressed:
    inset 1px 1px 0 var(--c-bg-dark),
    inset -1px -1px 0 var(--c-bg-light);
  
  /* 평평 (구분선용) */
  --bevel-thin-in:
    inset 0 1px 0 var(--c-bg-dark),
    inset 0 -1px 0 var(--c-white);
  
  /* 그림자 (창 외곽 그림자) */
  --shadow-window: 1px 1px 0 var(--c-black);
  --shadow-strong: 2px 2px 0 var(--c-black);
  --shadow-soft: 1px 1px 2px rgba(0, 0, 0, 0.3);
  
  /* ─── 크기 (Win98 표준) ───────────────────────────── */
  
  --size-titlebar: 18px;          /* 타이틀바 높이 */
  --size-menubar: 18px;           /* 메뉴바 높이 */
  --size-statusbar: 20px;         /* 상태바 높이 */
  --size-taskbar: 28px;           /* 작업표시줄 높이 */
  --size-startmenu-sidebar: 24px; /* 시작 메뉴 좌측 사이드바 */
  --size-titlebar-btn: 14px;      /* 타이틀바 컨트롤 버튼 (높이) */
  --size-titlebar-btn-w: 16px;    /* 너비 */
  --size-icon-sm: 16px;
  --size-icon-md: 32px;
  --size-icon-lg: 48px;
  --size-desktop-cell: 76px;      /* 바탕화면 아이콘 셀 */
  
  /* 여백 */
  --pad-1: 1px;
  --pad-2: 2px;
  --pad-3: 4px;
  --pad-4: 6px;
  --pad-5: 8px;
  --pad-6: 12px;
  --pad-7: 16px;
  
  /* ─── 창 기본 크기 ────────────────────────────────── */
  
  --window-min-w: 200px;
  --window-min-h: 120px;
  --window-default-w: 480px;
  --window-default-h: 320px;
  
  /* ─── 애니메이션 ──────────────────────────────────── */
  
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 800ms;
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-step: steps(4, end);    /* 픽셀 빌드 효과 */
  
  /* ─── Z-Index 시스템 ───────────────────────────────── */
  
  --z-desktop: 0;
  --z-icons: 10;
  --z-widgets: 20;
  --z-drag-select: 30;
  --z-window: 100;
  --z-window-active: 200;
  --z-resize-handle: 250;
  --z-taskbar: 1000;
  --z-startmenu: 1100;
  --z-dropdown: 1200;
  --z-context-menu: 1300;
  --z-modal: 2000;
  --z-tooltip: 3000;
  --z-toast: 4000;
  --z-crt-overlay: 9998;
  --z-mouse-effects: 9999;
  --z-boot: 99999;
  
  /* ─── 데스크탑 배경 (셋업별 변경) ──────────────────── */
  
  --bg-color: var(--c-desktop);
  --bg-image: none;
  --bg-size: auto;
  --bg-position: center;
  --bg-repeat: no-repeat;
}


/* ─── 사용자 동작 ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}


/* ─── 테마 변형 (예시 — Phase 2+) ─────────────────── */

[data-theme="vaporwave"] {
  --c-bg: #ffb6e1;
  --c-bg-light: #ffd1ec;
  --c-bg-dark: #d96fb5;
  --c-title-active-from: #ff1493;
  --c-title-active-to: #ff69b4;
  --c-accent: #ff1493;
  --c-desktop: linear-gradient(135deg, #ff9ed8, #c8a2ff);
}

[data-theme="dark-vintage"] {
  --c-bg: #2a2a2a;
  --c-bg-light: #3a3a3a;
  --c-bg-dark: #1a1a1a;
  --c-title-active-from: #1a1a1a;
  --c-title-active-to: #4a4a4a;
  --c-content-bg: #1a1a1a;
  --c-content-text: #e0e0e0;
  --c-desktop: #1a1a1a;
}