/* ============================================================
   theme.css — sphotoeditor V2 디자인 토큰 이식본
   출처: sphotoeditor/V2 apps/web/src/app/theme.css (Tailwind v4 @theme)
   라이트 테마 전용 (에디터는 V2에서도 라이트 강제)
   ============================================================ */
:root {
  /* --- 브랜드 골드 (기준 #FFD400) --- */
  --gold-50:  #FFFCEB;
  --gold-100: #FFF6C2;
  --gold-200: #FFEC8A;
  --gold-300: #FFE25C;
  --gold-400: #FFDB2E;
  --gold-500: #FFD400;
  --gold-600: #E5B800;
  --gold-700: #A38300;
  --gold-800: #7D6400;
  --gold-900: #5E4B00;
  --gold-950: #332B00;

  /* --- 중립 무채색 회색 --- */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E8E8E8;
  --neutral-300: #D6D6D6;
  --neutral-400: #A6A6A6;
  --neutral-500: #7A7A7A;
  --neutral-600: #5C5C5C;
  --neutral-700: #464646;
  --neutral-800: #303030;
  --neutral-900: #1F1F1F;
  --neutral-950: #141414;

  /* --- 상태색 (500 / 300 / 100) --- */
  --blue-500: #2E6FE0;   --blue-300: #7FA8F0;   --blue-100: #DEE9FC;
  --orange-500: #D97A1F; --orange-300: #F0A85C; --orange-100: #FCEBD8;
  --green-500: #2E8B57;  --green-300: #6FC492;  --green-100: #DDF2E5;
  --red-500: #D14343;    --red-300: #EE8A8A;    --red-100: #FBE3E3;

  /* --- 에디터 크롬 --- */
  --chrome-base: #FFFFFF;     /* 탑바 / 아이콘 레일 / 하단바 */
  --chrome-panel: #FFFFFF;    /* 슬라이드 패널 */
  --chrome-elevated: #FFFFFF; /* 플로팅 팝오버/툴바 */
  --chrome-canvas: #EEEEEC;   /* 워크스페이스 배경 */
  --chrome-border: #E5E5E3;
  --chrome-hover: #F4F4F2;

  /* --- 시맨틱 레이어 --- */
  --surface-0: #FFFFFF;
  --surface-1: var(--neutral-50);
  --surface-2: var(--neutral-100);
  --surface-3: var(--neutral-200);
  --text-1: var(--neutral-900);
  --text-2: var(--neutral-600);
  --text-3: var(--neutral-400);
  --text-inverse: #FFFFFF;
  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --brand: var(--gold-800);
  --brand-cta: var(--gold-500);
  --brand-cta-hover: var(--gold-600);
  --brand-cta-text: var(--gold-950);
  --brand-subtle: var(--gold-100);
  --focus-ring: var(--gold-600);
  --danger: var(--red-500);
  --success: var(--green-500);
  --warning: var(--orange-500);
  --info: var(--blue-500);

  /* --- radius --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- 모션 --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;

  /* --- 타이포 --- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.875rem;   /* 14px — 본문 기본 */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.5rem;       /* 24px */
  --tracking-snug: -0.01em;
  --tracking-tight: -0.018em;

  /* --- 그림자 (오버레이·부유 요소 전용 — 카드는 보더로 엘리베이션) --- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.16);
}