/* ============================================================
   ticker.bullstory.io — 디자인 토큰 v1.0
   다크 프리미엄 테마 + 글래스모피즘

   기반: bullstory-shop shared.css 토큰 체계 계승
   테마: 다크 (라이트 모드 없음)
   브랜드: accent #CE0000 (bullstory.io 일관성 유지)
   그리드: 8px 기반 spacing 정규화
   ============================================================ */

:root {

  /* ────────────────────────────────────────────────
     1. Elevation Map — 배경색 계층 (Layer 0–4)
     순흑(#000) 대신 근흑(near-black)으로 깊이감 + 고급감
     ──────────────────────────────────────────────── */

  /* Layer 0 — 앱 전체 배경, Three.js 캔버스 뒤 */
  --bg-dark: #0a0a0f;

  /* Layer 1 — 네비게이션, 풋터, 사이드 패널 */
  --bg-dark-elevated: #12121a;

  /* Layer 2 — 카드, 패널 기본 배경 (글래스모피즘 base) */
  --bg-dark-card: rgba(255, 255, 255, 0.03);

  /* Layer 3 — 카드 hover 상태 */
  --bg-dark-card-hover: rgba(255, 255, 255, 0.06);

  /* Layer 1.5 — elevated 배경 hover (flat-card 등 불투명 hover) */
  --bg-dark-elevated-hover: #1c1c28;

  /* Layer 4 — 입력 필드 배경 (함몰/inset 느낌) */
  --bg-dark-input: rgba(255, 255, 255, 0.05);

  /* Layer 2.5 — 코드 블록, 테이블 헤더 등 미세한 강조 배경 */
  --bg-subtle: rgba(255, 255, 255, 0.04);

  /* 스크림 — 모달 배경 오버레이 */
  --bg-scrim: rgba(0, 0, 0, 0.6);

  /* ────────────────────────────────────────────────
     2. 브랜드 Accent (#CE0000 계열)
     bullstory.io와 동일 accent — 서브도메인 브랜드 일관성
     ──────────────────────────────────────────────── */

  --accent-color: #CE0000;
  --accent-deep: #9B0000;
  --accent-glow: rgba(206, 0, 0, 0.25);
  --accent-soft: rgba(206, 0, 0, 0.08);

  /* Accent 테두리 (featured 카드, 강조 요소) */
  --accent-border: rgba(206, 0, 0, 0.3);
  --accent-border-hover: rgba(206, 0, 0, 0.5);

  /* 프리미엄 그래디언트 (CTA, 히어로 텍스트) */
  --gradient-premium: linear-gradient(135deg, #CE0000 0%, #FF4444 50%, #9B0000 100%);
  --gradient-text: linear-gradient(135deg, #CE0000 0%, #FF4444 40%, #FF6B6B 100%);

  /* ────────────────────────────────────────────────
     3. 텍스트 색상
     순백(#fff) 대신 약간 회색빛 — 눈부심 방지
     ──────────────────────────────────────────────── */

  /* 기본 텍스트 — WCAG AAA 대비 15.8:1 on --bg-dark */
  --text-dark-primary: #e8e8ed;

  /* 보조 텍스트 */
  --text-dark-secondary: #8b8b96;

  /* 비활성/힌트 — 대비 약 5.0:1 on --bg-dark, WCAG AA 충족 */
  --text-dark-muted: #7f7f89;

  /* 역방향 텍스트 (accent 배경 위) */
  --text-on-accent: #ffffff;

  /* ────────────────────────────────────────────────
     4. 상태 색상
     금융 데이터 시각화용 — 상승/보합/하락 직관
     ──────────────────────────────────────────────── */

  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* 상태 배경 (배지/칩용 반투명) */
  --color-success-soft: rgba(34, 197, 94, 0.12);
  --color-warning-soft: rgba(245, 158, 11, 0.12);
  --color-danger-soft: rgba(239, 68, 68, 0.12);
  --color-info-soft: rgba(59, 130, 246, 0.12);
  --color-code: #a78bfa;

  /* ────────────────────────────────────────────────
     5. 글래스모피즘 토큰 (--glass-*)
     다크 테마 전용 — 반투명 유리 효과
     성능 주의: 뷰포트당 backdrop-filter 요소 ≤ 5개
     히어로(Three.js) 영역에서는 사용 금지
     ──────────────────────────────────────────────── */

  /* 카드 기본 배경 — 미세한 백색 반투명 */
  --glass-bg: rgba(255, 255, 255, 0.03);

  /* 카드 hover 배경 */
  --glass-bg-hover: rgba(255, 255, 255, 0.06);

  /* 강조 글래스 (네비게이션 등) */
  --glass-bg-strong: rgba(10, 10, 15, 0.8);

  /* 글래스 테두리 — 미세한 빛 반사선 */
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);

  /* 테두리 hover 강조 */
  --glass-border-hover: 1px solid rgba(255, 255, 255, 0.12);

  /* 테두리 focus 강조 */
  --glass-border-focus: 1px solid rgba(206, 0, 0, 0.4);

  /* 글래스 상단 하이라이트 — 카드 상단 edge 빛줄기 */
  --glass-sheen: rgba(255, 255, 255, 0.06);

  /* backdrop-filter 조합 — blur 20px + 채도 180% */
  --glass-blur: 20px;
  --glass-saturation: 180%;

  /* ────────────────────────────────────────────────
     6. 그림자 토큰 (Shadow / Elevation)
     다크 테마에서는 그림자 강도 상향 (배경이 어두우므로)
     ──────────────────────────────────────────────── */

  /* 카드 기본 */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* 카드 hover */
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* 카드 pressed */
  --shadow-card-pressed: 0 1px 4px rgba(0, 0, 0, 0.4);

  /* 모달, 드롭다운 (최상위 레이어) */
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* accent glow — CTA 버튼 */
  --shadow-glow-accent: 0 0 20px rgba(206, 0, 0, 0.3), 0 0 60px rgba(206, 0, 0, 0.1);

  /* 히어로 텍스트 미세 glow */
  --shadow-glow-soft: 0 0 40px rgba(206, 0, 0, 0.08);

  /* 입력 필드 inset */
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);

  /* ────────────────────────────────────────────────
     7. Spacing — 8px 그리드 정규화
     점프 규칙: 최대 ×2, 대부분 ×1.33~×1.5
     4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 → 120
     ──────────────────────────────────────────────── */

  --space-2xs: 4px;    /* 아이콘-텍스트 간격 */
  --space-xs: 8px;     /* 최소 내부 여백 */
  --space-sm: 12px;    /* 카드 내부 요소 간격 */
  --space-md: 16px;    /* 기본 여백 */
  --space-lg: 24px;    /* 섹션 내 그룹 간격, 카드 padding */
  --space-xl: 32px;    /* 큰 카드 padding */
  --space-2xl: 48px;   /* 섹션 간 간격 */
  --space-3xl: 64px;   /* 큰 섹션 간격 */
  --space-4xl: 96px;   /* 히어로 여백 */
  --space-section: 120px; /* 페이지 섹션 구분 */

  /* ────────────────────────────────────────────────
     8. Border Radius
     ──────────────────────────────────────────────── */

  --radius-xs: 8px;    /* 인라인 배지, 작은 칩 */
  --radius-sm: 12px;   /* 카드 내부 요소, 버튼 */
  --radius-md: 16px;   /* 일반 카드 */
  --radius-lg: 24px;   /* 큰 패널, 모달, 히어로 카드 */
  --radius-xl: 32px;   /* 글래스 히어로 패널 — 프리미엄 곡면 */
  --radius-pill: 999px; /* 토글, 입력 필드, CTA 버튼 */

  /* ────────────────────────────────────────────────
     9. Typography
     Pretendard Variable — bullstory.io와 동일 폰트 체계
     ──────────────────────────────────────────────── */

  --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-base: 17px;
  --font-size-lg: 19px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 56px;
  --font-size-display: 72px;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter Spacing */
  --letter-tight: -0.025em;
  --letter-normal: -0.015em;
  --letter-wide: 0.02em;

  /* Line Height */
  --line-height-tight: 1.08;     /* 히어로 타이틀 */
  --line-height-normal: 1.47;    /* 제목 */
  --line-height-relaxed: 1.65;   /* 본문 — 보고서 가독성 최적화 */

  /* ────────────────────────────────────────────────
     10. 전환/모션
     ──────────────────────────────────────────────── */

  --transition-fast: 0.15s ease;
  --transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ────────────────────────────────────────────────
     11. Z-Index Scale
     Three.js 캔버스 / 콘텐츠 / UI 레이어 분리
     ──────────────────────────────────────────────── */

  --z-canvas: 0;       /* Three.js 배경 캔버스 */
  --z-content: 1;      /* 메인 콘텐츠 */
  --z-sticky: 10;      /* sticky 요소 */
  --z-nav: 20;         /* 네비게이션 */
  --z-dropdown: 30;    /* 드롭다운, 자동완성 */
  --z-modal: 50;       /* 모달 */
  --z-toast: 60;       /* 토스트 알림 */

  /* ────────────────────────────────────────────────
     12. 선(border) 토큰
     border 남용 금지 — 배경색 차이/그림자/여백으로 구분
     ──────────────────────────────────────────────── */

  --line-dark: rgba(255, 255, 255, 0.06);
  --line-dark-strong: rgba(255, 255, 255, 0.12);
  --line-width: 1px;

  /* ────────────────────────────────────────────────
     13. 레이아웃
     ──────────────────────────────────────────────── */

  --page-max-width: 960px;
  --page-padding: 32px;
  --page-padding-mobile: 20px;
  --nav-height: 56px;

  /* ────────────────────────────────────────────────
     14. 점수 시각화 (Score Tones)
     AI 분석 점수 시각화 — #0a0a0f 대비 4.5:1+ 보장
     ──────────────────────────────────────────────── */

  --score-tone-1: #ef5350;   /* 매우 낮음 — 대비 5.2:1 */
  --score-tone-2: #ffa726;   /* 낮음 — 대비 8.4:1 */
  --score-tone-3: #fdd835;   /* 보통 — 대비 12.1:1 */
  --score-tone-4: #66bb6a;   /* 높음 — 대비 7.8:1 */
  --score-tone-5: #42a5f5;   /* 매우 높음 — 대비 5.9:1 */

  /* ────────────────────────────────────────────────
     15. 링크 색상
     다크 배경 최적화 링크 — 보고서 본문 내 사용
     ──────────────────────────────────────────────── */

  --link-color: #64b5f6;
  --link-hover: #90caf9;

  /* ────────────────────────────────────────────────
     16. 가격 전용 타이포
     ──────────────────────────────────────────────── */

  --font-size-price: 36px;
}

/* ============================================================
   prefers-reduced-motion — 모션 비활성화 시 전환 최소화
   Three.js → 정적 CSS 그래디언트 대체용
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01s linear;
    --transition-smooth: 0.01s linear;
    --transition-spring: 0.01s linear;
  }
}