/* ============================================================================
   SALITA — Velocity 디자인 토큰 v1.0
   로드 사이클 훈련 플랫폼 / Performance sport theme
   ----------------------------------------------------------------------------
   벤치마킹(2025–26 어워드·스포츠 UI 공통 문법):
    · 단 하나의 고에너지 액센트(레이스 오렌지)를 CTA·진행·강조에만 절제 사용
    · 다크 모드는 근검정(#0C0D10) 베이스 — 눈부심 없이 데이터가 주인공
    · 초대형 수치 타이포 + 1px 정밀 보더("engineered precision")
    · 웜/쿨 밸런스가 잡힌 화이트 — 광택 대신 콘텐츠가 숨 쉬는 여백
   원칙: Pastel/Heritage 와 토큰 이름 100% 동일 — <link> 한 줄로 교체 가능.
        액센트는 '기능'에만: 파스텔·데코는 면 전용, 텍스트·마크 금지.
   ==========================================================================*/

:root {
  color-scheme: light;

  /* ── 1. 표면 ────────────────────────────────────────────────────────── */
  --canvas:          #F7F7F4;  /* 페이지 평면 — 웜/쿨 밸런스 화이트 */
  --canvas-sunk:     #EFEEE9;  /* 섹션 밴드 */
  --surface:         #FFFFFF;  /* 카드 / 차트 표면 */
  --surface-tint:    #FAF6F1;  /* 브랜드가 아주 옅게 스민 보조 카드 */
  --surface-raised:  #FFFFFF;  /* 팝오버·툴팁 (그림자로 구분) */
  --surface-invert:  #101114;  /* 반전 밴드 */

  /* ── 2. 잉크 ────────────────────────────────────────────────────────── */
  --ink-1:           #131417;  /* ≥16:1 */
  --ink-2:           #474C54;  /* ≥7:1  */
  --ink-3:           #5F656E;  /* ≥4.9:1 — 캡션·축 하한선 */
  --ink-invert:      #F0F1F4;

  /* ── 3. 선 ──────────────────────────────────────────────────────────── */
  --rule:            #E8E7E2;
  --rule-strong:     #CDCCC6;
  --rule-ink:        #131417;

  /* ── 4. 브랜드 ──────────────────────────────────────────────────────── */
  --primary:         #BC3F07;  /* Race Orange — 5.4:1 */
  --primary-press:   #98330A;
  --primary-wash:    #FCEDE3;
  --secondary:       #24478F;  /* Cobalt — 7.6:1 */
  --secondary-wash:  #E9EEF9;

  /* ── 5. 데코 = 장식 면 전용 (텍스트·아이콘·차트 마크 금지) ───────────── */
  --deco-1:          #FFE3D0;   /* Sunset  */
  --deco-2:          #D9E7FA;   /* Ice     */
  --deco-3:          #E3F4D7;   /* Volt    */
  --deco-4:          #ECE1F5;   /* Violet  */
  --deco-5:          #F4EDCB;   /* Sand    */

  /* ── 6. 상태 (아이콘 + 레이블 동반 필수) ─────────────────────────────── */
  --st-good:         #0E7A54;  /* 5.3:1 */
  --st-warn:         #96700F;  /* 4.5:1 */
  --st-crit:         #B23030;  /* 6.0:1 */
  --st-good-wash:    #E7F3EC;
  --st-warn-wash:    #F7F0DC;
  --st-crit-wash:    #FBEAE8;

  /* ── 7. 포커스 ──────────────────────────────────────────────────────── */
  --focus:           #2563C9;

  /* ── 8. 차트 — categorical (dataviz validator 검증값 유지) ────────────── */
  --series-1:        #007558;  /* teal   */
  --series-2:        #E67D58;  /* coral  ▲ 직접 레이블 필수 */
  --series-3:        #5D53AE;  /* indigo */
  --series-4:        #CBB042;  /* ochre  ▲ 직접 레이블 필수 */
  --series-5:        #BC4B87;  /* plum   */

  /* ── 9. 차트 — 파워존 ordinal ramp (단일 색상 265°) ───────────────────── */
  --z1: #9DB0D7;  --z2: #849AC9;  --z3: #6D85BB;  --z4: #5570AD;
  --z5: #3F5C9F;  --z6: #294790;  --z7: #153182;

  /* ── 10. 차트 크롬 ──────────────────────────────────────────────────── */
  --chart-surface:   #FFFFFF;
  --grid:            #EFEEE9;   /* 1px solid — dashed 금지 */
  --axis:            #CDCCC6;
  --delta-up-good:   #0E7A54;
  --delta-down-bad:  #B23030;

  /* ── 11. 타이포그래피 — 헤드라인은 크고 조밀하게(스포츠 디스플레이) ───── */
  --font-sans:    "Pretendard Variable", Pretendard, "Inter", system-ui,
                  -apple-system, "Segoe UI", sans-serif;
  --font-accent:  "Instrument Serif", "Noto Serif KR", Georgia, serif; /* 이탤릭 강조 전용 */
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  --fs-display-xl: clamp(3rem, 7vw, 5.25rem);
  --fs-display-l:  clamp(2.4rem, 5vw, 3.5rem);
  --fs-h1:         2.25rem;
  --fs-h2:         1.75rem;
  --fs-h3:         1.3rem;
  --fs-body-l:     1.0625rem;
  --fs-body:       1rem;
  --fs-sm:         0.875rem;
  --fs-xs:         0.75rem;

  --lh-tight: 1.02;
  --lh-snug:  1.2;
  --lh-body:  1.72;              /* 한글 본문 하한 */

  --tracking-display: -0.045em;  /* 조밀한 스포츠 디스플레이 */
  --tracking-over:     0.16em;

  /* ── 12. 공간 (4px 베이스) ──────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 36px;  --s-7: 56px;  --s-8: 80px;
  --s-9: 112px; --s-10: 144px;

  --container: 1200px;
  --gutter: 24px;

  /* ── 13. 형태 — 정밀한 각 + 필 CTA ──────────────────────────────────── */
  --r-sm: 5px;  --r-md: 9px;  --r-lg: 14px;  --r-pill: 999px;
  --border: 1px solid var(--rule);

  /* 그림자 — 뉴트럴 베이스에 브랜드 오렌지가 옅게 스민 값 */
  --shadow-1: 0 1px 2px rgba(19,20,23,.05), 0 2px 8px -4px rgba(188,63,7,.07);
  --shadow-2: 0 2px 4px rgba(19,20,23,.05), 0 18px 40px -18px rgba(188,63,7,.22);
  --shadow-pri: 0 6px 18px -8px rgba(188,63,7,.55);

  /* ── 14. 모션 — 짧고 탄력 있게 ──────────────────────────────────────── */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;
}

/* ── 다크 모드 — 근검정 베이스 위에 액센트가 발광하는 스포츠 대시보드 ───── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0C0D10;         --canvas-sunk: #07080A;
  --surface: #15171C;        --surface-tint: #1A1D23;   --surface-raised: #1E2129;
  --surface-invert: #F0F1F4;
  --ink-1: #F0F1F4;          --ink-2: #A8AEB9;   --ink-3: #8A919C;
  --ink-invert: #0C0D10;
  --rule: #24272F;           --rule-strong: #3A3F4A;   --rule-ink: #F0F1F4;
  --primary: #FF7B47;        --primary-press: #FF9770; --primary-wash: #2F180D;
  --secondary: #8FABEF;      --secondary-wash: #16223C;
  --deco-1: #3B2517; --deco-2: #1E2B47; --deco-3: #223420;
  --deco-4: #2C2242; --deco-5: #37301A;
  --st-good: #4FC98E;        --st-warn: #D9AB3C;       --st-crit: #EF7B72;
  --st-good-wash: #10281C;   --st-warn-wash: #2B2413;  --st-crit-wash: #2D1715;
  --focus: #85B5FF;
  --series-1: #3EA885;  --series-2: #BA4E25;  --series-3: #6B62BF;
  --series-4: #AE931D;  --series-5: #B94884;
  --z1: #354B7E; --z2: #496093; --z3: #5E75A8; --z4: #748CBD;
  --z5: #8BA2D3; --z6: #A3B9E9; --z7: #BBD1FF;
  --chart-surface: #15171C;  --grid: #22252C;  --axis: #3A3F4A;
  --delta-up-good: #4FC98E;  --delta-down-bad: #EF7B72;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.9);
  --shadow-pri: 0 8px 22px -8px rgba(255,123,71,.45);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --canvas: #0C0D10;         --canvas-sunk: #07080A;
    --surface: #15171C;        --surface-tint: #1A1D23;   --surface-raised: #1E2129;
    --surface-invert: #F0F1F4;
    --ink-1: #F0F1F4;          --ink-2: #A8AEB9;   --ink-3: #8A919C;
    --ink-invert: #0C0D10;
    --rule: #24272F;           --rule-strong: #3A3F4A;   --rule-ink: #F0F1F4;
    --primary: #FF7B47;        --primary-press: #FF9770; --primary-wash: #2F180D;
    --secondary: #8FABEF;      --secondary-wash: #16223C;
    --deco-1: #3B2517; --deco-2: #1E2B47; --deco-3: #223420;
    --deco-4: #2C2242; --deco-5: #37301A;
    --st-good: #4FC98E;        --st-warn: #D9AB3C;       --st-crit: #EF7B72;
    --st-good-wash: #10281C;   --st-warn-wash: #2B2413;  --st-crit-wash: #2D1715;
    --focus: #85B5FF;
    --series-1: #3EA885;  --series-2: #BA4E25;  --series-3: #6B62BF;
    --series-4: #AE931D;  --series-5: #B94884;
    --z1: #354B7E; --z2: #496093; --z3: #5E75A8; --z4: #748CBD;
    --z5: #8BA2D3; --z6: #A3B9E9; --z7: #BBD1FF;
    --chart-surface: #15171C;  --grid: #22252C;  --axis: #3A3F4A;
    --delta-up-good: #4FC98E;  --delta-down-bad: #EF7B72;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.9);
    --shadow-pri: 0 8px 22px -8px rgba(255,123,71,.45);
  }
}