/* Glog Design System — 토큰
   landing.html · login.html · signup.html이 참조하는 CSS 변수 전부입니다.
   받는 쪽 styles.css :root와 이름을 맞춰 두었습니다(1b 코드 이관 명세 기준). */
:root{
  /* ── 면 ── */
  --bg:#f6f5f4;              /* 따뜻한 종이 캔버스. 페이지·푸터·사이드바 바탕 */
  --panel:#ffffff;           /* 카드·입력칸·상단 바·메인 패널 */
  --panel-2:#f6f5f4;         /* 패널 안의 한 단계 낮은 면(목업 사이드바, 칩 바탕) */
  --surface-hover:#efedeb;   /* 흰 버튼·흰 칩 hover */
  --border:#e6e6e6;          /* 기본 헤어라인 1px */
  --border-strong:#dddddd;   /* 입력칸 밑줄·단계 연결선 등 조금 진한 선 */

  /* ── 글자 (잉크 사다리) ── */
  --text:rgba(0,0,0,.95);    /* 본문·제목 */
  --text-dim:#31302e;        /* 보조 본문·메뉴 */
  --text-muted:#615d59;      /* 설명·메타·라벨 */
  --text-faint:#a39e98;      /* 타임스탬프·placeholder·비활성 아이콘 */

  /* ── 강조 (구조를 칠하는 유일한 색) ── */
  --accent:#0075de;          /* 주 버튼·링크·포커스·녹음 버튼·로그인 밴드 */
  --accent-2:#005bab;        /* 주 버튼 hover/press */
  --accent-strong:#005bab;   /* 옅은 파랑 위 글자(적용 중·활성 메뉴) */
  --accent-soft:rgba(0,117,222,.10); /* 활성 행·형광펜·맥락 적용 배지 바탕 */
  --focus-ring:0 0 0 2px rgba(0,117,222,.35); /* 포커스 box-shadow */

  /* ── 상태 ── */
  --danger:#e03e3e;          /* 녹음 중·정지·오류에만 */
  --danger-soft:#fdecec;     /* 오류 알림 바탕·녹음 중 알약 바탕·펄스 링 */

  /* ── 남색 밴드 (사이트에 한 번: 랜딩 앱 다운로드) · 진한 바탕 위 글자 ── */
  --night:#213183;           /* 랜딩 앱 다운로드 밴드 */
  --on-night:#ffffff;        /* 남색·파랑 바탕 위 글자, 주 버튼 글자 */
  --on-night-dim:rgba(255,255,255,.8); /* 진한 바탕 위 보조 글자 */

  /* ── 오버레이 ── */
  --hover-overlay:rgba(0,0,0,.04); /* 고스트 컨트롤 hover */
  --press-overlay:rgba(0,0,0,.08); /* 고스트 컨트롤 press */

  /* ── 스티커 팔레트 (장식 전용: 아이콘 타일·폴더 점·화자 색. 버튼·구조에 쓰지 않음) ── */
  --st-sky:#62aef0;          --st-sky-tint:#e8f3fd;
  --st-purple:#d6b6f6;       --st-purple-tint:#f5eefd;
  --st-pink:#ff64c8;         --st-pink-tint:#ffecf8;
  --st-green:#1aae39;        --st-green-tint:#e5f6e9;
  --st-orange:#dd5b00;       --st-orange-tint:#fcefe6;
  --st-blue-tint:#e6f1fc;    /* 파랑 계열 타일·AI 요약 막대 바탕 */

  /* ── 외부 브랜드 (각 사 가이드 고정색. 다른 곳에 쓰지 않음) ── */
  --kakao:#FEE500;           /* 카카오 로그인 버튼 바탕 */
  --kakao-fg:rgba(0,0,0,.85);/* 카카오 버튼 글자 */
  --apple:#000000;           /* Apple 로그인 버튼 바탕 */
  --on-apple:#ffffff;        /* Apple 버튼 글자 */
  --google-border:#747775;   /* Google 버튼 테두리 */
  --google-fg:#1f1f1f;       /* Google 버튼 글자 */
  --google-red:#EA4335;  --google-blue:#4285F4; --google-yellow:#FBBC05; --google-green:#34A853; /* G 로고 4색 */

  /* ── 타이포 ── */
  --font-sans:"Pretendard Variable","Pretendard",-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif; /* 폰트는 불러오지 않고 스택에 맡김 */

  /* ── 간격 (8px 기반) ── */
  --space-1:4px;   /* 아이콘-글자 사이 */
  --space-2:8px;   /* 칩·버튼 묶음 간격 */
  --space-3:12px;  /* 카드 안 작은 간격 */
  --space-4:16px;  /* 카드 안 기본 간격 */
  --space-5:24px;  /* 카드 패딩·좌우 여백 */
  --space-6:32px;  /* 블록 사이 */
  --space-7:48px;  /* 섹션 머리-본문 */
  --space-8:64px;  /* 큰 블록 사이 */
  --space-9:96px;  /* 섹션 위아래 (880px 이하에서 72px로 줄임) */
  --col-max:1200px;/* 마케팅 본문 폭 */
  --nav-h:64px;    /* 상단 바 높이 (880px 이하 56px) */

  /* ── 반경 ── */
  --r-field:4px;   /* 입력칸·체크박스 */
  --r-tag:5px;     /* 행·태그 */
  --r-btn:8px;     /* 유틸리티 버튼·아이콘 타일 */
  --r-card:12px;   /* 카드 */
  --r-well:16px;   /* 제품 목업·큰 패널·로그인 카드 */
  --r-pill:9999px; /* 마케팅 CTA·칩·알약 */

  /* ── 그림자 (여러 겹의 거의 투명한 층) ── */
  --shadow-sm:rgba(0,0,0,.01) 0 .175px 1.041px,rgba(0,0,0,.02) 0 .8px 2.925px,rgba(0,0,0,.027) 0 2.025px 7.847px,rgba(0,0,0,.04) 0 4px 18px; /* 카드 hover·상단 바 스크롤 */
  --shadow:rgba(0,0,0,.01) 0 1px 3px,rgba(0,0,0,.02) 0 3px 7px,rgba(0,0,0,.02) 0 7px 15px,rgba(0,0,0,.04) 0 14px 28px,rgba(0,0,0,.05) 0 23px 52px; /* 모달·제품 목업·떠 있는 카드 */

  /* ── 모션 ── */
  --ease:cubic-bezier(.2,0,0,1); /* 모든 전환 공통, 튕김 없음 */
  --dur-fast:120ms; /* hover·press */
  --dur:200ms;      /* 기본 전환 */
  --dur-slow:320ms; /* 등장·메뉴 인디케이터 */
}