/* ============================================================
   PHAROS ERP 데모 — 디자인 토큰 (Figma 공식값 기준)
   ============================================================ */
:root {
  /* ---- 브랜드 / 인터랙션 ---- */
  --c-brand:        #003879;  /* 사이드바, 주버튼, 강조 (실측 rgb 0,56,121) */
  --c-brand-dark:   #002a5c;  /* 사이드바 진한 영역/호버 */
  --c-brand-darker: #001f44;
  --c-primary:      #376cfb;  /* 링크, 선택, 포커스 */
  --c-primary-weak: #82a3ff;  /* 호버 틴트 */
  --c-primary-bg:   #e6ecff;  /* 선택 배경 */

  /* ---- 텍스트 ---- */
  --c-text:        #333333;
  --c-text-2:      #666666;
  --c-text-3:      #888888;
  --c-text-disabled:#9b959f;
  --c-text-invert: #ffffff;

  /* ---- 보더 / 배경 ---- */
  --c-border:      #cccccc;
  --c-border-2:    #e4e4e4;
  --c-bg:          #ffffff;
  --c-bg-soft:     #f1f2f5;
  --c-bg-soft-2:   #f7f8fa;
  --c-bg-cool:     #e1e5ea;

  /* ---- 시맨틱 ---- */
  --c-error:       #ff2828;
  --c-required:    #ff2828;
  --c-success:     #0aa66e;
  --c-warn:        #ff8b1f;
  --c-overlay:     rgba(32,16,43,0.45);

  /* ---- 신용등급 뱃지 ---- */
  --c-grade-a:     #1c7ed6;   /* A+/A */
  --c-grade-b:     #0aa66e;   /* BBB계열 */
  --c-grade-c:     #ff8b1f;   /* BB+/B+/B */
  --c-grade-d:     #ff2828;   /* C */

  /* ---- 타이포 ---- */
  --font-base: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'system-ui', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --c-sidebar-company: #89b2ff;  /* 사이드바 회사명 (실측) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- 간격 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- radius / shadow ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.16);

  /* ---- 레이아웃 치수 ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 60px;
  --header-h: 54px;
  --tabbar-h: 38px;

  /* ---- z-index ---- */
  --z-header: 100;
  --z-popover: 800;
  --z-modal: 1000;
  --z-toast: 1200;
}

/* ============================================================
   튜토리얼 셸 전용 토큰 (--t-*)
   ------------------------------------------------------------
   ※ 이 블록은 **파로스 실제 화면(ERP 재현 화면)에 절대 영향을 주지 않는다.**
     위 --c-* / --fs-* / --r-* 는 실서비스 1:1 재현에 쓰이므로 값을 바꾸지 않고,
     튜토리얼 셸(메인·투어 오버레이·인트로/완료 카드·레일)만 여기 --t-* 를 쓴다.
     ERP 화면 쪽에서 --t-* 를 참조하는 곳은 없으므로 순수 추가다.

   :root 에 두는 이유 — 튜토리얼 UI 는 두 군데에서 렌더된다.
     · #app 안의 .gh-host (메인)
     · #overlay-root 안의 모달/오버레이 (인트로·완료 카드, 투어 툴팁)
     예전에는 토큰이 .gh-host 에만 있어서 오버레이 쪽은 색을 직접 박아야 했다
     (카드 배너의 #47A6FF·#10233F). :root 로 올려 두 곳이 같은 값을 공유한다.
   ============================================================ */
:root {
  /* ---- 면 색 ---- */
  --t-navy:        #10233F;   /* 튜토리얼 상단 바 · 완료 카드 배너 */
  --t-blue:        #2563EB;   /* 인터랙션(활성 탭·링크·강조 숫자) */
  --t-blue-strong: #005CE3;   /* 히어로 그라디언트 끝 · 완료 체크 */
  --t-blue-light:  #47A6FF;   /* 히어로 그라디언트 시작 */
  --t-yellow:      #FFD631;   /* 히어로 헤드라인 강조 */

  /* ---- 글자 색 (진함 → 흐림) 5단 램프 ---- */
  --t-text:      #10233F;     /* 제목 */
  --t-text-body: #334155;     /* 팝업 본문 문단 — 여러 줄을 읽는 글이라 한 단계 진하게 */
  --t-text-2:    #56647B;     /* 보조 문장 · 메타 (예전 --gh-sub) */
  --t-text-3:    #6B7A90;     /* 라벨 · 머리말 (예전 --gh-muted) */
  --t-text-dim:  #9AA7B8;     /* 비활성 */
  --t-text-off:  #C1CAD8;     /* 빈 상태 */

  /* ---- 선 / 바탕 ---- */
  --t-line:        #D8DEEA;   /* 기본 테두리 */
  --t-line-strong: #C9D2E0;   /* 강한 구분선 */
  --t-surface:     #fff;      /* 카드 바탕 */
  --t-bg:          #F4F6FA;   /* 페이지 바탕 */
  --t-fill:        #EDF0F6;   /* 필터 띠 · 컬럼 빈 영역(바탕보다 한 톤) */
  --t-hover:       #F3F7FE;   /* 카드 hover */

  /* ---- 태그 ---- */
  --t-tag-blue-bg:  #EDF2FE; --t-tag-blue-fg:  #2563EB;
  --t-tag-green-bg: #EAF6EE; --t-tag-green-fg: #12813F;

  /* ---- 메인 히어로 밴드 그라디언트 (Figma 3:415 시안) ---- */
  --t-grad-hero: linear-gradient(90deg, var(--t-blue-light), var(--t-blue-strong));
  /* 팝업 카드 배너 — 밴드와 달리 **단색**이다(2026-08-12). 좁은 카드에서는 그라디언트가
     한쪽만 짙어 보여서, [이 화면 튜토리얼 시작] 버튼과 같은 파랑 한 톤으로 맞췄다. */
  --t-card-hero: var(--c-primary);

  /* ---- 곡선 — 9종이 흩어져 있던 걸 4단계로.
     규칙: **박스가 작을수록 곡선도 작게, 최대 12px 을 넘지 않는다.**
     새 요소는 아래 표에서 크기에 맞는 단계를 고르고, 중간값(5·9·14·16px)을 새로 만들지 않는다. */
  --t-r-xs:   4px;    /* 높이 ~24px — 뱃지 · 태그 */
  --t-r-sm:   6px;    /* 높이 25~40px — 버튼 · 작은 컨트롤 */
  --t-r:      8px;    /* 카드 · 박스 · 입력 (기본) */
  --t-r-lg:  12px;    /* 모달 · 툴팁 · 배너 — 상한 */
  --t-r-pill: 999px;  /* 알약 칩 전용(곡선 단계가 아니라 별도 '모양') */

  /* ---- 글자 크기 — 12.5/13.5 같은 반값을 없애고 정수 계단으로 ---- */
  --t-fs-xs:  11px;   /* 카운트 뱃지 */
  --t-fs-sm:  12px;   /* 캡션 · 메타 */
  --t-fs:     13px;   /* 튜토리얼 기본 본문 */
  --t-fs-md:  14px;   /* 탭 라벨 · 버튼 */
  --t-fs-lg:  15px;   /* 카드 제목 */
  --t-fs-xl:  16px;   /* 섹션 제목 */
  --t-fs-2xl: 20px;   /* 카드 배너 제목 */
  --t-fs-3xl: 32px;   /* 히어로 헤드라인 */

  /* ---- 팝업 타이포 역할 — 인트로 카드 · 완료 카드 · 투어 툴팁이 **같은 계단**을 쓴다.
     기준은 투어 툴팁(제목 20 / 본문 15)이었고, 나머지 둘이 16·14 로 작아 따로 놀았다. */
  --t-fs-heading: 20px;   /* 팝업 제목 (배너 헤드라인 · 툴팁 제목) */
  --t-fs-subhead: 18px;   /* 본문 안 섹션 제목 */
  --t-fs-body:    15px;   /* 본문 문단 */
  --t-lh-body:    1.75;   /* 본문 문단 행간 */

  /* ---- 버튼 — 색/곡선/텍스트를 한 곳에서 (튜토리얼 스코프 안에서만 적용) ---- */
  --t-btn-h:       34px;
  --t-btn-h-sm:    28px;
  --t-btn-pad-x:   16px;
  --t-btn-r:       var(--t-r-sm);
  --t-btn-fs:      var(--t-fs-md);
  --t-btn-fw:      var(--fw-semibold);
  /* 주버튼 바탕 — 지금은 전역 브랜드 남색을 그대로 쓴다. 튜토리얼 상단 바와 같은
     --t-navy 로 바꾸려면 이 한 줄만 고치면 된다(두 남색이 섞이는 문제는 별도 판단). */
  --t-btn-primary-bg:       var(--c-brand);
  --t-btn-primary-bg-hover: var(--c-brand-dark);
}