/* ============================================================
   Smartix Design Tokens — 단일 소스 of truth
   사용: <link rel="stylesheet" href="/assets/tokens.css">  (head 최상단)
   ============================================================ */

:root{
  /* === 브랜드 컬러 (보라 스케일) === */
  --purple-50:#faf7ff;
  --purple-100:#f0eaff;
  --purple-200:#ded2ff;
  --purple-400:#a065ff;
  --purple-500:#8d64ff;
  --purple-600:#6c3bff;  /* Primary brand */
  --purple-700:#5b28f3;
  --purple-800:#5525e7;
  --purple-900:#2b0f5f;

  /* === 두 가지 명명 규칙 호환 (페이지 inline과 동일) === */
  --purple:#6c3bff;       /* 단축형 */
  --purple2:#8d64ff;
  --deep:#16083a;
  --navy:#0b1036;

  /* === 텍스트 컬러 === */
  --ink:#11182f;          /* 본문 텍스트 (주) */
  --ink-alt:#131733;      /* 본문 텍스트 (페이지마다 미세 차이) */
  --muted:#66708a;        /* 보조 텍스트 */
  --muted-alt:#646b80;
  --body-secondary:#4b5572;

  /* === 라인·배경 === */
  --line:#e7e0ff;
  --line-alt:rgba(34,36,70,.10);
  --soft:#f7f3ff;
  --bg-page:linear-gradient(180deg,#fff 0,#fbf9ff 60%,#fff 100%);

  /* === 그림자 === */
  --shadow:0 24px 70px rgba(28,18,80,.14);
  --shadow-card:0 18px 54px rgba(28,18,80,.09);
  --shadow-elev:0 24px 60px rgba(28,18,80,.16);
  --shadow-cta:0 14px 30px rgba(108,59,255,.22);

  /* === 그리드·간격 === */
  --max:1440px;            /* 콘텐츠 최대 폭 */
  --max-narrow:1180px;     /* 좁은 콘텐츠 폭 */
  --pad:clamp(20px,4vw,56px);

  /* === 타이포 그라데이션 (텍스트 효과) === */
  --grad-purple:linear-gradient(135deg,#6c3bff,#5525e7);
  --grad-deep:linear-gradient(135deg,#2b0f5f,#5728d8);
  --grad-bright:linear-gradient(135deg,#6c3bff,#8d64ff);
}

/* ============================================================
   토큰 사용 가이드 (주석):
   - 모든 페이지 색상: var(--ink), var(--muted), var(--purple-600), var(--line) 등 사용
   - 새 페이지 작성 시 이 파일 link만 걸면 토큰 사용 가능
   - 페이지 inline :root 정의는 이 파일의 토큰을 override하지 않음 (cascade 순서대로)
   - 페이지 inline에 동일 변수 정의가 있으면 그것이 우선됨 — 안전한 점진적 마이그레이션
   ============================================================ */