/* =========================================================================
   API 투자전략센터 — Design Tokens
   Shared across all pages. Dark-first, with a light theme via [data-theme].
   Brand: LS navy #003378 + bright cyan/sky secondary accents.
   ========================================================================= */

:root {
  /* ---- Brand constants (theme-independent) ---- */
  --brand-navy: #003378; /* 사용 안함 */
  --brand-navy-700: #00295f;
  --brand-navy-500: #00429e;
  --brand-navy-300: #2f65c9;
  --brand-navy-200: #afc0d9; /* 사용 안함 */
  --brand-navy-100: #eff6fe;

  /* 메인 히어로 — 배경 영상이 테마별로 따로 있다(index.html 이 갈아끼운다). */
  --hero-bg: #000004;
  --hero-title: #ffffff;
  --hero-title-accent: #0779e4;
  --hero-sub: rgba(255, 255, 255, 0.7);
  --hero-cta-bg: #0779e4;
  --hero-cta-bg-hover: #1a8cf5;

  /* fixed status colors (same in light & dark) */
  --color-success: #2bd66e;
  --color-warning: #f0b072;
  --color-rose: #ff6b81; /* 강조색 */
  --copy-btn-text: #aab6d4;

  /* code editor palette (constant across themes) */
  --code-bg: #0b0f1c;
  --code-line: #1b2540;
  --code-text: #cdd6f4;
  --code-kw: #7aa2ff;
  --code-str: #9ce0a8;
  --code-num: #f0b072;
  --code-fn: #4fd6e6;
  --code-punc: #7e8aa8;
  --code-comment: #58658a;
  --code-file: #8593b5; /* 코드/터미널 부가 텍스트 · icon-btn 기본색과 공유 */

  /* type */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* type scale — PC, from Figma node 850:548 (Bold=700 / ExtraBold=800 / Medium=500)
     line-height is a unitless ratio, so one definition covers both PC and mobile font-size overrides below */
  --fs-h1: 40px;        --lh-h1: 1.45;   /* Bold, 서브 hero 텍스트 */
  --fs-h2: 23px;        --lh-h2: 1.5;    /* ExtraBold, 스텝 타이틀 */
  --fs-h3: 20px;        --lh-h3: 1.45;   /* ExtraBold, 소제목 */
  --fs-title-sub: 18px; --lh-title-sub: 1.5; /* ExtraBold, 본문 내 소제목 */
  --fs-text-md: 16px;   --lh-text-md: 1.5;   /* Medium, 본문/리스트/버튼(lg) */
  --fs-text-sm: 14px;   --lh-text-sm: 1.5;   /* Medium, eyebrow/버튼(sm)/표 항목 */
  --fs-code-chip: 13px; --lh-code-chip: 1.5; /* JetBrains Mono Medium, 코드칩 */
  --fs-no: 12px;        --lh-no: 1.5;    /* Bold, 스텝 넘버(kiwi-num) */
  --fs-input: 15px;     --lh-input: 1.5; /* Medium, 검색/텍스트 입력창 공통 */
  --fs-badge: 12px;     --lh-badge: 1.4; /* 뱃지/칩/태그 pill 공통 (게시판 상태표시 뱃지 제외) */

  /* radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* spacing rhythm */
  --space-section: clamp(80px, 9vw, 150px);
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --gutter-wide: clamp(20px, 4vw, 80px);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Compatibility aliases --------------------------------------------
     본 프로젝트 전용 토큰. 원본 팔레트(accent-prime / surface-blue / text-dim)로
     매핑해 두어, 아직 이 이름을 참조하는 규칙들이 새 팔레트를 따라가게 한다.
     커스텀 프로퍼티는 사용 시점에 치환되므로 :root 한 곳 정의로 라이트/다크 모두 커버된다. */
  --accent-sky: var(--accent-prime);
  --accent-grad: var(--accent-prime);
  --accent-grad-soft: var(--surface-blue);
  --text-muted: var(--text-dim);
  --r-xl: 30px;
}

/* mobile: halve radius tokens (pill excluded) */
@media (max-width: 640px) {
  :root {
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 11px;
  }
}

/* mobile: type scale — from Figma node 853:685 (Bold=700 / ExtraBold=800 / Medium=500) */
@media (max-width: 640px) {
  :root {
    --fs-h1: 24px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-title-sub: 16px;
    --fs-text-md: 14px;
    --fs-text-sm: 13px;
    --fs-code-chip: 13px;
    --fs-no: 12px;
    --fs-input: 14px;
    --fs-badge: 10px;
  }
}

/* mobile: tighten the shared screen-edge gutter from 20px to 16px */
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
    --gutter-wide: 16px;
  }
}

/* =======================  DARK (default)  ======================= */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --accent-cyan: #58b9ff;
  --accent-prime: #0779e4;

  --bg: #131415; /*BG-base*/
  --bg-2: #16181b;/*BG-dark*/
  /* --bg-grad: radial-gradient(120% 90% at 78% -8%, rgba(52,225,255,0.10), transparent 46%),
             radial-gradient(110% 80% at 12% 4%, rgba(0,51,120,0.42), transparent 50%),
             linear-gradient(180deg, #070a12 0%, #0c1120 100%); */
  --bg-gray: #17181b;
  --bg-grad:
    linear-gradient(180deg, rgba(87, 98, 255, 0.20) 0%, rgba(87, 98, 255, 0) 45% 0%), 
    var(--bg);
  --surface: rgba(39, 42, 44, 0.4); /*BG-box*/
  --surface-solid: #131415; /*BG-float*/
  --surface-2: rgba(53, 57, 67, 0.34); /*BG-gray-dim*/
  --surface-hover: rgba(255, 255, 255, 0.07);
  --surface-blue: #29324B;/*BG-blue*/

  --border: rgba(117, 120, 125, 0.28);  /*Stroke-dim*/
  --border-strong: rgba(105, 108, 112, 0.7); /*Stroke-strong*/
  --border-glow: var(--accent-prime); /* accent-cyan-tinted Stroke-accent */ 

  --text: #ffffff; /*Text-strong*/
  --text-2: #d2d7df; /*Text-base*/
  --text-dim: rgba(210, 215, 223, 0.65); /*Text-dim*/
  --text-inactive: #585c66;/*Text-inactive*/
  --text-accent: var(--accent-cyan);
  --text-wh: #fff;

  --on-accent: #ffffff;
  --grid-line: rgba(255, 255, 255, 0.09);
  --spotlight-color: rgba(87, 98, 255, 0.10);
  --glow-cyan: rgba(52, 164, 255, 0.45);
  --glow-navy: rgba(43, 96, 200, 0.5);

  --chip-bg: var(--surface-blue);
  --chip-text: var(--accent-cyan);
  --chip-border: var(--brand-navy-700);

  --shadow-card: 0 24px 60px -28px rgba(0,0,0,0.8);
  --shadow-float: 0 40px 90px -30px rgba(0, 8, 24, 0.9), 0 2px 0 rgba(3, 18, 47, 0.8) inset;

  --btn-primary-bg: var(--accent-prime);
  --btn-primary-text: #ffffff;
  --header-bg: rgba(7, 10, 18, 0.72);
}

/* =======================  LIGHT  ======================= */
:root[data-theme="light"] {
  color-scheme: light;

  /* punchier, higher-contrast accents for light backgrounds */
  --accent-cyan: #2250E3;
  --accent-prime: #2250E3;

  --bg: #F6FBFF;
  --bg-2: #ffffff;
  /* --bg-grad: radial-gradient(120% 90% at 82% -10%, rgba(52,225,255,0.16), transparent 46%),
             radial-gradient(110% 80% at 8% -4%, rgba(0,51,120,0.10), transparent 52%),
             linear-gradient(180deg, #eef3fb 0%, #f6f9fe 100%); */
  --bg-grad:
      linear-gradient(180deg, rgba(119, 182, 255, 0.20) 0%, rgba(119, 182, 255, 0.00) 30% 0%), 
      var(--bg);
  --bg-gray: rgba(215, 216, 219, 0.4);
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: rgba(219, 231, 252, 0.28);
  --surface-hover: #f7fafe;
  --surface-blue: #DCE9FF;

  --border: rgba(68, 70, 77, 0.16); /* text-tinted */
  --border-strong: rgba(68, 70, 77, 0.28); /* text-tinted */
  --border-glow: var(--accent-cyan);

  --text: #1f1f22;
  --text-2: #4f5155;
  --text-dim: rgba(79, 81, 85, 0.7);
  /* 원본은 #c0c5ce. 라이트 테마 흰 배경 위에서 대비 1.73:1 이라
     파일 크기·게시글 번호 같은 메타 텍스트가 사실상 안 보인다.
     "비활성" 톤은 유지하면서 3.2:1 까지만 끌어올린 값. */
  --text-inactive: #8a909c;
  --text-accent: var(--accent-cyan); /* 사용 안함 */
  --text-wh: #fff;

  --on-accent: #ffffff;
  --grid-line: rgba(8, 30, 70, 0.09);
  --spotlight-color: rgba(255, 255, 255, 0.4);
  --glow-cyan: rgba(52, 123, 255, 0.4);
  --glow-navy: rgba(0, 51, 120, 0.18);

  --chip-bg: var(--surface-blue);
  --chip-text: var(--text-accent);
  --chip-border: rgba(0, 51, 120, 0.16);

  --shadow-card: 0 18px 44px -26px rgba(38, 88, 182, 0.28);
  --shadow-float: 0 40px 80px -34px rgba(64, 119, 223, 0.25), 0 1px 0 rgba(255, 255, 255, 0.8) inset;

  --btn-primary-bg: var(--accent-prime);
  --btn-primary-text: var(--text-wh);
  --header-bg: rgba(255, 255, 255, 0.78);

  /* 메인 히어로 — 라이트 배경 영상에 맞춘 값. 시안 실측값이라 팔레트 토큰을 참조하지 않는다. */
  --hero-bg: #e5e3e4;
  --hero-title: #1f1f22;
  --hero-title-accent: #207dff;
  --hero-sub: rgba(31, 31, 34, 0.7);
  --hero-cta-bg: #0e6aff;
  --hero-cta-bg-hover: #2f7cff;
}