// src/renderer/theme.ts
// D3RO 디자인 시스템 SSOT — "Midnight Glass" v2.
// CSS Custom Properties 기반: d3roPalette가 var()를 사용하여 테마 전환 시 자동 반응.
//
// v2 디자인 언어 (레퍼런스: 미드나이트 네이비 + 글래스모피즘):
//  - 딥 네이비 베이스 + 반투명 글래스 카드 + 옅은 헤어라인
//  - 시안→블루→퍼플→마젠타 그라디언트 (웨이브/프로그레스/로고)
//  - 컬러 링 스탯 타일, 소프트 글로우, 보더리스 UI
// 테마 시스템: 6종(dark/light/nord/solarized/catppuccin/dracula) 전부
// 동일 토큰 구조를 가지며 glass/gradient/glow도 테마별로 파생된다.

import { createTheme, type Theme } from '@mui/material/styles'
import type { ThemeMode } from '@d3ro/core/types'

// ── 테마 키 타입 ────────────────────────────────────────────
type ThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'

// ── 원시 색상값 구조 타입 ────────────────────────────────────
interface RawTheme {
  bg: {
    app: string
    card: string
    cardHover: string
    elevated: string
    input: string
    sidebar: string
    inset: string
    chassis: string
    crtBezel: string
    crtGlass: string
  }
  text: {
    primary: string
    secondary: string
    label: string
    disabled: string
    engraving: string
    inactive: string
    dimLabel: string
    muted: string
    hover: string
  }
  border: {
    subtle: string
    default: string
    strong: string
  }
  shadow: {
    card: string
    buttonBase: string
    chassis: string
    inset: string
    insetDeep: string
    buttonRaised: string
    buttonPressed: string
    screenGlow: string
    tooltip: string
  }
  accent: {
    main: string
    dim: string
    glow: string
    light: string
    dark: string
    crtPhosphor: string
    crtPhosphorDim: string
  }
  /** v2: 글래스모피즘 표면 */
  glass: {
    /** 카드 표면 (반투명) */
    surface: string
    /** 카드 내부 상승 표면 */
    raised: string
    /** 헤어라인 보더 */
    hairline: string
    hairlineStrong: string
    /** 카드 상단 시인(광택) 오버레이 — 앰비언트 라디얼 + 수직 시인 레이어 */
    sheen: string
    /** 그라디언트 헤어라인 보더 — 좌상단이 밝고 우하단으로 소멸 (mask 링에 사용) */
    borderGradient: string
    /** backdrop-filter blur 반경 */
    blur: string
  }
  /** v2: 그라디언트 */
  gradient: {
    /** 프라이머리 버튼/액티브 요소 */
    accent: string
    /** 로고/브랜드 텍스트 */
    logo: string
    /** 프로그레스 바 (시안→블루) */
    bar: string
    /** 프로그레스 바 대체 (퍼플→마젠타) */
    barAlt: string
    /** 웨이브폼 컬러 스톱 4개 (canvas에서 getComputedStyle로 읽음) */
    wave1: string
    wave2: string
    wave3: string
    wave4: string
  }
  /** v2: 글로우 */
  glow: {
    /** 프라이머리 버튼/액티브 글로우 */
    accent: string
    soft: string
    /** 카드 외곽 앰비언트 글로우 (+깊이 그림자 결합) */
    card: string
    /** 카드 hover 시 강화 글로우 */
    cardHover: string
  }
}

// ── 원시 색상값 (raw values) ────────────────────────────────────
// CSS 변수에 주입되는 실제 색상값. 컴포넌트에서 직접 사용하지 않는다.
const RAW: Record<ThemeKey, RawTheme> = {
  // ── Midnight (기본 다크) — 레퍼런스 시안 ────────────────────
  dark: {
    bg: { app: '#0a0e1c', card: '#111a30', cardHover: '#152039', elevated: '#1a2540', input: '#0d1526', sidebar: '#0b101f', inset: '#0a111f', chassis: '#111a30', crtBezel: '#0d1424', crtGlass: '#070b16' },
    text: { primary: '#eef2fb', secondary: '#93a4c8', label: '#67789e', disabled: '#3c4763', engraving: '#0a0e1c', inactive: '#7385ab', dimLabel: '#4e5f85', muted: '#2b3550', hover: '#c9d5f2' },
    border: { subtle: 'rgba(148,180,255,0.07)', default: 'rgba(148,180,255,0.12)', strong: 'rgba(148,180,255,0.20)' },
    shadow: {
      card: '0 12px 40px rgba(3,7,18,0.5)',
      buttonBase: '0 1px 2px rgba(3,7,18,0.4)',
      chassis: '0 24px 80px rgba(3,7,18,0.6)',
      inset: 'inset 0 1px 4px rgba(3,7,18,0.5)',
      insetDeep: 'inset 0 2px 8px rgba(3,7,18,0.7)',
      buttonRaised: '0 2px 8px rgba(3,7,18,0.35), inset 0 1px 0 rgba(148,180,255,0.06)',
      buttonPressed: 'inset 0 2px 6px rgba(3,7,18,0.6)',
      screenGlow: 'inset 0 0 24px rgba(3,7,18,0.6)',
      tooltip: '0 8px 24px rgba(3,7,18,0.5)',
    },
    accent: { main: '#3b82f6', dim: 'rgba(59,130,246,0.14)', glow: 'rgba(59,130,246,0.5)', light: '#60a5fa', dark: '#2563eb', crtPhosphor: '#60a5fa', crtPhosphorDim: '#3564b4' },
    glass: {
      surface: 'rgba(17,26,48,0.62)',
      raised: 'rgba(26,38,68,0.55)',
      hairline: 'rgba(148,180,255,0.10)',
      hairlineStrong: 'rgba(148,180,255,0.18)',
      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(59,130,246,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(148,180,255,0.05) 0%, rgba(148,180,255,0) 40%)',
      borderGradient: 'linear-gradient(135deg, rgba(125,180,255,0.55) 0%, rgba(148,180,255,0.14) 32%, rgba(148,180,255,0.06) 58%, rgba(59,130,246,0.22) 100%)',
      blur: '24px',
    },
    gradient: {
      accent: 'linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #60a5fa 100%)',
      logo: 'linear-gradient(90deg, #60a5fa 0%, #818cf8 100%)',
      bar: 'linear-gradient(90deg, #22d3ee 0%, #3b82f6 100%)',
      barAlt: 'linear-gradient(90deg, #8b5cf6 0%, #d946ef 100%)',
      wave1: '#22d3ee', wave2: '#3b82f6', wave3: '#8b5cf6', wave4: '#e879f9',
    },
    glow: {
      accent: '0 0 0 1px rgba(59,130,246,0.35), 0 8px 24px rgba(37,99,235,0.35)',
      soft: '0 0 16px rgba(59,130,246,0.25)',
      card: '0 -8px 32px -12px rgba(59,130,246,0.22), 0 12px 40px rgba(3,7,18,0.45)',
      cardHover: '0 -10px 40px -10px rgba(59,130,246,0.34), 0 12px 40px rgba(3,7,18,0.5)',
    },
  },
  // ── Light — 블루 액센트 유지, 밝은 글래스 ────────────────────
  light: {
    bg: { app: '#f2f5fb', card: '#ffffff', cardHover: '#f7f9fd', elevated: '#eef2f9', input: '#ffffff', sidebar: '#e9eef7', inset: '#e4e9f2', chassis: '#ffffff', crtBezel: '#dde3ee', crtGlass: '#eef2f9' },
    text: { primary: '#111827', secondary: '#4b5a75', label: '#6b7a95', disabled: '#b5bfd1', engraving: '#dde3ee', inactive: '#8593ab', dimLabel: '#5a6f96', muted: '#c3cddd', hover: '#2b3a55' },
    border: { subtle: 'rgba(30,58,138,0.07)', default: 'rgba(30,58,138,0.12)', strong: 'rgba(30,58,138,0.20)' },
    shadow: {
      card: '0 8px 30px rgba(30,58,138,0.08)',
      buttonBase: '0 1px 2px rgba(30,58,138,0.08)',
      chassis: '0 24px 80px rgba(30,58,138,0.10)',
      inset: 'inset 0 1px 4px rgba(30,58,138,0.06)',
      insetDeep: 'inset 0 2px 8px rgba(30,58,138,0.10)',
      buttonRaised: '0 2px 8px rgba(30,58,138,0.08), inset 0 1px 0 rgba(255,255,255,0.8)',
      buttonPressed: 'inset 0 2px 6px rgba(30,58,138,0.10)',
      screenGlow: 'inset 0 0 24px rgba(30,58,138,0.05)',
      tooltip: '0 8px 24px rgba(30,58,138,0.10)',
    },
    accent: { main: '#2563eb', dim: 'rgba(37,99,235,0.10)', glow: 'rgba(37,99,235,0.35)', light: '#3b82f6', dark: '#1d4ed8', crtPhosphor: '#2563eb', crtPhosphorDim: '#6f96e8' },
    glass: {
      surface: 'rgba(255,255,255,0.72)',
      raised: 'rgba(255,255,255,0.85)',
      hairline: 'rgba(30,58,138,0.10)',
      hairlineStrong: 'rgba(30,58,138,0.18)',
      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(37,99,235,0.08) 0%, transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 42%)',
      borderGradient: 'linear-gradient(135deg, rgba(37,99,235,0.45) 0%, rgba(30,58,138,0.14) 32%, rgba(30,58,138,0.08) 58%, rgba(37,99,235,0.18) 100%)',
      blur: '24px',
    },
    gradient: {
      accent: 'linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%)',
      logo: 'linear-gradient(90deg, #2563eb 0%, #6366f1 100%)',
      bar: 'linear-gradient(90deg, #06b6d4 0%, #2563eb 100%)',
      barAlt: 'linear-gradient(90deg, #7c3aed 0%, #c026d3 100%)',
      wave1: '#06b6d4', wave2: '#2563eb', wave3: '#7c3aed', wave4: '#d946ef',
    },
    glow: {
      accent: '0 0 0 1px rgba(37,99,235,0.25), 0 8px 24px rgba(37,99,235,0.25)',
      soft: '0 0 16px rgba(37,99,235,0.18)',
      card: '0 -6px 28px -12px rgba(37,99,235,0.18), 0 8px 30px rgba(30,58,138,0.08)',
      cardHover: '0 -8px 36px -10px rgba(37,99,235,0.28), 0 8px 30px rgba(30,58,138,0.10)',
    },
  },
  // ── Nord (https://www.nordtheme.com/) ──────────────────────
  nord: {
    bg: { app: '#242933', card: '#2e3440', cardHover: '#343b49', elevated: '#3b4252', input: '#2a303c', sidebar: '#272c37', inset: '#232830', chassis: '#2e3440', crtBezel: '#272c37', crtGlass: '#1f242d' },
    text: { primary: '#eceff4', secondary: '#aeb8cc', label: '#8b96ad', disabled: '#4c566a', engraving: '#242933', inactive: '#7b88a1', dimLabel: '#5e81ac', muted: '#434c5e', hover: '#e5e9f0' },
    border: { subtle: 'rgba(216,222,233,0.06)', default: 'rgba(216,222,233,0.10)', strong: 'rgba(216,222,233,0.16)' },
    shadow: {
      card: '0 12px 40px rgba(10,13,18,0.45)',
      buttonBase: '0 1px 2px rgba(10,13,18,0.4)',
      chassis: '0 24px 80px rgba(10,13,18,0.55)',
      inset: 'inset 0 1px 4px rgba(10,13,18,0.45)',
      insetDeep: 'inset 0 2px 8px rgba(10,13,18,0.65)',
      buttonRaised: '0 2px 8px rgba(10,13,18,0.3), inset 0 1px 0 rgba(216,222,233,0.06)',
      buttonPressed: 'inset 0 2px 6px rgba(10,13,18,0.55)',
      screenGlow: 'inset 0 0 24px rgba(10,13,18,0.5)',
      tooltip: '0 8px 24px rgba(10,13,18,0.45)',
    },
    accent: { main: '#88c0d0', dim: 'rgba(136,192,208,0.14)', glow: 'rgba(136,192,208,0.5)', light: '#a3d0de', dark: '#6aacbe', crtPhosphor: '#88c0d0', crtPhosphorDim: '#5e9daf' },
    glass: {
      surface: 'rgba(46,52,64,0.62)',
      raised: 'rgba(59,66,82,0.55)',
      hairline: 'rgba(216,222,233,0.09)',
      hairlineStrong: 'rgba(216,222,233,0.16)',
      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(136,192,208,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(216,222,233,0.05) 0%, rgba(216,222,233,0) 40%)',
      borderGradient: 'linear-gradient(135deg, rgba(160,205,220,0.55) 0%, rgba(216,222,233,0.14) 32%, rgba(216,222,233,0.06) 58%, rgba(136,192,208,0.22) 100%)',
      blur: '24px',
    },
    gradient: {
      accent: 'linear-gradient(135deg, #5e81ac 0%, #81a1c1 55%, #88c0d0 100%)',
      logo: 'linear-gradient(90deg, #88c0d0 0%, #81a1c1 100%)',
      bar: 'linear-gradient(90deg, #8fbcbb 0%, #5e81ac 100%)',
      barAlt: 'linear-gradient(90deg, #b48ead 0%, #d08770 100%)',
      wave1: '#8fbcbb', wave2: '#88c0d0', wave3: '#81a1c1', wave4: '#b48ead',
    },
    glow: {
      accent: '0 0 0 1px rgba(136,192,208,0.3), 0 8px 24px rgba(94,129,172,0.35)',
      soft: '0 0 16px rgba(136,192,208,0.22)',
      card: '0 -8px 32px -12px rgba(136,192,208,0.22), 0 12px 40px rgba(3,7,18,0.45)',
      cardHover: '0 -10px 40px -10px rgba(136,192,208,0.34), 0 12px 40px rgba(3,7,18,0.5)',
    },
  },
  // ── Solarized Dark (https://ethanschoonover.com/solarized/) ─
  solarized: {
    bg: { app: '#00212b', card: '#073642', cardHover: '#0a3e4c', elevated: '#0d4250', input: '#03303c', sidebar: '#012731', inset: '#001f28', chassis: '#073642', crtBezel: '#012731', crtGlass: '#001b22' },
    text: { primary: '#eee8d5', secondary: '#93a1a1', label: '#839496', disabled: '#586e75', engraving: '#00212b', inactive: '#657b83', dimLabel: '#7a6c2e', muted: '#073642', hover: '#b2c0bf' },
    border: { subtle: 'rgba(131,148,150,0.08)', default: 'rgba(131,148,150,0.13)', strong: 'rgba(131,148,150,0.20)' },
    shadow: {
      card: '0 12px 40px rgba(0,10,13,0.5)',
      buttonBase: '0 1px 2px rgba(0,10,13,0.45)',
      chassis: '0 24px 80px rgba(0,10,13,0.6)',
      inset: 'inset 0 1px 4px rgba(0,10,13,0.5)',
      insetDeep: 'inset 0 2px 8px rgba(0,10,13,0.7)',
      buttonRaised: '0 2px 8px rgba(0,10,13,0.35), inset 0 1px 0 rgba(238,232,213,0.05)',
      buttonPressed: 'inset 0 2px 6px rgba(0,10,13,0.6)',
      screenGlow: 'inset 0 0 24px rgba(0,10,13,0.55)',
      tooltip: '0 8px 24px rgba(0,10,13,0.5)',
    },
    accent: { main: '#b58900', dim: 'rgba(181,137,0,0.14)', glow: 'rgba(181,137,0,0.5)', light: '#d4a017', dark: '#8a6800', crtPhosphor: '#b58900', crtPhosphorDim: '#8a6800' },
    glass: {
      surface: 'rgba(7,54,66,0.62)',
      raised: 'rgba(13,66,80,0.55)',
      hairline: 'rgba(131,148,150,0.11)',
      hairlineStrong: 'rgba(131,148,150,0.19)',
      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(181,137,0,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(131,148,150,0.05) 0%, rgba(131,148,150,0) 40%)',
      borderGradient: 'linear-gradient(135deg, rgba(212,160,23,0.55) 0%, rgba(131,148,150,0.14) 32%, rgba(131,148,150,0.06) 58%, rgba(181,137,0,0.22) 100%)',
      blur: '24px',
    },
    gradient: {
      accent: 'linear-gradient(135deg, #8a6800 0%, #b58900 55%, #d4a017 100%)',
      logo: 'linear-gradient(90deg, #d4a017 0%, #cb4b16 100%)',
      bar: 'linear-gradient(90deg, #2aa198 0%, #268bd2 100%)',
      barAlt: 'linear-gradient(90deg, #6c71c4 0%, #d33682 100%)',
      wave1: '#2aa198', wave2: '#268bd2', wave3: '#6c71c4', wave4: '#d33682',
    },
    glow: {
      accent: '0 0 0 1px rgba(181,137,0,0.3), 0 8px 24px rgba(181,137,0,0.3)',
      soft: '0 0 16px rgba(181,137,0,0.22)',
      card: '0 -8px 32px -12px rgba(181,137,0,0.22), 0 12px 40px rgba(3,7,18,0.45)',
      cardHover: '0 -10px 40px -10px rgba(181,137,0,0.34), 0 12px 40px rgba(3,7,18,0.5)',
    },
  },
  // ── Catppuccin Mocha (https://catppuccin.com/) ──────────────
  catppuccin: {
    bg: { app: '#181825', card: '#1e1e2e', cardHover: '#242438', elevated: '#313244', input: '#191926', sidebar: '#161622', inset: '#11111b', chassis: '#1e1e2e', crtBezel: '#181825', crtGlass: '#0f0f18' },
    text: { primary: '#cdd6f4', secondary: '#a8b2d8', label: '#8a94bc', disabled: '#585b70', engraving: '#11111b', inactive: '#7f849c', dimLabel: '#585b70', muted: '#313244', hover: '#e6e9f8' },
    border: { subtle: 'rgba(205,214,244,0.05)', default: 'rgba(205,214,244,0.09)', strong: 'rgba(205,214,244,0.15)' },
    shadow: {
      card: '0 12px 40px rgba(5,5,12,0.5)',
      buttonBase: '0 1px 2px rgba(5,5,12,0.45)',
      chassis: '0 24px 80px rgba(5,5,12,0.6)',
      inset: 'inset 0 1px 4px rgba(5,5,12,0.5)',
      insetDeep: 'inset 0 2px 8px rgba(5,5,12,0.7)',
      buttonRaised: '0 2px 8px rgba(5,5,12,0.35), inset 0 1px 0 rgba(205,214,244,0.05)',
      buttonPressed: 'inset 0 2px 6px rgba(5,5,12,0.6)',
      screenGlow: 'inset 0 0 24px rgba(5,5,12,0.55)',
      tooltip: '0 8px 24px rgba(5,5,12,0.5)',
    },
    accent: { main: '#cba6f7', dim: 'rgba(203,166,247,0.14)', glow: 'rgba(203,166,247,0.5)', light: '#dfc0ff', dark: '#a67fd4', crtPhosphor: '#cba6f7', crtPhosphorDim: '#a67fd4' },
    glass: {
      surface: 'rgba(30,30,46,0.62)',
      raised: 'rgba(49,50,68,0.55)',
      hairline: 'rgba(205,214,244,0.08)',
      hairlineStrong: 'rgba(205,214,244,0.15)',
      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(203,166,247,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(205,214,244,0.05) 0%, rgba(205,214,244,0) 40%)',
      borderGradient: 'linear-gradient(135deg, rgba(215,185,255,0.55) 0%, rgba(205,214,244,0.14) 32%, rgba(205,214,244,0.06) 58%, rgba(203,166,247,0.22) 100%)',
      blur: '24px',
    },
    gradient: {
      accent: 'linear-gradient(135deg, #a67fd4 0%, #cba6f7 55%, #f5c2e7 100%)',
      logo: 'linear-gradient(90deg, #89b4fa 0%, #cba6f7 100%)',
      bar: 'linear-gradient(90deg, #89dceb 0%, #89b4fa 100%)',
      barAlt: 'linear-gradient(90deg, #cba6f7 0%, #f5c2e7 100%)',
      wave1: '#89dceb', wave2: '#89b4fa', wave3: '#cba6f7', wave4: '#f5c2e7',
    },
    glow: {
      accent: '0 0 0 1px rgba(203,166,247,0.3), 0 8px 24px rgba(203,166,247,0.3)',
      soft: '0 0 16px rgba(203,166,247,0.22)',
      card: '0 -8px 32px -12px rgba(203,166,247,0.22), 0 12px 40px rgba(3,7,18,0.45)',
      cardHover: '0 -10px 40px -10px rgba(203,166,247,0.34), 0 12px 40px rgba(3,7,18,0.5)',
    },
  },
  // ── Dracula (https://draculatheme.com/) ─────────────────────
  dracula: {
    bg: { app: '#1e2029', card: '#282a36', cardHover: '#2e3040', elevated: '#383a4a', input: '#232530', sidebar: '#21222c', inset: '#1b1c25', chassis: '#282a36', crtBezel: '#21222c', crtGlass: '#181a21' },
    text: { primary: '#f8f8f2', secondary: '#b6bdd9', label: '#8891b5', disabled: '#6272a4', engraving: '#21222c', inactive: '#6272a4', dimLabel: '#6272a4', muted: '#44475a', hover: '#ffffff' },
    border: { subtle: 'rgba(248,248,242,0.05)', default: 'rgba(248,248,242,0.09)', strong: 'rgba(248,248,242,0.15)' },
    shadow: {
      card: '0 12px 40px rgba(8,9,13,0.5)',
      buttonBase: '0 1px 2px rgba(8,9,13,0.45)',
      chassis: '0 24px 80px rgba(8,9,13,0.6)',
      inset: 'inset 0 1px 4px rgba(8,9,13,0.5)',
      insetDeep: 'inset 0 2px 8px rgba(8,9,13,0.7)',
      buttonRaised: '0 2px 8px rgba(8,9,13,0.35), inset 0 1px 0 rgba(248,248,242,0.06)',
      buttonPressed: 'inset 0 2px 6px rgba(8,9,13,0.6)',
      screenGlow: 'inset 0 0 24px rgba(8,9,13,0.55)',
      tooltip: '0 8px 24px rgba(8,9,13,0.5)',
    },
    accent: { main: '#bd93f9', dim: 'rgba(189,147,249,0.14)', glow: 'rgba(189,147,249,0.5)', light: '#d4b8ff', dark: '#9a70e0', crtPhosphor: '#bd93f9', crtPhosphorDim: '#9a70e0' },
    glass: {
      surface: 'rgba(40,42,54,0.62)',
      raised: 'rgba(56,58,74,0.55)',
      hairline: 'rgba(248,248,242,0.08)',
      hairlineStrong: 'rgba(248,248,242,0.15)',
      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(189,147,249,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(248,248,242,0.05) 0%, rgba(248,248,242,0) 40%)',
      borderGradient: 'linear-gradient(135deg, rgba(205,170,255,0.55) 0%, rgba(248,248,242,0.14) 32%, rgba(248,248,242,0.06) 58%, rgba(189,147,249,0.22) 100%)',
      blur: '24px',
    },
    gradient: {
      accent: 'linear-gradient(135deg, #9a70e0 0%, #bd93f9 55%, #ff79c6 100%)',
      logo: 'linear-gradient(90deg, #8be9fd 0%, #bd93f9 100%)',
      bar: 'linear-gradient(90deg, #8be9fd 0%, #bd93f9 100%)',
      barAlt: 'linear-gradient(90deg, #ff79c6 0%, #ffb86c 100%)',
      wave1: '#8be9fd', wave2: '#bd93f9', wave3: '#ff79c6', wave4: '#ffb86c',
    },
    glow: {
      accent: '0 0 0 1px rgba(189,147,249,0.3), 0 8px 24px rgba(189,147,249,0.3)',
      soft: '0 0 16px rgba(189,147,249,0.22)',
      card: '0 -8px 32px -12px rgba(189,147,249,0.22), 0 12px 40px rgba(3,7,18,0.45)',
      cardHover: '0 -10px 40px -10px rgba(189,147,249,0.34), 0 12px 40px rgba(3,7,18,0.5)',
    },
  },
}

// ── SSOT: d3roPalette — CSS Custom Properties로 테마 반응형 ──
// 컴포넌트에서 이 객체만 import하면 테마 자동 전환.
export const d3roPalette = {
  bg: {
    app: 'var(--d3-bg-app)',
    card: 'var(--d3-bg-card)',
    cardHover: 'var(--d3-bg-cardHover)',
    elevated: 'var(--d3-bg-elevated)',
    input: 'var(--d3-bg-input)',
    sidebar: 'var(--d3-bg-sidebar)',
    inset: 'var(--d3-bg-inset)',
    chassis: 'var(--d3-bg-chassis)',
    crtBezel: 'var(--d3-bg-crtBezel)',
    crtGlass: 'var(--d3-bg-crtGlass)',
  },
  accent: {
    /** 프라이머리 액센트 (v2 별칭 — amber와 동일 var) */
    main: 'var(--d3-accent-main)',
    light: 'var(--d3-accent-light)',
    dark: 'var(--d3-accent-dark)',
    dim: 'var(--d3-accent-dim)',
    /** @deprecated v2에서 main으로 개명 — 기존 사용처 호환용 별칭 */
    amber: 'var(--d3-accent-main)',
    amberDim: 'var(--d3-accent-dim)',
    amberGlow: 'var(--d3-accent-glow)',
    glow: 'var(--d3-accent-glow)',
  },
  /** v2: 글래스 표면 토큰 */
  glass: {
    surface: 'var(--d3-glass-surface)',
    raised: 'var(--d3-glass-raised)',
    hairline: 'var(--d3-glass-hairline)',
    hairlineStrong: 'var(--d3-glass-hairlineStrong)',
    sheen: 'var(--d3-glass-sheen)',
    borderGradient: 'var(--d3-glass-borderGradient)',
    blur: 'var(--d3-glass-blur)',
  },
  /** v2: 그라디언트 토큰 */
  gradient: {
    accent: 'var(--d3-gradient-accent)',
    logo: 'var(--d3-gradient-logo)',
    bar: 'var(--d3-gradient-bar)',
    barAlt: 'var(--d3-gradient-barAlt)',
    wave1: 'var(--d3-gradient-wave1)',
    wave2: 'var(--d3-gradient-wave2)',
    wave3: 'var(--d3-gradient-wave3)',
    wave4: 'var(--d3-gradient-wave4)',
  },
  /** v2: 글로우 토큰 */
  glow: {
    accent: 'var(--d3-glow-accent)',
    soft: 'var(--d3-glow-soft)',
    card: 'var(--d3-glow-card)',
    cardHover: 'var(--d3-glow-cardHover)',
  },
  tag: {
    purple: '#a78bfa',
    purpleBg: 'rgba(167, 139, 250, 0.12)',
    orange: '#fb923c',
    orangeBg: 'rgba(251, 146, 60, 0.12)',
    red: '#f87171',
    redBg: 'rgba(248, 113, 113, 0.12)',
    green: '#34d399',
    greenBg: 'rgba(52, 211, 153, 0.12)',
    blue: '#60a5fa',
    blueBg: 'rgba(96, 165, 250, 0.12)',
    greenGlow: 'rgba(52, 211, 153, 0.55)',
    redGlow: 'rgba(248, 113, 113, 0.55)',
    orangeGlow: 'rgba(251, 146, 60, 0.55)',
    purpleGlow: 'rgba(167, 139, 250, 0.55)',
    blueGlow: 'rgba(96, 165, 250, 0.55)',
  },
  text: {
    primary: 'var(--d3-text-primary)',
    secondary: 'var(--d3-text-secondary)',
    label: 'var(--d3-text-label)',
    disabled: 'var(--d3-text-disabled)',
    engraving: 'var(--d3-text-engraving)',
    inactive: 'var(--d3-text-inactive)',
    dimLabel: 'var(--d3-text-dimLabel)',
    muted: 'var(--d3-text-muted)',
    hover: 'var(--d3-text-hover)',
  },
  border: {
    subtle: 'var(--d3-border-subtle)',
    default: 'var(--d3-border-default)',
    strong: 'var(--d3-border-strong)',
  },
  crt: {
    phosphor: 'var(--d3-accent-crtPhosphor)',
    phosphorDim: 'var(--d3-accent-crtPhosphorDim)',
    scanline: 'rgba(0, 0, 0, 0.15)',
    bg: 'var(--d3-bg-chassis)',
  },
  led: {
    off: '#1c2336',
  },
} as const

export const d3roFontSans = [
  '"Pretendard Variable"', 'Pretendard', '-apple-system', 'BlinkMacSystemFont',
  '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif',
].join(',')

export const d3roFontMono = [
  'ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas',
  '"Liberation Mono"', 'monospace',
].join(',')

// ── SSOT: 타이포그래피 토큰 ─────────────────────────────
// v2: 클린 산세리프(Pretendard) 기반, 굵은 헤드라인 + 큰 수치
export const d3roTypo = {
  hero:    { size: '32px', weight: 700, spacing: '-0.5px',  line: 1.2 },
  title:   { size: '24px', weight: 700, spacing: '-0.3px',  line: 1.25 },
  value:   { size: '20px', weight: 600, spacing: '0',       line: 1.1 },
  heading: { size: '16px', weight: 600, spacing: '0',       line: 1.4 },
  body:    { size: '14px', weight: 400, spacing: '0',       line: 1.55 },
  compact: { size: '13px', weight: 400, spacing: '0',       line: 1.5 },
  small:   { size: '12px', weight: 500, spacing: '0.01em',  line: 1.4 },
  meta:    { size: '11px', weight: 600, spacing: '0.04em',  line: 1.3 },
  label:   { size: '11px', weight: 600, spacing: '0.08em',  line: 1.2 },
  engrave: { size: '9px',  weight: 700, spacing: '1px',     line: 1 },
  micro:   { size: '9px',  weight: 700, spacing: '1px',     line: 1 },
  nano:    { size: '8px',  weight: 700, spacing: '0.5px',   line: 1 },
} as const

/**
 * d3roTypo의 `{ size, weight, spacing, line }` 포맷을 MUI `sx` 호환
 * `{ fontSize, fontWeight, letterSpacing, lineHeight }`로 변환하는 헬퍼.
 */
export function typoSx(key: keyof typeof d3roTypo): {
  fontSize: string
  fontWeight: number
  letterSpacing: string
  lineHeight: number
} {
  const v = d3roTypo[key]
  return {
    fontSize: v.size,
    fontWeight: v.weight,
    letterSpacing: v.spacing,
    lineHeight: v.line
  }
}

// ── SSOT: 그림자 토큰 (CSS Custom Properties 기반, 테마 자동 전환) ───
export const d3roShadow = {
  chassis: 'var(--d3-shadow-chassis)',
  card: 'var(--d3-shadow-card)',
  inset: 'var(--d3-shadow-inset)',
  insetDeep: 'var(--d3-shadow-insetDeep)',
  buttonRaised: 'var(--d3-shadow-buttonRaised)',
  buttonPressed: 'var(--d3-shadow-buttonPressed)',
  buttonActive: 'var(--d3-shadow-buttonPressed)',
  dialog: 'var(--d3-shadow-card)',
  tooltip: 'var(--d3-shadow-tooltip)',
  screenGlow: 'var(--d3-shadow-screenGlow)',
  /** v2: 액센트 글로우 */
  glowAccent: 'var(--d3-glow-accent)',
  glowSoft: 'var(--d3-glow-soft)',
  glowCard: 'var(--d3-glow-card)',
  glowCardHover: 'var(--d3-glow-cardHover)',
} as const

// ── SSOT: 반경 토큰 ────────────────────────────────────
export const d3roRadius = {
  outer: '20px',
  card: '16px',
  inner: '12px',
  button: '10px',
  small: '8px',
  xs: '6px',
  pill: '999px',
} as const

// ── CSS Custom Properties 생성 ──────────────────────────
function buildCssVars(key: ThemeKey): Record<string, string> {
  const r = RAW[key]
  return {
    '--d3-bg-app': r.bg.app,
    '--d3-bg-card': r.bg.card,
    '--d3-bg-cardHover': r.bg.cardHover,
    '--d3-bg-elevated': r.bg.elevated,
    '--d3-bg-input': r.bg.input,
    '--d3-bg-sidebar': r.bg.sidebar,
    '--d3-bg-inset': r.bg.inset,
    '--d3-bg-chassis': r.bg.chassis,
    '--d3-bg-crtBezel': r.bg.crtBezel,
    '--d3-bg-crtGlass': r.bg.crtGlass,
    '--d3-text-primary': r.text.primary,
    '--d3-text-secondary': r.text.secondary,
    '--d3-text-label': r.text.label,
    '--d3-text-disabled': r.text.disabled,
    '--d3-text-engraving': r.text.engraving,
    '--d3-text-inactive': r.text.inactive,
    '--d3-text-dimLabel': r.text.dimLabel,
    '--d3-text-muted': r.text.muted,
    '--d3-text-hover': r.text.hover,
    '--d3-border-subtle': r.border.subtle,
    '--d3-border-default': r.border.default,
    '--d3-border-strong': r.border.strong,
    '--d3-shadow-card': r.shadow.card,
    '--d3-shadow-buttonBase': r.shadow.buttonBase,
    '--d3-shadow-chassis': r.shadow.chassis,
    '--d3-shadow-inset': r.shadow.inset,
    '--d3-shadow-insetDeep': r.shadow.insetDeep,
    '--d3-shadow-buttonRaised': r.shadow.buttonRaised,
    '--d3-shadow-buttonPressed': r.shadow.buttonPressed,
    '--d3-shadow-screenGlow': r.shadow.screenGlow,
    '--d3-shadow-tooltip': r.shadow.tooltip,
    '--d3-accent-main': r.accent.main,
    '--d3-accent-dim': r.accent.dim,
    '--d3-accent-glow': r.accent.glow,
    '--d3-accent-light': r.accent.light,
    '--d3-accent-dark': r.accent.dark,
    '--d3-accent-crtPhosphor': r.accent.crtPhosphor,
    '--d3-accent-crtPhosphorDim': r.accent.crtPhosphorDim,
    '--d3-glass-surface': r.glass.surface,
    '--d3-glass-raised': r.glass.raised,
    '--d3-glass-hairline': r.glass.hairline,
    '--d3-glass-hairlineStrong': r.glass.hairlineStrong,
    '--d3-glass-sheen': r.glass.sheen,
    '--d3-glass-borderGradient': r.glass.borderGradient,
    '--d3-glass-blur': r.glass.blur,
    '--d3-gradient-accent': r.gradient.accent,
    '--d3-gradient-logo': r.gradient.logo,
    '--d3-gradient-bar': r.gradient.bar,
    '--d3-gradient-barAlt': r.gradient.barAlt,
    '--d3-gradient-wave1': r.gradient.wave1,
    '--d3-gradient-wave2': r.gradient.wave2,
    '--d3-gradient-wave3': r.gradient.wave3,
    '--d3-gradient-wave4': r.gradient.wave4,
    '--d3-glow-accent': r.glow.accent,
    '--d3-glow-soft': r.glow.soft,
    '--d3-glow-card': r.glow.card,
    '--d3-glow-cardHover': r.glow.cardHover,
  }
}

// ── 테마 팩토리 ───────────────────────────────────────────
function createD3ROTheme(key: ThemeKey): Theme {
  // MUI palette.mode는 'dark' | 'light'만 허용. light 외 모두 dark 기반.
  const muiMode: 'dark' | 'light' = key === 'light' ? 'light' : 'dark'
  const r = RAW[key]
  const cssVars = buildCssVars(key)

  // 동적 accent 색상 (CSS 변수가 아직 주입되기 전이므로 RAW 값 직접 사용)
  const accentMain = r.accent.main
  const accentDim = r.accent.dim
  const accentLight = r.accent.light
  const accentDark = r.accent.dark

  return createTheme({
    palette: {
      mode: muiMode,
      primary: { main: accentMain, light: accentLight, dark: accentDark, contrastText: '#fff' },
      secondary: { main: d3roPalette.tag.purple, light: '#c4b5fd', dark: '#8b5cf6' },
      error: { main: d3roPalette.tag.red },
      warning: { main: d3roPalette.tag.orange },
      success: { main: d3roPalette.tag.green },
      background: { default: r.bg.app, paper: r.bg.card },
      text: { primary: r.text.primary, secondary: r.text.secondary, disabled: r.text.disabled },
      divider: r.border.default,
    },
    typography: {
      fontFamily: d3roFontSans,
      h4: { fontWeight: 700, fontSize: '22px', lineHeight: 1.3 },
      h5: { fontWeight: 700, fontSize: '18px', lineHeight: 1.4 },
      h6: { fontWeight: 600, fontSize: '14px', lineHeight: 1.5 },
      subtitle1: { fontWeight: 500, fontSize: '18px', lineHeight: 1.4 },
      body1: { fontSize: '14px', lineHeight: 1.5 },
      body2: { fontSize: '12px', lineHeight: 1.4 },
      button: { textTransform: 'none' as const, fontWeight: 600, fontSize: '14px' },
      caption: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.06em', color: r.text.label },
      overline: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' as const, lineHeight: 1.2 },
    },
    shape: { borderRadius: 16 },
    components: {
      MuiCssBaseline: {
        styleOverrides: {
          ':root': cssVars,
          body: { backgroundColor: r.bg.app, color: r.text.primary },
          // 보더리스 UI: 네이티브 스크롤바 제거 (레이아웃 폭 불변).
          // 시각적 스크롤 인디케이터는 OverlayScrollbars(고유 스타일)가 담당.
          '*::-webkit-scrollbar': { width: 0, height: 0, background: 'transparent' },
        },
      },
      MuiButton: {
        defaultProps: { disableElevation: true },
        styleOverrides: {
          root: {
            textTransform: 'none', fontWeight: 600, borderRadius: 10, padding: '10px 20px',
            transition: 'filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease',
          },
          containedPrimary: {
            color: '#fff',
            backgroundImage: 'var(--d3-gradient-accent)',
            boxShadow: 'var(--d3-glow-accent)',
            '&:hover': { filter: 'brightness(1.1)', boxShadow: 'var(--d3-glow-accent)' },
            '&:active': { filter: 'brightness(0.95)' },
            '&.Mui-disabled': { backgroundImage: 'none' },
          },
          outlined: {
            borderColor: 'var(--d3-glass-hairlineStrong)',
            backgroundColor: 'var(--d3-glass-raised)',
            color: r.text.primary,
            '&:hover': { borderColor: accentMain, color: accentLight, backgroundColor: 'var(--d3-glass-raised)' },
          },
          containedSecondary: {
            backgroundColor: r.bg.elevated,
            color: r.text.primary,
            border: `1px solid ${r.glass.hairline}`,
            '&:hover': { backgroundColor: r.bg.cardHover },
          },
        },
      },
      MuiCard: {
        defaultProps: { elevation: 0 },
        styleOverrides: {
          root: {
            position: 'relative',
            backgroundColor: 'var(--d3-glass-surface)',
            backdropFilter: 'blur(var(--d3-glass-blur))',
            borderRadius: 16,
            boxShadow: 'var(--d3-glow-card)',
            transition: 'box-shadow 0.25s ease',
            overflow: 'hidden',
            // 그라디언트 헤어라인 링 (MetalCard와 동일 기법)
            '&::after': {
              content: '""',
              position: 'absolute',
              inset: 0,
              borderRadius: 'inherit',
              padding: '1px',
              background: 'var(--d3-glass-borderGradient)',
              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
              WebkitMaskComposite: 'xor',
              maskComposite: 'exclude',
              pointerEvents: 'none',
            },
            '&:hover': { boxShadow: 'var(--d3-glow-cardHover)' },
          },
        },
      },
      MuiChip: {
        styleOverrides: {
          root: { borderRadius: 999, fontWeight: 600, fontSize: '11px', letterSpacing: '0.04em', height: 24 },
          colorPrimary: { backgroundColor: accentDim, color: accentLight },
          colorSecondary: { backgroundColor: d3roPalette.tag.purpleBg, color: d3roPalette.tag.purple },
          colorSuccess: { backgroundColor: d3roPalette.tag.greenBg, color: d3roPalette.tag.green },
          colorError: { backgroundColor: d3roPalette.tag.redBg, color: d3roPalette.tag.red },
          colorWarning: { backgroundColor: d3roPalette.tag.orangeBg, color: d3roPalette.tag.orange },
        },
      },
      MuiDrawer: { styleOverrides: { paper: { width: 240, backgroundColor: r.bg.sidebar, borderRight: `1px solid ${r.glass.hairline}` } } },
      MuiListItemButton: {
        styleOverrides: {
          root: {
            borderRadius: 12, marginLeft: 8, marginRight: 8,
            '&.Mui-selected': { backgroundColor: accentDim, color: accentLight, fontWeight: 600, '&:hover': { backgroundColor: accentDim } },
          },
        },
      },
      MuiDialog: {
        styleOverrides: {
          paper: {
            backgroundColor: r.bg.card, borderRadius: 20,
            backgroundImage: 'var(--d3-glass-sheen)',
            border: `1px solid ${r.glass.hairline}`,
            boxShadow: 'var(--d3-shadow-card)',
          },
        },
      },
      MuiBackdrop: {
        styleOverrides: {
          root: {
            backgroundColor: muiMode === 'dark' ? 'rgba(4,8,20,0.6)' : 'rgba(30,58,138,0.18)',
            backdropFilter: 'blur(8px)',
            '&.MuiBackdrop-invisible': { backgroundColor: 'transparent', backdropFilter: 'none' },
          },
        },
      },
      MuiTextField: {
        defaultProps: { size: 'small', variant: 'outlined' },
        styleOverrides: {
          root: {
            '& .MuiOutlinedInput-root': {
              backgroundColor: r.bg.input, borderRadius: 10,
              color: r.text.primary,
              '& fieldset': { borderColor: r.glass.hairline },
              '&:hover fieldset': { borderColor: r.glass.hairlineStrong },
              '&.Mui-focused fieldset': { borderColor: accentMain },
            },
          },
        },
      },
      MuiSelect: {
        styleOverrides: {
          select: { color: r.text.primary },
          icon: { color: r.text.secondary },
        },
      },
      MuiInputLabel: {
        styleOverrides: {
          root: { color: r.text.secondary, '&.Mui-focused': { color: accentMain } },
        },
      },
      MuiFormControlLabel: {
        styleOverrides: {
          label: { color: r.text.primary, fontSize: '14px' },
        },
      },
      MuiSwitch: {
        styleOverrides: {
          switchBase: {
            '&.Mui-checked': { color: accentMain },
            '&.Mui-checked + .MuiSwitch-track': { backgroundColor: accentMain },
          },
          track: { backgroundColor: r.text.disabled },
        },
      },
      MuiMenuItem: {
        styleOverrides: {
          root: {
            color: r.text.primary,
            '&.Mui-selected': { backgroundColor: accentDim },
          },
        },
      },
      MuiTooltip: {
        defaultProps: { arrow: true },
        styleOverrides: {
          tooltip: { backgroundColor: r.bg.elevated, color: r.text.primary, fontSize: '12px', borderRadius: 8, border: `1px solid ${r.glass.hairline}` },
        },
      },
      MuiTabs: { styleOverrides: { indicator: { backgroundColor: accentMain, height: 2, borderRadius: 2 } } },
      MuiTab: { styleOverrides: { root: { textTransform: 'none', fontWeight: 500, fontSize: '14px', '&.Mui-selected': { color: accentLight, fontWeight: 600 } } } },
      MuiPaper: {
        styleOverrides: {
          root: { backgroundImage: 'none' },
        },
      },
    },
  })
}

// ── Export ─────────────────────────────────────────────────
export const themes: Record<ThemeKey, Theme> = {
  dark: createD3ROTheme('dark'),
  light: createD3ROTheme('light'),
  nord: createD3ROTheme('nord'),
  solarized: createD3ROTheme('solarized'),
  catppuccin: createD3ROTheme('catppuccin'),
  dracula: createD3ROTheme('dracula'),
}

// 하위 호환 export
export const darkTheme = themes.dark
export const lightTheme = themes.light

export function getTheme(mode: ThemeMode, prefersDark = true): Theme {
  if (mode === 'auto') return prefersDark ? themes.dark : themes.light
  return themes[mode as ThemeKey] ?? themes.dark
}

export function getModePalette(mode: ThemeMode): RawTheme {
  return RAW[mode as ThemeKey] ?? RAW.dark
}