/* ==========================================================
   tokens.css — DailyFinLab Global Design Tokens
   Role: Design values ONLY (no layout, no selectors)
   Theme: Light Mode Fixed
   ========================================================== */

/* ==========================================================
   📐 Breakpoint 참조표 (문서용 — CSS 커스텀 프로퍼티는 @media
   조건식 안에서 쓸 수 없어서 실제 값은 각 media query에 그대로
   숫자로 적혀있다. 새 breakpoint 를 추가하기 전에 이 표에서 맞는
   값을 먼저 찾고, 없으면 여기에 이유를 적고 추가할 것.
   ------------------------------------------------------
     480px  — 초소형 모바일 (구형 안드로이드 등)
     640px  — 모바일 기본 (가장 많이 쓰는 전역 모바일 기준)
     768px  — 태블릿 소형(iPad mini) / 모바일-태블릿 경계
     800px  — 태블릿 소형 대안 (post-grid 카드 1열 전환 등, 768 로
              합칠 수 없는 콘텐츠 폭 기준 — 유지)
     900px  — 헤더 전용: 데스크톱 내비게이션 → 모바일 토글 전환점
              (헤더 폭 여유 기준, 다른 800/768 과 목적이 다름)
     1024px — 태블릿 가로모드 / 작은 데스크톱
     1100px — post-grid 카드 그리드 전용 (사이드바 있는 데스크톱 폭)
   또한 orientation:landscape 는 폭이 아니라 max-height(400/500px)
   기준이라 이 표와 별개다.
   ========================================================== */

/* --------------------------------------
   🌞 Light mode tokens (default & fixed)
-------------------------------------- */
:root {
  /* ======================================================
     Text
  ====================================================== */
  --text: #222;
  --muted: #555;

  /* ======================================================
     Backgrounds
  ====================================================== */
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --divider: #e9edf3;
  --card-border: #e9edf3;

  /* ======================================================
     Shadows
  ====================================================== */
  --shadow-base: 0 4px 14px rgba(0, 0, 0, 0.03),
                 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 8px 18px rgba(0, 0, 0, 0.05),
                  0 2px 6px rgba(0, 0, 0, 0.04);

  /* ======================================================
     Typography
  ====================================================== */
  --base-font: "Pretendard Variable", "Pretendard",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", Arial, sans-serif;

  --base-size: 18px;
  --caption-size: 14px;
  --line-height: 1.65;

  /* ======================================================
     Layout
  ====================================================== */
  --content-max: 1200px;
  --top-gap: 18px;
  --header-gap: 10px;
  --sidebar-align-offset: 8px;

  /* ======================================================
     Header (CRITICAL)
     → components/header.css에서 직접 사용
  ====================================================== */
  --logo-h: 36px;            /* Desktop logo height */
  /* 현재 미사용 - 향후 확장용 */
  --header-pad-y: 14px;      /* Header vertical padding */
  --header-pad-x: 40px;      /* Header horizontal padding */

  /* ======================================================
     UI / Accent
  ====================================================== */
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --accent: #e11d48;
  --success: #16a34a;
  --warning: #f59e0b;

  /* ======================================================
     Header
  ====================================================== */
  --header-divider: #e9edf3;

  /* ======================================================
     Buttons
  ====================================================== */
  --btn-bg: #2563eb;
  --btn-tx: #ffffff;
  --btn-bg-h: #1d4ed8;

  /* ======================================================
     Form Inputs
  ====================================================== */
  --inp-border: #d1d5db;
  --inp-focus-bd: #2563eb;
  --inp-focus-ring: rgba(37, 99, 235, 0.15);

  /* ======================================================
     Cards
  ====================================================== */
  --card-thumb-h: 150px;

  /* ======================================================
     Aliases
     ------------------------------------------------------
     components/post-grid.css, components/related-posts.css,
     pages/home-latest.css 가 참조하던 --dfl-border/--dfl-text-muted
     는 여기 정의가 없어 늘 fallback 값만 적용되는 죽은 변수였다.
     실제 의미 토큰(--card-border/--muted)에 별칭을 걸어 연결한다.
  ====================================================== */
  --dfl-border: var(--card-border);
  --dfl-text-muted: var(--muted);

  /* ======================================================
     Educational Post Style (single-edu.css / table-edu.css)
     ------------------------------------------------------
     "Post Style: Educational" 메타박스를 선택한 글에만 적용되는
     별도 색 팔레트. 기존 값과 동일하게 유지, 여기로만 값을 모아
     한 곳에서 바꿀 수 있게 토큰화.
  ====================================================== */
  --edu-text: #333;
  --edu-heading: #1a1a1a;
  --edu-heading-2: #2c3e50;
  --edu-heading-3: #34495e;
  --edu-accent: #3498db;
  --edu-accent-dark: #2980b9;
  --edu-muted: #666;

  --edu-info-bg: #f8f9fa;
  --edu-success-bg: #e8f5e9;
  --edu-success-border: #4caf50;
  --edu-success-text: #2e7d32;
  --edu-warning-bg: #fff3cd;
  --edu-warning-border: #ffc107;
  --edu-warning-text: #856404;
  --edu-danger-bg: #f8d7da;
  --edu-danger-border: #dc3545;
  --edu-danger-text: #721c24;

  --edu-card-bg: #f8f9fa;
  --edu-card-border: #dee2e6;
  --edu-divider: #e0e0e0;

  --edu-table-border: #ddd;
  --edu-table-header-bg: var(--edu-accent);
  --edu-table-header-border: var(--edu-accent-dark);
  --edu-table-row-alt: #f8f9fa;
  --edu-table-row-hover: #f0f4ff;
  --edu-table-header-emphasis-bg: #f5f5f5;

  --edu-code-bg: #f5f5f5;
  --edu-code-text: #d63384;
  --edu-hr: #ddd;
  --edu-chart-bg: #f9f9f9;
  --edu-chart-border: #e0e0e0;
}

/* --------------------------------------
   🌙 Dark mode detected
   Policy: keep light theme colors intentionally
-------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* intentionally identical */
    --text: #222;
    --muted: #555;
    --page-bg: #ffffff;
    --card-bg: #f9fafb;
    --divider: #e9edf3;
    --card-border: #e9edf3;
  }
}