/* ============================================================
   For Cretas — Design Tokens
   단일 소스 오브 트루스. 모든 페이지 CSS보다 먼저 로드한다.
   값 수정은 이 파일에서만, 컴포넌트 CSS는 var()만 참조한다.
   문서: /DESIGN.md
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- 배경 · 서피스 ---- */
  --color-bg: #05070d;
  --color-bg-raised: #0a1020;
  --gradient-page: linear-gradient(180deg, rgba(18, 29, 58, .96) 0, #05070d 360px);
  --color-surface: rgba(10, 16, 32, .86);          /* 반투명 패널(헤더 드롭다운 등) */
  --color-surface-solid: #0b1224;                  /* 불투명 서피스(썸네일 등) */
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .045));
  --color-surface-soft: rgba(255, 255, 255, .055); /* 칩, 소프트 필 */
  --color-surface-hover: rgba(255, 255, 255, .11); /* 소프트 필 hover */
  --color-field: rgba(3, 7, 15, .74);              /* 인풋/로그 배경 */
  --color-header: rgba(4, 7, 14, .78);             /* 스티키 헤더 */

  /* ---- 텍스트 ---- */
  --color-text: #f7faff;
  --color-text-2: #c8d5f1;        /* 본문 강조·리스트·라벨 */
  --color-text-muted: #95a5c4;    /* 보조 설명 */
  --color-text-subtle: #62708d;   /* 힌트·미세 텍스트 */
  --color-text-nav: #a8b5d1;      /* 네비 기본 */
  --color-text-on-accent: #fff;

  /* ---- 보더 ---- */
  --color-border: rgba(126, 159, 255, .22);
  --color-border-strong: rgba(103, 139, 255, .46);
  --color-border-faint: rgba(255, 255, 255, .09);

  /* ---- 액센트 · 시맨틱 ---- */
  --color-accent: #3f78ff;
  --color-accent-hover: #5c8dff;
  --color-accent-soft: rgba(63, 120, 255, .16);
  --color-accent-2: #7db3ff;
  --color-highlight: #47e7d8;                      /* cyan — 킥커, 진행바 */
  --color-success: #63e6a9;
  --color-success-soft: rgba(99, 230, 169, .12);
  --color-warning: #ffbd68;
  --color-warning-soft: rgba(255, 189, 104, .12);
  --color-danger: #ff6f73;
  --color-danger-soft: rgba(255, 111, 115, .12);
  --color-pink: #ff6fb1;                           /* 카드 톤 전용 */

  /* ---- 차트 (growth) ---- */
  --chart-grid: rgba(255, 255, 255, .07);
  --chart-tick: #62708d;

  /* ---- 포커스 ---- */
  --focus-ring: 0 0 0 3px rgba(63, 120, 255, .28);

  /* ---- 타이포그래피 ---- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 11px;    /* 힌트, 테이블 헤더, 파인 프린트 */
  --fs-sm: 12px;    /* 라벨, 칩, 노트, 푸터, 로그 */
  --fs-md: 13px;    /* 네비, 보조 본문, 컨트롤 */
  --fs-base: 14px;  /* 본문, 버튼, 인풋 */
  --fs-lg: 16px;    /* 브랜드, 패널 리드 */
  --fs-xl: 18px;    /* 카드/섹션 제목 */
  --fs-2xl: 24px;   /* 페이지 제목(법적 문서, 통계 숫자) */
  --fs-3xl: 38px;   /* 히어로 h1 (모바일 30px) */

  --fw-regular: 400;
  --fw-medium: 600;   /* 라벨, 네비, 버튼, 칩 */
  --fw-bold: 700;     /* 제목 */
  --fw-black: 800;    /* 브랜드 로고타입 · 히어로 h1 전용 */

  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-loose: 1.7;
  --tracking-caps: .08em;   /* 대문자 킥커/eyebrow/th */
  --tracking-tight: -.01em; /* 큰 제목 */

  /* ---- 간격 (4px 스케일) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- 라디우스 ---- */
  --radius-sm: 6px;    /* 코드 칩, 썸네일 */
  --radius-md: 8px;    /* 기본: 버튼, 인풋, 카드, 패널 */
  --radius-lg: 12px;   /* 모달, 토스트 */
  --radius-full: 999px;

  /* ---- 그림자 · 글로우 ---- */
  --shadow-sm: 0 12px 34px rgba(0, 0, 0, .24);
  --shadow-md: 0 22px 70px rgba(0, 0, 0, .34);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, .42);
  --glow-accent: 0 0 22px rgba(63, 120, 255, .42);   /* 로고 */
  --shadow-btn: 0 10px 30px rgba(63, 120, 255, .2);

  /* ---- 모션 ---- */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --dur-fast: .13s;
  --dur-med: .2s;
  --dur-slow: .3s;

  /* ---- z-index ---- */
  --z-header: 100;
  --z-consent: 150;
  --z-overlay: 200;
  --z-toast: 300;

  /* ---- 레이아웃 ---- */
  --content-max: 1180px;
}