/* ══════════════════════════════════════════════════════════════
   tokens.css — 디자인 토큰 (시안 A · 클린 카드)
   (주) 두드림원 직원 포털

   색·간격·글꼴을 여기 한 곳에서만 정의합니다.
   다른 CSS 파일은 반드시 var(--...) 로만 색을 씁니다.
   → 나중에 색을 바꾸고 싶으면 이 파일만 고치면 전체가 바뀝니다.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── 브랜드 ─────────────────────────────── */
  --brand:        #5B5BD6;   /* 기본 보라 (기존 #8b7ff0 보다 채도를 낮춰 글자 대비를 확보) */
  --brand-strong: #4A4AC4;   /* 눌렀을 때 */
  --brand-soft:   #EEEEFB;   /* 옅은 배경 */
  --brand-line:   #D3D3F4;   /* 옅은 테두리 */

  /* ── 바탕과 면 ──────────────────────────── */
  --bg:        #F4F5F8;
  --surface:   #FFFFFF;
  --surface-2: #FAFBFC;      /* 입력창 등 살짝 눌린 면 */
  --line:      #E5E8EE;
  --line-soft: #EDF0F4;

  /* ── 글자 ───────────────────────────────── */
  --ink:   #1E2129;          /* 제목 */
  --ink-2: #4A5060;          /* 본문 */
  --ink-3: #868D9E;          /* 보조 설명 */
  --ink-4: #A3A9B8;          /* 가장 흐린 것 (푸터 등) */
  --on-brand: #FFFFFF;

  /* ── 상태색 (브랜드색과 별개로 의미를 전달) ── */
  --danger:      #E5484D;
  --danger-soft: #FBE4E5;
  --success:     #12A150;
  --success-soft:#E1F4E9;
  --warn:        #E07B39;
  --warn-soft:   #FCEDDF;
  --info:        #2F6BE0;
  --info-soft:   #E3EDFB;

  /* ── 메뉴 아이콘 배경 (시안 A 그대로) ────── */
  --ic-gate:   #E3EDFB;
  --ic-ev:     #E1F4E9;
  --ic-emp:    #EDE8FB;
  --ic-submit: #FCEDDF;
  --ic-leave:  #FBE4E5;
  --ic-notice: #DDF2F1;
  --ic-vote:   #F0E7FF;
  --ic-board:  #E6EAF3;

  /* ── 글꼴 ───────────────────────────────── */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
          "Noto Sans KR", sans-serif;
  --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── 글자 크기 (모바일 기준 고정 스케일) ── */
  --fs-xs:  11px;
  --fs-sm:  12.5px;
  --fs-md:  14px;
  --fs-lg:  16px;   /* iOS 입력창 자동 확대를 막으려면 input 은 반드시 16px 이상 */
  --fs-xl:  20px;
  --fs-2xl: 23px;

  /* ── 간격 ───────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 11px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  /* ── 모서리 ─────────────────────────────── */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ── 그림자 ─────────────────────────────── */
  --sh-1: 0 1px 2px rgba(30, 33, 41, .05);
  --sh-2: 0 1px 3px rgba(30, 33, 41, .05);
  --sh-3: 0 4px 16px rgba(30, 33, 41, .09);
  --sh-brand: 0 3px 10px rgba(91, 91, 214, .28);

  /* ── 최소 터치 영역 (애플·구글 접근성 권고) ── */
  --tap: 44px;

  /* ── 화면 최대 폭 (태블릿·PC 에서 지나치게 늘어나지 않게) ── */
  --page-max: 520px;
}

/* ══════════════════════════════════════════════════════════════
   다크 모드
   시안 C(나이트 시프트)의 취지를 옵션으로 담아둡니다.
   기본값은 "기기 설정 따라감"이고, 설정에서 강제 지정도 가능합니다.
   ── 색 정의는 전부 여기에서만. 컴포넌트 CSS 는 손대지 않습니다.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:        #8B8BEE;
    --brand-strong: #A0A0F5;
    --brand-soft:   #23243A;
    --brand-line:   #383A5C;

    --bg:        #0D1014;
    --surface:   #161B22;
    --surface-2: #1B212A;
    --line:      #242B35;
    --line-soft: #1E242D;

    --ink:   #E6EAF0;
    --ink-2: #B4BDCA;
    --ink-3: #7E8A9A;
    --ink-4: #5C6675;
    --on-brand: #0D1014;

    --danger:      #F26D71;
    --danger-soft: #3A1F21;
    --success:     #3DD68C;
    --success-soft:#12301F;
    --warn:        #F0883E;
    --warn-soft:   #3A2617;
    --info:        #5E9BF5;
    --info-soft:   #16263F;

    --ic-gate:   #1B2836;
    --ic-ev:     #162C22;
    --ic-emp:    #241F3A;
    --ic-submit: #33261A;
    --ic-leave:  #341E20;
    --ic-notice: #142E2C;
    --ic-vote:   #271C3A;
    --ic-board:  #1D232E;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 3px rgba(0, 0, 0, .4);
    --sh-3: 0 4px 16px rgba(0, 0, 0, .5);
    --sh-brand: 0 3px 10px rgba(139, 139, 238, .22);
  }
}

:root[data-theme="dark"] {
  --brand:        #8B8BEE;
  --brand-strong: #A0A0F5;
  --brand-soft:   #23243A;
  --brand-line:   #383A5C;

  --bg:        #0D1014;
  --surface:   #161B22;
  --surface-2: #1B212A;
  --line:      #242B35;
  --line-soft: #1E242D;

  --ink:   #E6EAF0;
  --ink-2: #B4BDCA;
  --ink-3: #7E8A9A;
  --ink-4: #5C6675;
  --on-brand: #0D1014;

  --danger:      #F26D71;
  --danger-soft: #3A1F21;
  --success:     #3DD68C;
  --success-soft:#12301F;
  --warn:        #F0883E;
  --warn-soft:   #3A2617;
  --info:        #5E9BF5;
  --info-soft:   #16263F;

  --ic-gate:   #1B2836;
  --ic-ev:     #162C22;
  --ic-emp:    #241F3A;
  --ic-submit: #33261A;
  --ic-leave:  #341E20;
  --ic-notice: #142E2C;
  --ic-vote:   #271C3A;
  --ic-board:  #1D232E;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 3px rgba(0, 0, 0, .4);
  --sh-3: 0 4px 16px rgba(0, 0, 0, .5);
  --sh-brand: 0 3px 10px rgba(139, 139, 238, .22);
}