/* =====================================================================
   SSELLY 디자인 토큰 (단일 소스)
   - faikerz desk 콘솔 색감 통일용 브랜드 그린 팔레트
   - 콘솔(head-css)과 로그인(login.html) 양쪽에서 이 파일을 로드한다
   - ⚠️ 위치 고정: 이 파일은 반드시 /css/ 아래에 둘 것.
        SecurityConfig 공개 경로는 /css/**, /js/**, /images/** 뿐이고 /assets/** 는 인증 필요.
        미인증 화면인 로그인이 /assets 에서 이걸 받으려 하면 302 → 로그인 HTML이 CSS로 파싱되어
        --g 가 비고 버튼이 투명해진다(실제로 겪은 버그). 옮기지 말 것.
   - 파생 토큰은 color-mix로 --g에서 자동 계산 → 값을 따로 관리하지 않는다
   ===================================================================== */
:root {
    /* ★★★ 단일 소스 — 그린 hex 확정 시 아래 2줄만 수정하면 전 화면·로그인에 반영 ★★★ */
    --g: #2BB894;            /* 브랜드 프라이머리 (desk 콘솔 렌더 픽셀 근사치) */
    --g-rgb: 43, 184, 148;   /* 위 --g의 R,G,B — Velzon --vz-primary-rgb 용 (CSS로 hex→rgb 변환 불가라 수동 동기화 필요) */

    /* ---- 이하 전부 --g에서 자동 파생 (수정 불필요) ---- */
    /* ★ 대비 규칙: --g(#2BB894)는 '면'으로만 쓴다. 그 위에 흰 글자를 얹으면 2.50:1 로 AA(4.5:1) 미달이다.
         - 흰 글자를 얹는 면(버튼 등)  → --g-on-dark  (4.59:1)
         - 흰 배경 위의 글자/아이콘    → --g-emphasis (5.25:1)
       퍼플(#4b38b3)은 흰 글자 8.35:1 이라 그냥 됐지만 민트는 밝아서 안 된다. 그린 전환 때 놓쳤던 부분. */
    --g-on-dark:       color-mix(in srgb, var(--g) 72%, #000);   /* 흰 글자를 얹는 면. 72% = AA 통과하는 가장 밝은 값(=민트 인상 최대 보존) */
    /* ※ --g-hover/-active 는 --g(100%)보다 어둡지만 --g-on-dark(72%)보다는 '밝다'.
         흰 글자 면의 hover 로 쓰면 오히려 밝아져 대비가 3.4:1 로 떨어지므로 전용 단계를 따로 둔다. */
    --g-on-dark-hover:  color-mix(in srgb, var(--g) 60%, #000);  /* 6.14:1 */
    --g-on-dark-active: color-mix(in srgb, var(--g) 52%, #000);
    --g-hover:         color-mix(in srgb, var(--g) 85%, #000);   /* --g 면(틴트/링크 등)의 hover */
    --g-active:        color-mix(in srgb, var(--g) 75%, #000);
    --g-emphasis:      color-mix(in srgb, var(--g) 65%, #000);   /* 텍스트용 진한 그린 (흰 배경 AA 대비 확보) */
    --g-light:         color-mix(in srgb, var(--g) 58%, #fff);   /* 밝은 그린 (스피너 내부 링 등) */

    --g-soft-weak:     color-mix(in srgb, var(--g) 6%,  transparent);  /* hover 틴트 */
    --g-soft:          color-mix(in srgb, var(--g) 10%, transparent);  /* 선택/활성 틴트 */
    --g-soft-strong:   color-mix(in srgb, var(--g) 14%, transparent);  /* soft 배경/포커스 링 */

    --g-subtle-bg:     color-mix(in srgb, var(--g) 11%, #fff);   /* 불투명 연그린 배경 (뱃지/콜아웃) */
    --g-subtle-border: color-mix(in srgb, var(--g) 33%, #fff);   /* 연그린 테두리 */

    /* ---- 의미색 잉크: Velzon 의미색(--vz-warning #ffbe0b 등)은 '면'이라 밝다.
           그 색을 흰 배경 위 '글자'로 쓰면 1.66:1 로 못 읽는다 → 잉크는 아래 값을 쓸 것.
           면(뱃지 배경)으로 쓸 때는 Velzon 원값 그대로 두고 글자를 text-dark 로(9.27:1). ---- */
    --warn-ink: #8c6906;   /* #ffbe0b 를 어둡게. 흰 배경 5.07:1 — AA 통과하는 가장 밝은 앰버(=경고 인상 최대 보존) */

    /* ---- 중립(슬레이트) — desk는 그린 외에 색을 쓰지 않는다.
           목록/취소처럼 주 액션과 경쟁하면 안 되는 보조 액션용 ---- */
    --n: #64748b;            /* 중립 프라이머리 (Velzon --vz-secondary 대체) */
    --n-rgb: 100, 116, 139;  /* 위 --n의 R,G,B — 수동 동기화 필요(--g-rgb와 동일한 제약) */
    --n-hover:       color-mix(in srgb, var(--n) 85%, #000);
    --n-emphasis:    color-mix(in srgb, var(--n) 70%, #000);   /* 흰 배경 텍스트 AA 대비 */
    --n-soft:        color-mix(in srgb, var(--n) 10%, transparent);
    --n-soft-strong: color-mix(in srgb, var(--n) 16%, transparent);
}