/*
 * 자동 생성 파일 — 손으로 고치지 마세요.
 * 생성 명령: bin/rails design:tokens
 * 출처: specs/design-tokens.yaml · specs/shared/types.yaml
 * docs/planning/05-design-system.md §1~§4·§7
 */

:root {
  /* 색 — 브랜드(밝은 모드) */
  --color-primary: #4338CA; /* 나비 인디고 — 버튼·동기됨·심볼 앞 날개 */
  --color-primary-pressed: #3730A3; /* 딥 인디고 — 버튼 눌림·흰 바탕 글자 */
  --color-accent: #FF6B5B; /* 나비 코랄 — 심볼 뒤 날개·포인트 면(글자색 아님) */
  --color-secondary: #FFC93C; /* 폴렌 옐로우 — 맞추는 중 */
  --color-error: #DC2626; /* 빨강 — 오류·끊김 전용 */
  --color-text: #17212B; /* 잉크 */
  --color-text-muted: #5B6B70; /* 안개 글자 */
  --color-background: #FFFFFF; /* 페이퍼 */
  --color-surface: #EEF3F2; /* 미스트 — 카드·구분선 */
  --color-background-dark: #0F1A1C; /* 다크 바탕(원본값, 다크 모드에서 사용) */
  --color-primary-dark: #818CF8; /* 밝힌 인디고(원본값, 다크 모드·어두운 바탕에서 사용) */
  --color-line: #DCE5E3; /* 옅은 테두리선 */
  --color-ink-2: #26343F; /* 잉크 배경 카드 안쪽 화면·입력창 */
  --color-ink-3: #3A4A56; /* 잉크 배경 카드 위 테두리·보조 선 */
  --color-ink-muted: #B8C4C9; /* 잉크 배경 위 안개 글자 */
  --color-indigo-50: #EEF2FF;
  --color-indigo-100: #E0E7FF;
  --color-indigo-300: #A5B4FC;
  --color-indigo-500: #4338CA;
  --color-indigo-700: #3730A3;
  --color-indigo-900: #1E1B4B;
  /* 중립 회색 단계(공개 화면 개편 · 면 50~200 · 선 200~300 · 글자 600 이상) */
  --color-grey-50: #F9FAFB;
  --color-grey-100: #F2F4F6;
  --color-grey-200: #E5E8EB;
  --color-grey-300: #D1D6DB;
  --color-grey-400: #B0B8C1;
  --color-grey-500: #8B95A1;
  --color-grey-600: #6B7684;
  --color-grey-700: #4E5968;
  --color-grey-800: #333D4B;
  --color-grey-900: #191F28;
  /* 포스터 자리표시 카드 배경 8색(design/project/Main.dc.html·Explore.dc.html) */
  --tint-1: #D9EFEB;
  --tint-2: #F4E9D2;
  --tint-3: #E6E4F4;
  --tint-4: #F6DCD6;
  --tint-5: #DCE8F6;
  --tint-6: #E8F0D9;
  --tint-7: #F1E0EC;
  --tint-8: #E0ECEA;
  /* 색 — 상태 4색(docs/planning/05 §1.2, 색+아이콘+글자 3중의 색 부분) */
  --color-status-success: #10B981;
  --color-status-progress: #3B82F6;
  --color-status-error: #EF4444;
  --color-status-inactive: #9CA3AF;
  --color-status-warning: #F59E0B;
  /* 색 — 서포터 카드 10색(참여 금액 10가지 하나하나에 고유한 색 · ESG-SUP-2) */
  --color-supporter-1: #FFF3B8;
  --color-supporter-2: #FFE0A3;
  --color-supporter-3: #FFC9B8;
  --color-supporter-4: #FFB3C6;
  --color-supporter-5: #F3B3E0;
  --color-supporter-6: #D9B8F5;
  --color-supporter-7: #B8C6F5;
  --color-supporter-8: #A8DDF0;
  --color-supporter-9: #A8E6CF;
  --color-supporter-10: #D4F0A8;
  /* 타이포 */
  --font-family-ko: Pretendard Variable, Noto Sans KR, sans-serif;
  --font-family-brand: Pretendard Variable, Noto Sans KR, sans-serif;
  --font-family-mono: IBM Plex Mono, monospace;
  --font-size-body: 17px;
  --font-size-body-deaf: 20px;
  --font-size-caption: 14px;
  --font-size-title-md: 28px;
  --font-size-title-lg: 36px;
  --font-size-title-xl: 48px;
  --font-size-code: 16px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* 모양 — 반경·터치 크기 */
  --radius-card: 12px;
  --radius-sheet: 24px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --button-height: 56px;
  --touch-target-min: 44px;
  /* 간격 — 8px 그리드(05 문서에는 없는 공용 값) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  /* 그림자 — 섬세하게(05 문서에는 없는 공용 값) */
  --shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.06);
  --shadow-md: 0 4px 8px rgba(23, 33, 43, 0.10);
  --shadow-lg: 0 12px 24px rgba(23, 33, 43, 0.14);
  /* 모션 — docs/planning/05 §3·§7 */
  --motion-duration-synced-flap: 300ms;
  --motion-timing-default: ease-out;
  --motion-duration-syncing-flap: 1.2s;
  /* 금지된 모션: 지속 회전, 3Hz 미만 깜빡임, 자동 재생 비디오 */
}

/* 다크 모드 — docs/planning/05-design-system.md §7 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 다크 모드에서 다시 정의하는 값만 적습니다 */
    --color-background: #0F1A1C;
    --color-primary: #818CF8;
    --color-text: #FFFFFF; /* 밝은 바탕색을 다크 모드 글자색으로 재사용 */
  }
}

/* 시네마 테마(어두운 영화관 분위기) — 공개 화면 · 내 메뉴(body.theme-cinema) · docs/planning/05 §8 */
.theme-cinema {
  /* 색 — 어두운 바탕에 맞춰 다시 정하는 값 */
  --color-background: #0B0D10;
  --color-text: #F2F4F6;
  --color-text-muted: #A7B0BA;
  --color-surface: #15191E;
  --color-line: #2A3038;
  --color-primary: #818CF8;
  --color-primary-pressed: #A5B4FC;
  --color-accent: #FF6B5B;
  --color-error: #F87171;
  --color-indigo-50: #151737;
  --color-indigo-100: #1E2150;
  --color-indigo-300: #4F46E5;
  --color-indigo-500: #818CF8;
  --color-indigo-700: #A5B4FC;
  --color-indigo-900: #E0E7FF;
  --color-grey-50: #111418;
  --color-grey-100: #171B21;
  --color-grey-200: #20262D;
  --color-grey-300: #2D343D;
  --color-grey-400: #4A535E;
  --color-grey-500: #6F7985;
  --color-grey-600: #9AA4AF;
  --color-grey-700: #C3CAD2;
  --color-grey-800: #E1E5EA;
  --color-grey-900: #F5F6F8;
  --tint-1: #17302D;
  --tint-2: #33291A;
  --tint-3: #25233F;
  --tint-4: #3A211D;
  --tint-5: #1B2A40;
  --tint-6: #26331B;
  --tint-7: #35202F;
  --tint-8: #1A2E2C;
  /* 모양 — 모서리를 조금 더 반듯하게 */
  --radius-card: 8px;
  --radius-lg: 12px;
  --radius-sheet: 16px;
  /* 그림자 — 어두운 바탕에서도 보이게 짙게 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* 모션 최소화 — docs/planning/05-design-system.md §5.8 · 3.2 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}