/* ============================================================
   RA Design System — Foundations (tokens)
   (26-08-21, seed-design 의 role-based 토큰 철학 차용)

   구조: ①팔레트(원색 스케일) → ②시맨틱(역할) 토큰이 팔레트를 참조.
   화면 코드는 반드시 ②시맨틱 토큰만 쓴다 — 팔레트 직접 참조 금지.
   (색을 의미로 바꿀 수 있어야 다크모드/리브랜딩이 토큰 교체로 끝난다)
   ============================================================ */
:root {
  /* ---------- ① 팔레트 (직접 사용 금지) ---------- */
  /* gray — 블루 틴트 중립 계열(기존 화면 톤과 맞춤) */
  --ra-gray-50:  #f7f9fb;
  --ra-gray-100: #eef2f6;
  --ra-gray-200: #e2e8ef;
  --ra-gray-300: #cbd4de;
  --ra-gray-400: #9aa7b6;
  --ra-gray-500: #6b7887;
  --ra-gray-600: #4d5866;
  --ra-gray-700: #364150;
  --ra-gray-800: #232c38;
  --ra-gray-900: #151b23;

  /* blue — 브랜드(기존 #4a90d9 기준 스케일) */
  --ra-blue-50:  #eef5fc;
  --ra-blue-100: #d9e9f8;
  --ra-blue-200: #b3d3f1;
  --ra-blue-300: #85b8e8;
  --ra-blue-400: #61a2e0;
  --ra-blue-500: #4a90d9;
  --ra-blue-600: #3a7bc8;
  --ra-blue-700: #2e63a4;
  --ra-blue-800: #264f83;
  --ra-blue-900: #1e3d64;

  /* green / red / yellow / purple — 상태·강조 */
  --ra-green-100: #d9f2e3;
  --ra-green-500: #2eaa62;
  --ra-green-700: #1e7e45;
  --ra-red-100:  #fdecea;
  --ra-red-500:  #e0442e;
  --ra-red-700:  #b3331f;
  --ra-yellow-100: #fff5d6;
  --ra-yellow-600: #b07d18;
  --ra-yellow-800: #8a6d1a;
  --ra-purple-100: #ede9fe;
  --ra-purple-600: #6d28d9;

  /* ---------- ② 시맨틱(역할) 토큰 — 화면 코드는 이것만 ---------- */
  /* 배경 (bg) */
  --ra-bg-page:      var(--ra-gray-50);     /* 페이지 바탕 */
  --ra-bg-layer:     #ffffff;               /* 카드·패널 */
  --ra-bg-layer-alt: var(--ra-gray-100);    /* 카드 내 구분 영역 */
  --ra-bg-hover:     var(--ra-gray-100);    /* 행/버튼 호버 */
  --ra-bg-brand:       var(--ra-blue-500);
  --ra-bg-brand-hover: var(--ra-blue-600);
  --ra-bg-brand-weak:  var(--ra-blue-50);
  --ra-bg-danger:      var(--ra-red-500);
  --ra-bg-danger-weak: var(--ra-red-100);
  --ra-bg-success:     var(--ra-green-500);
  --ra-bg-warning:     #f0ad4e;            /* 경고 solid — 기존 화면 관례 유지 */
  --ra-bg-success-weak: var(--ra-green-100);
  --ra-bg-warning-weak: var(--ra-yellow-100);
  --ra-bg-info-weak:    var(--ra-blue-50);

  /* 전경 (fg) */
  --ra-fg-strong:  var(--ra-gray-900);   /* 제목 */
  --ra-fg-base:    var(--ra-gray-800);   /* 본문 */
  --ra-fg-muted:   var(--ra-gray-500);   /* 보조 설명 */
  --ra-fg-subtle:  var(--ra-gray-400);   /* 자리표시·비활성 */
  --ra-fg-oninverse: #ffffff;            /* 진한 배경 위 텍스트 */
  --ra-fg-brand:   var(--ra-blue-600);
  --ra-fg-success: var(--ra-green-700);
  --ra-fg-warning: var(--ra-yellow-800);
  --ra-fg-danger:  var(--ra-red-700);

  /* 테두리 (stroke) */
  --ra-stroke-base:   var(--ra-gray-200);
  --ra-stroke-strong: var(--ra-gray-300);
  --ra-stroke-brand:  var(--ra-blue-500);
  --ra-stroke-focus:  var(--ra-blue-300);

  /* ---------- 타이포 ---------- */
  --ra-font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                  Pretendard, "Segoe UI", "Malgun Gothic", sans-serif;
  --ra-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ra-text-xs:  0.72rem;   /* 캡션·메타 */
  --ra-text-sm:  0.8rem;    /* 보조 */
  --ra-text-md:  0.88rem;   /* 본문 기본 */
  --ra-text-lg:  1rem;      /* 소제목 */
  --ra-text-xl:  1.15rem;   /* 섹션 제목 */
  --ra-text-2xl: 1.4rem;    /* 페이지 제목 */
  --ra-leading: 1.55;

  /* ---------- 간격 (4px 그리드) ---------- */
  --ra-sp-1: 4px;
  --ra-sp-2: 8px;
  --ra-sp-3: 12px;
  --ra-sp-4: 16px;
  --ra-sp-5: 20px;
  --ra-sp-6: 24px;
  --ra-sp-8: 32px;

  /* ---------- 라운드·그림자·모션 ---------- */
  --ra-radius-sm: 5px;
  --ra-radius-md: 8px;
  --ra-radius-lg: 12px;
  --ra-radius-full: 999px;
  --ra-shadow-1: 0 1px 3px rgba(21, 27, 35, 0.08);
  --ra-shadow-2: 0 4px 14px rgba(21, 27, 35, 0.12);
  --ra-shadow-3: 0 8px 28px rgba(21, 27, 35, 0.18);
  --ra-ease: cubic-bezier(0.2, 0, 0, 1);
  --ra-dur: 0.15s;
}