/* =========================================================
   Green Egg — Design Tokens
   Figma "design system" Variables 기반 (Color/Type/Radius/Spacing)
   ========================================================= */

:root {
  /* ---------- 01. Color Palettes ---------- */
  /* Primary */
  --primary-50:  #F0FDF4;
  --primary-100: #DCFCE7;
  --primary-200: #BBF7D0;
  --primary-300: #86EFAC;
  --primary-400: #4ADE80;
  --primary-500: #22C55E;
  --primary-600: #16A34A;
  --primary-700: #15803D;
  --primary-800: #1A4E32;
  --primary-900: #103D24;
  --primary-950: #052E16;

  /* Green */
  --green-50:  #ECFDF5;
  --green-100: #D1FAE5;
  --green-200: #A7F3D0;
  --green-300: #6EE7B7;
  --green-400: #34D399;
  --green-500: #10B981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065F46;
  --green-900: #064E3B;
  --green-950: #022C22;

  /* Gray */
  --gray-white: #FFFFFF;
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --gray-950: #09090B;
  --gray-black: #000000;

  /* Red */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;

  /* Yellow */
  --yellow-50:  #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;

  /* ---------- 02. Color Theme (Semantic) ---------- */
  --background:             var(--gray-50);

  --surface:                var(--gray-white);
  --surface-low:            var(--gray-50);
  --surface-high:           var(--gray-100);
  --surface-primary:        var(--primary-800);   /* Figma: Surface/Surface Primary — 브랜드 면(배경) */

  /* Figma: On Surface Container/On Surface Container Primary* — 브랜드 글자·선 (구 Primary 그룹)
     CSS 이름은 기존 규칙대로 "Container" 생략: On Surface Container Low → --on-surface-low 와 같은 방식 */
  --on-surface-primary:           var(--primary-800);
  --on-surface-primary-bright:    var(--primary-700);
  --on-surface-primary-brightest: var(--primary-600);
  --on-surface-primary-high:      var(--primary-950);

  --on-surface-black:       var(--gray-black);
  --on-surface-high:        var(--gray-950);
  --on-surface:             var(--gray-900);
  --on-surface-low:         var(--gray-600);
  --on-surface-lowest:      var(--gray-500);   /* Figma On Surface Container Lowest = Gray-500 (09.25 동기화, 이전 400) */
  --on-surface-white:       var(--gray-white);
  --on-surface-inverse:     var(--gray-white);   /* Figma: On Surface Container Inverse — Gray 타입 버튼 글자 · 아이콘 (Dark = Gray-900, 09.25) */
  --on-surface-light-gray:  var(--gray-200);   /* Figma: On Surface Container Light Gray — 카드 · 모달 등번호 배경 숫자 (09.25) */
  --on-surface-red:         var(--red-700);
  --on-surface-red-low:     var(--red-500);
  --on-surface-green:       var(--green-700);
  --on-surface-green-low:   var(--green-500);
  --on-surface-yellow:      var(--yellow-700);
  --on-surface-yellow-low:  var(--yellow-500);

  --outline:                var(--gray-200);   /* 카드 · 구분선 (장식) */
  --outline-input:          var(--gray-500);   /* Figma: Outline Input — 입력칸 · 드롭다운 · 체크 · 라디오 경계 (흰 배경 4.83:1, 09.25) */
  --outline-highest:        var(--gray-900);
  --outline-red:            var(--red-700);       /* Figma: Outline Red — 입력 Error 테두리 */

  /* State (Figma: Disabled · State-Hover는 09.24 Figma에서 삭제 → 버튼 Hover는 밑줄로 구분) */
  --disabled:              rgb(9 9 11 / .2);     /* gray-950 20% — Figma 모달 딤 레이어에 사용 */

  /* Buttons */
  --primary-btn:            var(--primary-800);
  --primary-btn-hover:      var(--primary-700);
  --primary-btn-active:     var(--primary-800);
  --primary-btn-disabled:   var(--primary-50);    /* Figma 09.23 변경: 700 → 50 */

  --gray-btn:               var(--gray-white);
  --gray-btn-hover:         var(--gray-50);
  --gray-btn-active:        var(--gray-100);
  --gray-btn-disabled:      var(--gray-white);

  /* ---------- 03. Typography ---------- */
  --font-title: "Archivo Black", "Wanted Sans Variable", "Wanted Sans", system-ui, sans-serif;
  --font-main:  "Wanted Sans Variable", "Wanted Sans", system-ui, -apple-system, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --display-lg: 57px;
  --display-md: 52px;
  --display-sm: 36px;
  --headline-lg: 32px;
  --headline-md: 28px;
  --headline-sm: 24px;
  --title-lg: 28px;
  --title-md: 24px;
  --title-sm: 20px;
  --body-lg: 16px;
  --body-md: 14px;
  --body-sm: 12px;
  --label-lg: 16px;
  --label-md: 14px;
  --label-sm: 12px;

  /* ---------- 04. Radius ---------- */
  --radius-00: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-xxl: 64px;
  --radius-round: 999px;

  /* ---------- 05. Spacing ---------- */
  --space-000: 0px;
  --space-020: 2px;
  --space-040: 4px;
  --space-080: 8px;
  --space-100: 10px;
  --space-120: 12px;
  --space-160: 16px;
  --space-200: 20px;
  --space-240: 24px;
  --space-280: 28px;
  --space-320: 32px;
  --space-360: 36px;
  --space-400: 40px;
  --space-480: 48px;
  --space-640: 64px;
  --space-800: 80px;
}

/* ---------- Mobile type scale (≤560px): shrink large type, keep body readable ---------- */
@media (max-width: 559.98px) {
  :root {
    --display-lg: 40px; --display-md: 36px; --display-sm: 28px;
    --headline-lg: 26px; --headline-md: 23px; --headline-sm: 20px;
    --title-lg: 22px; --title-md: 20px; --title-sm: 18px;
    --body-lg: 15px;
    --label-md: 13px; --label-sm: 11px;
  }
}

/* ---------- 02. Color Theme — Dark Mode (Figma 09.25 · OS/브라우저 설정 따라 자동) ----------
   원칙: 면은 배경보다 밝게(950 → 900 → 800) · 글자 · 상태색은 밝은 단계로 · 초록 면(Surface Primary · Primary 버튼)과
   On Surface White(사진 · 초록 면 위 글자)는 모드 무관. 값은 Figma 02. Color Theme / Dark Mode와 1:1 */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --background:             var(--gray-950);
    --surface:                var(--gray-900);
    --surface-low:            var(--gray-950);
    --surface-high:           var(--gray-800);

    --on-surface-primary:           var(--primary-400);
    --on-surface-primary-bright:    var(--primary-300);
    --on-surface-primary-brightest: var(--primary-200);
    --on-surface-primary-high:      var(--primary-100);

    --on-surface-black:       var(--gray-white);
    --on-surface-high:        var(--gray-50);
    --on-surface:             var(--gray-100);
    --on-surface-low:         var(--gray-400);
    --on-surface-inverse:     var(--gray-900);
    --on-surface-light-gray:  var(--gray-700);
    --on-surface-red:         var(--red-400);
    --on-surface-green:       var(--green-400);
    --on-surface-yellow:      var(--yellow-400);

    --outline:                var(--gray-700);
    --outline-highest:        var(--gray-100);
    --outline-red:            var(--red-400);

    --disabled:               rgb(0 0 0 / .6);

    --primary-btn-disabled:   var(--primary-950);
    --gray-btn:               var(--gray-800);
    --gray-btn-hover:         var(--gray-700);
    --gray-btn-active:        var(--gray-600);
    --gray-btn-disabled:      var(--gray-800);
  }
}