/* ============================================================================
   쿡클립(CookClip) 디자인 토큰  v1.0.0  (2026-09-15)
   단일 원본(Single Source of Truth). 모든 컴포넌트는 이 변수만 사용한다.
   HEX 하드코딩 금지 — 새 값이 필요하면 이 파일에 토큰을 먼저 추가한다.

   컨셉: "색인 카드와 작업대(Index Card & Workbench)"
     스테인리스 조리대처럼 차갑고 깨끗한 딥 틸 + 노른자 액센트 한 점.
     선(1px) 우선, 광택·그라데이션·그림자 남용 금지, 라운드로 위계를 만든다.

   구조
     1) :root                      = 라이트(기본). 앱·랜딩 모두 라이트가 기본이다.
     2) html[data-theme="dark"]    = 다크. v1 에서는 토큰 정의만 하고 UI 스위치는 후속(v1.1).
     3) @media (prefers-color-scheme: dark) + html:not([data-theme="light"])
                                   = OS 다크 선호 시 보조 적용.

   배치 위치: src/main/resources/static/css/cc-tokens.css
   CSP: default-src 'self'; style-src 'self' — 외부 CDN·인라인 style 금지.
   ========================================================================== */

/* ==========================================================================
   1. 라이트 (기본)
   ========================================================================== */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* ---- 1.1 서피스(작업대) ------------------------------------------------ */
  --cc-paper:          #FFFFFF;   /* 색인 카드·시트·모달 = 종이 */
  --cc-surface:        #F3F5F4;   /* 앱 배경 = 작업대 */
  --cc-surface-sunk:   #E7EBE9;   /* 함몰면: 입력칸 바닥, 빈 슬롯, 트랙 */
  --cc-surface-raised: #FFFFFF;   /* 다크에서 카드가 배경보다 밝아지는 자리(라이트는 paper 와 동일) */
  --cc-scrim:          rgba(11,44,56,.46);   /* 모달 뒤 가림막 */

  /* ---- 1.2 잉크(글자) ---------------------------------------------------- */
  --cc-ink:            #101A18;   /* 본문        17.75:1 / paper */
  --cc-ink-muted:      #5B6764;   /* 보조·플레이스홀더  5.88:1 / paper · 4.89:1 / sunk */
  --cc-ink-faint:      #7E8985;   /* 비활성·장식 글리프 3.62:1 / paper — 본문 금지 */
  --cc-on-brand:       #FFFFFF;   /* 브랜드 채움 위 글자 */
  --cc-on-accent:      #101A18;   /* 노른자 채움 위 글자(라이트·다크 동일) */
  --cc-on-danger:      #FFFFFF;

  /* ---- 1.3 선 ------------------------------------------------------------ */
  --cc-line:           #D6DCD9;   /* 기본 구분선·카드 테두리(장식) */
  --cc-line-strong:    #B4BEBA;   /* 섹션 경계·표 머리 */
  --cc-line-field:     #788A83;   /* 폼 컨트롤 테두리 3.64:1 / paper — 1.4.11 충족 */
  --cc-line-rule:      #DDEAEF;   /* 색인 카드 괘선(브랜드 톤) */

  /* ---- 1.4 브랜드 램프(딥 틸) -------------------------------------------- */
  --cc-brand-900:      #0B2C38;   /* 쿡모드 배경·최심부 */
  --cc-brand-700:      #124559;   /* 브랜드 기준색 */
  --cc-brand-500:      #2C6B83;
  --cc-brand-200:      #C3DBE4;
  --cc-brand-100:      #DDEAEF;   /* 소프트 배경(AI 배지) */

  /* ---- 1.5 브랜드 역할 --------------------------------------------------- */
  --cc-brand-text:     #124559;   /* 링크·강조 텍스트 10.39:1 */
  --cc-brand-fill:     #124559;   /* 기본 버튼 배경 (흰글자 10.39:1) */
  --cc-brand-fill-hover:  #0F3A4A;
  --cc-brand-fill-active: #0B2C38;
  --cc-brand-line:     #124559;   /* 브랜드 채움 요소의 경계 */
  --cc-brand-soft:     #DDEAEF;
  --cc-brand-soft-text:#124559;   /* 8.46:1 / brand-soft */
  --cc-brand-soft-line:#C3DBE4;

  /* ---- 1.6 액센트(노른자) — 화면당 1회 ----------------------------------- */
  --cc-accent:         #F2C14E;   /* 채움 (ink 10.58:1) */
  --cc-accent-hover:   #E4B240;   /* (ink 9.08:1) */
  --cc-accent-active:  #D6A736;   /* (ink 7.98:1) */
  --cc-accent-line:    #A78020;   /* 액센트 채움의 경계 3.65:1 / paper */
  --cc-accent-text:    #846519;   /* 밝은 배경 위 앰버 글자 5.45:1 */
  --cc-accent-soft:    #FBF1DC;
  --cc-accent-soft-line: #EAD9AE;

  /* ---- 1.7 상태색 -------------------------------------------------------- */
  --cc-success:        #2B7656;   /* 글자 5.49:1 / 채움 위 흰글자 5.49:1 */
  --cc-success-soft:   #E4F2EB;
  --cc-success-line:   #A6D4C0;
  --cc-warning:        #8D6115;   /* 글자 5.45:1 */
  --cc-warning-solid:  #B07C15;   /* 아이콘·경고 바 3.66:1 / paper */
  --cc-warning-soft:   #F7F0E2;
  --cc-warning-line:   #E4CA96;
  --cc-danger:         #B23A29;   /* 글자 5.95:1 / 채움 위 흰글자 5.95:1 */
  --cc-danger-solid:   #B23A29;   /* 파괴 버튼 채움 (흰글자 5.95:1) */
  --cc-danger-soft:    #F8E9E7;
  --cc-danger-line:    #DCA59E;
  --cc-info:           #2C6B83;   /* 글자 5.94:1 */
  --cc-info-soft:      #E4F0F5;
  --cc-info-line:      #A4C8D5;

  /* ---- 1.8 태그 8색 (모두 paper·surface 위 4.5:1 이상) -------------------- */
  --cc-tag-1: #124559;  --cc-tag-1-soft: #E4EFF4;   /* 딥틸   10.39:1 */
  --cc-tag-2: #2B7656;  --cc-tag-2-soft: #E6F1ED;   /* 그린    5.49:1 */
  --cc-tag-3: #82642C;  --cc-tag-3-soft: #F2EEE6;   /* 브라운  5.51:1 */
  --cc-tag-4: #B23A29;  --cc-tag-4-soft: #F3E6E4;   /* 레드    5.95:1 */
  --cc-tag-5: #6B4C8A;  --cc-tag-5-soft: #ECE8EF;   /* 퍼플    6.94:1 */
  --cc-tag-6: #2C6B83;  --cc-tag-6-soft: #E6EFF2;   /* 틸      5.94:1 */
  --cc-tag-7: #77675A;  --cc-tag-7-soft: #EEECEA;   /* 토프    5.42:1 */
  --cc-tag-8: #3F4A47;  --cc-tag-8-soft: #EBEDEC;   /* 슬레이트 9.20:1 */

  /* ---- 1.9 포커스 -------------------------------------------------------- */
  --cc-focus:          #124559;
  --cc-focus-offset:   #FFFFFF;   /* 링과 컴포넌트 사이 간격색 = 배경색 */
  --cc-focus-ring:     2px solid var(--cc-focus);

  /* ---- 1.10 그림자 (차가운 틸블랙, 3단) ---------------------------------- */
  --cc-shadow-1: 0 1px 2px rgba(16,26,24,.06), 0 1px 1px rgba(16,26,24,.04);
  --cc-shadow-2: 0 4px 12px -2px rgba(16,26,24,.10), 0 2px 4px -2px rgba(16,26,24,.06);
  --cc-shadow-3: 0 16px 32px -12px rgba(16,26,24,.16), 0 4px 10px -6px rgba(16,26,24,.08);

  /* ---- 1.11 이미지 플레이스홀더 ------------------------------------------ */
  --cc-shimmer: rgba(255,255,255,.45);
  --cc-ph-bg:   #E7EBE9;
  --cc-ph-ink:  #7E8985;
}

/* ==========================================================================
   2. 다크 (v1: 토큰만 정의. 스위치 노출은 v1.1)
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  /* 2.1 서피스 */
  --cc-paper:          #131C1F;
  --cc-surface:        #0D1517;
  --cc-surface-sunk:   #091012;
  --cc-surface-raised: #1A2528;
  --cc-scrim:          rgba(3,10,12,.66);

  /* 2.2 잉크 */
  --cc-ink:            #E9F0EE;   /* 14.97:1 / paper */
  --cc-ink-muted:      #A4B2B0;   /*  7.89:1 / paper */
  --cc-ink-faint:      #7E8C8A;   /*  4.95:1 / paper */
  --cc-on-brand:       #FFFFFF;
  --cc-on-accent:      #101A18;   /* 노른자 위 글자는 다크에서도 어두운 잉크 */
  --cc-on-danger:      #FFFFFF;

  /* 2.3 선 */
  --cc-line:           #253135;
  --cc-line-strong:    #3A484C;
  --cc-line-field:     #7C8C90;   /* 4.95:1 / paper */
  --cc-line-rule:      #1E4655;

  /* 2.4 브랜드 램프(다크에서 명도 반전) */
  --cc-brand-900:      #061B22;
  --cc-brand-700:      #2F738C;
  --cc-brand-500:      #6FB6D2;
  --cc-brand-200:      #1E4655;
  --cc-brand-100:      #16323D;

  /* 2.5 브랜드 역할 */
  --cc-brand-text:     #6FB6D2;   /* 7.66:1 / paper */
  --cc-brand-fill:     #2A6A82;   /* 흰글자 6.03:1 */
  --cc-brand-fill-hover:  #327A95;
  --cc-brand-fill-active: #21556A;
  --cc-brand-line:     #4E9CB8;   /* 채움 경계 5.58:1 / paper */
  --cc-brand-soft:     #16323D;
  --cc-brand-soft-text:#6FB6D2;   /* 5.97:1 / brand-soft */
  --cc-brand-soft-line:#1E4655;

  /* 2.6 액센트 — 노른자는 다크에서도 그대로 */
  --cc-accent:         #F2C14E;
  --cc-accent-hover:   #F7CE6B;
  --cc-accent-active:  #DCAE43;
  --cc-accent-line:    #C99A26;   /* 6.70:1 / paper */
  --cc-accent-text:    #F0C868;   /* 10.85:1 / paper */
  --cc-accent-soft:    #3A2F12;
  --cc-accent-soft-line: #5A4A1E;

  /* 2.7 상태색 */
  --cc-success:        #4FBF8E;   /* 7.56:1 */
  --cc-success-soft:   #10312A;
  --cc-success-line:   #27604C;
  --cc-warning:        #E0AB45;   /* 8.31:1 */
  --cc-warning-solid:  #E0AB45;
  --cc-warning-soft:   #33280F;
  --cc-warning-line:   #6A5320;
  --cc-danger:         #F08272;   /* 6.71:1 (텍스트) */
  --cc-danger-solid:   #CF4430;   /* 흰글자 4.64:1, 경계 3.73:1 */
  --cc-danger-soft:    #3A1E1A;
  --cc-danger-line:    #6E3A30;
  --cc-info:           #6FB6D2;
  --cc-info-soft:      #12303B;
  --cc-info-line:      #27566A;

  /* 2.8 태그 8색(다크 대응) */
  --cc-tag-1: #6FB6D2;  --cc-tag-1-soft: #192A31;
  --cc-tag-2: #4FBF8E;  --cc-tag-2-soft: #1A3026;
  --cc-tag-3: #D4B071;  --cc-tag-3-soft: #312819;
  --cc-tag-4: #F08272;  --cc-tag-4-soft: #371712;
  --cc-tag-5: #B99BD6;  --cc-tag-5-soft: #251B2F;
  --cc-tag-6: #7FC2DE;  --cc-tag-6-soft: #172B33;
  --cc-tag-7: #C4B2A2;  --cc-tag-7-soft: #2A2520;
  --cc-tag-8: #AFBCB8;  --cc-tag-8-soft: #232726;

  /* 2.9 포커스 */
  --cc-focus:          #6FB6D2;   /* 7.66:1 / paper */
  --cc-focus-offset:   #131C1F;

  /* 2.10 그림자 — 다크는 그림자 대신 경계선이 주 역할 */
  --cc-shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --cc-shadow-2: 0 4px 12px -2px rgba(0,0,0,.52), 0 2px 4px -2px rgba(0,0,0,.40);
  --cc-shadow-3: 0 16px 32px -12px rgba(0,0,0,.62), 0 4px 10px -6px rgba(0,0,0,.44);

  /* 2.11 플레이스홀더 */
  --cc-shimmer: rgba(255,255,255,.07);
  --cc-ph-bg:   #1A2528;
  --cc-ph-ink:  #7E8C8A;
}


/* ==========================================================================
   3. OS 다크 선호 보조 (사용자가 명시적으로 라이트를 고르지 않았을 때)
      html[data-theme] 를 JS 로 고정하면 이 블록은 무시된다.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --cc-paper:#131C1F; --cc-surface:#0D1517; --cc-surface-sunk:#091012;
    --cc-surface-raised:#1A2528; --cc-scrim:rgba(3,10,12,.66);
    --cc-ink:#E9F0EE; --cc-ink-muted:#A4B2B0; --cc-ink-faint:#7E8C8A;
    --cc-on-brand:#FFFFFF; --cc-on-accent:#101A18; --cc-on-danger:#FFFFFF;
    --cc-line:#253135; --cc-line-strong:#3A484C; --cc-line-field:#7C8C90; --cc-line-rule:#1E4655;
    --cc-brand-900:#061B22; --cc-brand-700:#2F738C; --cc-brand-500:#6FB6D2;
    --cc-brand-200:#1E4655; --cc-brand-100:#16323D;
    --cc-brand-text:#6FB6D2; --cc-brand-fill:#2A6A82; --cc-brand-fill-hover:#327A95;
    --cc-brand-fill-active:#21556A; --cc-brand-line:#4E9CB8;
    --cc-brand-soft:#16323D; --cc-brand-soft-text:#6FB6D2; --cc-brand-soft-line:#1E4655;
    --cc-accent:#F2C14E; --cc-accent-hover:#F7CE6B; --cc-accent-active:#DCAE43;
    --cc-accent-line:#C99A26; --cc-accent-text:#F0C868; --cc-accent-soft:#3A2F12; --cc-accent-soft-line:#5A4A1E;
    --cc-success:#4FBF8E; --cc-success-soft:#10312A; --cc-success-line:#27604C;
    --cc-warning:#E0AB45; --cc-warning-solid:#E0AB45; --cc-warning-soft:#33280F; --cc-warning-line:#6A5320;
    --cc-danger:#F08272; --cc-danger-solid:#CF4430; --cc-danger-soft:#3A1E1A; --cc-danger-line:#6E3A30;
    --cc-info:#6FB6D2; --cc-info-soft:#12303B; --cc-info-line:#27566A;
    --cc-tag-1:#6FB6D2; --cc-tag-1-soft:#192A31; --cc-tag-2:#4FBF8E; --cc-tag-2-soft:#1A3026;
    --cc-tag-3:#D4B071; --cc-tag-3-soft:#312819; --cc-tag-4:#F08272; --cc-tag-4-soft:#371712;
    --cc-tag-5:#B99BD6; --cc-tag-5-soft:#251B2F; --cc-tag-6:#7FC2DE; --cc-tag-6-soft:#172B33;
    --cc-tag-7:#C4B2A2; --cc-tag-7-soft:#2A2520; --cc-tag-8:#AFBCB8; --cc-tag-8-soft:#232726;
    --cc-focus:#6FB6D2; --cc-focus-offset:#131C1F;
    --cc-shadow-1:0 1px 2px rgba(0,0,0,.40);
    --cc-shadow-2:0 4px 12px -2px rgba(0,0,0,.52), 0 2px 4px -2px rgba(0,0,0,.40);
    --cc-shadow-3:0 16px 32px -12px rgba(0,0,0,.62), 0 4px 10px -6px rgba(0,0,0,.44);
    --cc-shimmer:rgba(255,255,255,.07); --cc-ph-bg:#1A2528; --cc-ph-ink:#7E8C8A;
  }
}

/* ==========================================================================
   4. 모드 불변 토큰 (치수·타이포·모션)
   ========================================================================== */
:root {
  /* ---- 4.1 폰트 --------------------------------------------------------- */
  /* Pretendard Variable 은 static/fonts/ 에 셀프호스팅(@font-face 는 cc-base.css). */
  --cc-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                  system-ui, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo",
                  "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  /* 고운바탕: 레시피 제목·랜딩 헤드라인 전용. 본문에 쓰지 않는다. */
  --cc-font-serif: "Gowun Batang", "고운바탕", "Nanum Myeongjo", "Apple SD Gothic Neo",
                   Batang, "바탕", Georgia, "Times New Roman", serif;
  --cc-font-num:  "Pretendard Variable", Pretendard, system-ui, "Segoe UI", sans-serif;

  /* ---- 4.2 타입 스케일 (1.25 배수 · px) ---------------------------------- */
  --cc-fs-display:  39px;  --cc-lh-display:  1.22;  /* 랜딩 히어로 */
  --cc-fs-title-1:  31px;  --cc-lh-title-1:  1.30;  /* 레시피 제목(고운바탕) */
  --cc-fs-title-2:  25px;  --cc-lh-title-2:  1.36;  /* 섹션·쿡모드 단계 */
  --cc-fs-title-3:  20px;  --cc-lh-title-3:  1.42;  /* 카드 제목 */
  --cc-fs-body:     16px;  --cc-lh-body:     1.65;  /* 본문 */
  --cc-fs-body-sm:  14px;  --cc-lh-body-sm:  1.60;  /* 조밀 목록·표 */
  --cc-fs-caption:  13px;  --cc-lh-caption:  1.50;  /* 메타·도움말 */
  --cc-fs-micro:    12px;  --cc-lh-micro:    1.40;  /* 배지·라벨 */

  --cc-fw-regular: 400;
  --cc-fw-medium:  500;
  --cc-fw-semibold:600;
  --cc-fw-bold:    700;

  --cc-ls-tight: -0.02em;   /* display / title-1 */
  --cc-ls-snug:  -0.01em;   /* title-2 / title-3 */
  --cc-ls-normal: 0;
  --cc-ls-wide:   0.02em;   /* micro 라벨 */

  /* ---- 4.3 간격 (4 기반) ------------------------------------------------- */
  --cc-sp-1:  4px;   --cc-sp-2:  8px;   --cc-sp-3: 12px;  --cc-sp-4: 16px;
  --cc-sp-5: 20px;   --cc-sp-6: 24px;   --cc-sp-7: 32px;  --cc-sp-8: 40px;
  --cc-sp-9: 56px;   --cc-sp-10:72px;

  /* ---- 4.4 라운드 (위계: 작을수록 기능적, 클수록 담는 그릇) -------------- */
  --cc-radius-sm: 4px;    /* 체크박스·작은 칩·인풋 내부 요소 */
  --cc-radius-md: 8px;    /* 버튼·입력칸·행 */
  --cc-radius-lg: 12px;   /* 카드·패널·모달 */
  --cc-radius-xl: 20px;   /* 시트·히어로 판·큰 이미지 */
  --cc-radius-pill: 999px;/* 태그·상태 필 */

  /* ---- 4.5 선 두께 ------------------------------------------------------- */
  --cc-bw-hair: 1px;
  --cc-bw-bold: 2px;
  --cc-bw-bar:  4px;   /* 경고 바·선택 표시 */

  /* ---- 4.6 레이아웃 ------------------------------------------------------ */
  --cc-rail-w:     240px;   /* 색인 레일 */
  --cc-content-w: 1360px;   /* 콘텐츠 최대폭 */
  --cc-shell-w:   1600px;   /* 레일 + 콘텐츠 */
  --cc-topbar-h:   64px;
  --cc-bottomtab-h:56px;
  --cc-drawer-w:  320px;    /* 캘린더 우측 서랍 */
  --cc-grid-gap:   20px;
  --cc-touch-min:  44px;    /* 최소 터치 타깃 */

  /* ---- 4.7 모션 ---------------------------------------------------------- */
  --cc-dur-fast:   120ms;   /* 색·투명도 */
  --cc-dur-base:   180ms;   /* 대부분의 상태 변화 */
  --cc-dur-slow:   240ms;   /* 목록 재배치·체크 이동 */
  --cc-dur-drawer: 280ms;   /* 서랍·시트 */
  --cc-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --cc-ease-in:       cubic-bezier(.4, 0, 1, 1);
  --cc-ease-out:      cubic-bezier(0, 0, .2, 1);
  --cc-move-max:   8px;     /* 진입 애니메이션 최대 이동거리 */


  /* ---- 4.9 어두운 판(brand-900) 위 요소 — 라이트·다크 공통 ----------------- */
  /* 쿡모드·토스트·선택 툴바는 두 모드 모두 brand-900 판이다. 그래서 값이 불변이다. */
  --cc-on-dark:             #FFFFFF;                 /* brand-900 위 14.67:1 */
  --cc-on-dark-dim:         rgba(255,255,255,.72);   /* 보조 문구 */
  --cc-on-dark-line:        var(--cc-on-dark-line);   /* 구분선 */
  --cc-on-dark-line-strong: var(--cc-on-dark-line-strong);   /* 버튼 테두리 */
  --cc-on-dark-hover:       var(--cc-on-dark-hover);   /* hover 배경 */
  --cc-on-dark-track:       var(--cc-on-dark-track);   /* 타이머 트랙 */
  --cc-on-dark-dot:         var(--cc-on-dark-dot);   /* 완료 도트 */
  --cc-on-dark-divider:     var(--cc-on-dark-divider);   /* 세로 구분선 */
  --cc-success-on-dark:     #8FE0BC;                 /* brand-900 위 9.47:1 */
  --cc-danger-on-dark:      #F5A99C;                 /* brand-900 위 7.71:1 */
  --cc-danger-on-dark-line: rgba(245,169,156,.60);

  /* ---- 4.8 z-index ------------------------------------------------------- */
  --cc-z-rail:   10;
  --cc-z-topbar: 20;
  --cc-z-drawer: 30;
  --cc-z-sheet:  40;
  --cc-z-dialog: 50;
  --cc-z-toast:  60;
}

/* ==========================================================================
   5. 모션 감소 선호 — 이동·확대는 끄고 상태는 즉시 반영
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cc-dur-fast: 1ms; --cc-dur-base: 1ms; --cc-dur-slow: 1ms; --cc-dur-drawer: 1ms;
    --cc-move-max: 0px;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   6. 고대비 선호 — 선을 강화한다
   ========================================================================== */
@media (prefers-contrast: more) {
  :root, html[data-theme="light"] { --cc-line: #B4BEBA; --cc-line-strong: #788A83; }
  html[data-theme="dark"]         { --cc-line: #3A484C; --cc-line-strong: #7C8C90; }
}