/* ============================================================
   ChartControl — Design Tokens
   ------------------------------------------------------------
   Layer 1: BRAND TOKENS  (팔레트 · 브랜드 색상 · 프로덕트 정체성)
   Layer 2: SEMANTIC TOKENS (의미 기반 — bg/text/trade/signal/order/ai)
   Layer 3: COMPONENT TOKENS (컴포넌트별 세부 값)

   교체 가능: [data-brand="chartcontrol"(기본) | "institutional-cool" | "quantum-violet" | "onyx-emerald" | "graphite-amber"]
   교체 가능: [data-theme="dark" | "light"]
   교체 가능: [data-density="comfortable" | "compact" | "dense"]
   교체 가능: [data-longshort="teal-magenta" | "green-red" | "cyan-orange"]
   ============================================================ */

:root {
  /* ---------- BRAND TOKENS (기본: ChartControl Magenta · 2026-10-11 디자인 개편) ---------- */
  /* #F00FF0 = oklch(67.25% 0.3048 328.33). 500 은 공식 브랜드 색 그대로이고,
     나머지 단계는 같은 색상(328.33°), 명도 단조 증가, 채도는 sRGB 색역 상한값.
     예전 기본(시안)은 아래 [data-brand="institutional-cool"] 선택지로 남는다. */
  --brand-primary-50:  oklch(96% 0.030 328.33);
  --brand-primary-100: oklch(90% 0.060 328.33);
  --brand-primary-200: oklch(82% 0.120 328.33);
  --brand-primary-300: oklch(75% 0.200 328.33);
  --brand-primary-400: oklch(71% 0.260 328.33);
  /*
     ★ 공식 #F00FF0 = oklch(67.25% 0.3048 328.33). 화면 토큰은 명도만 69% 로 1.75%p 올렸다:
       67.25% 는 어두운 테마의 선택 배경(--color-bg-active) 위에서 4.34:1 로 글자 기준(4.5) 미달이었다(token-contrast 시험).
       69% = 4.65:1. 색상·채도는 같다 — 눈으로는 거의 구분되지 않는다. 로고 이미지는 공식 값 그대로다.
  */
  --brand-primary-500: oklch(69% 0.3048 328.33);   /* ≈ #F00FF0 (official brand, contrast-safe) */
  --brand-primary-600: oklch(56% 0.240 328.33);
  --brand-primary-700: oklch(46% 0.190 328.33);
  --brand-primary-800: oklch(34% 0.130 328.33);
  --brand-primary-900: oklch(24% 0.090 328.33);

  --brand-accent-500: oklch(71% 0.260 328.33);        /* light magenta (highlight) */
  --brand-neutral-hue: 240;                           /* cool blue-gray */

  /* ---------- LONG / SHORT (기본: Teal / Magenta) ---------- */
  --trade-long-500:  oklch(72% 0.14 175);
  --trade-long-400:  oklch(78% 0.12 175);
  --trade-long-600:  oklch(64% 0.15 175);
  --trade-long-bg:   oklch(72% 0.14 175 / 0.12);
  --trade-long-bg-2: oklch(72% 0.14 175 / 0.25);

  --trade-short-500: oklch(68% 0.22 355);
  --trade-short-400: oklch(74% 0.20 355);
  --trade-short-600: oklch(60% 0.24 355);
  --trade-short-bg:  oklch(68% 0.22 355 / 0.12);
  --trade-short-bg-2:oklch(68% 0.22 355 / 0.25);

  /* ---------- AI / SIGNAL (팔레트 독립) ---------- */
  --ai-500: oklch(72% 0.15 285);
  --ai-400: oklch(78% 0.13 285);
  --ai-600: oklch(64% 0.16 285);
  --ai-bg:  oklch(72% 0.15 285 / 0.10);
  --ai-bg-2: oklch(72% 0.15 285 / 0.22);

  --signal-draft:    var(--ai-500);
  --signal-approved: oklch(78% 0.14 145);
  --order-pending:   oklch(80% 0.13 85);
  --order-filled:    oklch(75% 0.13 145);
  --order-canceled:  oklch(60% 0.02 240);
  --order-rejected:  var(--trade-short-500);

  --warning-500: oklch(80% 0.14 75);
  --danger-500:  oklch(64% 0.20 25);
  --success-500: oklch(74% 0.14 150);
  /* 정보 상태는 브랜드와 분리한다 — 마젠타 브랜드에서 info 가 오류처럼 보이는 것을 막는다 */
  --info-500:    oklch(66% 0.16 250);

  /* ---------- NEUTRALS (Dark 기본) ---------- */
  --n-950: oklch(14% 0.012 240);
  --n-925: oklch(17% 0.013 240);
  --n-900: oklch(20% 0.014 240);
  --n-850: oklch(24% 0.014 240);
  --n-800: oklch(28% 0.013 240);
  --n-700: oklch(38% 0.012 240);
  --n-600: oklch(48% 0.010 240);
  /*
     ★★★ **58% → 63%.** 명암비 미달의 단일 최대 원인이었다.

       실측(프로덕션, 브라우저가 실제로 그리는 sRGB 로 계산):
         텍스트 1,093개 중 미달 483개 → 그중 **340개가 이 한 토큰**이다.
         비율이 bg-base 4.65 / bg-surface 4.47 / bg-elevated 3.85 로,
         **4.5 기준에 간발의 차로 미달**했다(surface 4.47).

     ★ 처음 63% 로 올렸더니 483건 → 22건이 됐다. 그런데 **4건이 4.46 으로 남았다** —
       배경 후보를 base/surface/elevated 셋만 보고 정한 값이라 **--color-bg-hover(28%)**
       를 놓쳤다. 목록에 있는 것만 확인하면 목록에 없는 것에서 실패한다.

     ★ 다섯 배경(base·surface·elevated·input·hover)을 모두 훑어 다시 구했다:
         L=65% → 최저 4.51 (hover)   ← 통과하지만 여유 없음
         L=66% → 최저 4.69 (hover)   ← 이것으로 둔다

     ★★ **oklch 라서 rgb 전용 도구로는 잴 수 없다.** 이 저장소에서 실제로 두 번
       틀렸다: 감사 보고서의 "322건" 도, 그것을 확인하려던 첫 측정도 oklch 의 숫자
       (0.58 / 0.008 / 240)를 RGB 로 읽어 비율 1.0 같은 값을 냈다.
       올바른 방법은 canvas 에 그려 getImageData 로 실제 픽셀을 읽는 것이다.

     ★ 이 토큰은 --color-text-tertiary 와 --chart-axis-text 다 — 보조 문구와 차트 축
       라벨. 양이 많고 작은 글씨라 접근성 영향이 가장 크다.
  */
  --n-500: oklch(66% 0.008 240);
  --n-400: oklch(68% 0.006 240);
  --n-300: oklch(78% 0.005 240);
  --n-200: oklch(86% 0.004 240);
  --n-100: oklch(92% 0.003 240);
  --n-050: oklch(97% 0.002 240);
  --n-000: oklch(100% 0 0);

  /* ---------- SEMANTIC — Dark theme (default) ---------- */
  --color-bg-app:       var(--n-950);
  --color-bg-surface:   var(--n-925);
  --color-bg-panel:     var(--n-900);
  --color-bg-elevated:  var(--n-850);
  --color-bg-hover:     oklch(28% 0.014 240 / 0.6);
  --color-bg-active:    oklch(32% 0.016 240 / 0.7);
  --color-bg-input:     var(--n-925);

  --color-text-primary:   var(--n-050);
  --color-text-secondary: var(--n-300);
  --color-text-tertiary:  var(--n-500);
  --color-text-disabled:  var(--n-700);
  --color-text-inverse:   var(--n-950);

  --color-border-subtle:  oklch(28% 0.014 240 / 0.6);
  --color-border-default: oklch(38% 0.014 240 / 0.7);
  --color-border-strong:  oklch(48% 0.014 240 / 0.9);
  --color-border-focus:   var(--brand-primary-500);

  --color-brand:          var(--brand-primary-500);
  --color-brand-hover:    var(--brand-primary-400);
  --color-brand-subtle:   oklch(67.25% 0.3048 328.33 / 0.14);

  --color-on-trade: oklch(18% 0.02 220);
  --color-trade-long:     var(--trade-long-500);
  --color-trade-short:    var(--trade-short-500);
  --color-trade-long-bg:  var(--trade-long-bg);
  --color-trade-short-bg: var(--trade-short-bg);

  --color-ai:             var(--ai-500);
  --color-ai-bg:          var(--ai-bg);
  --color-signal-draft:   var(--signal-draft);
  --color-signal-approved:var(--signal-approved);
  --color-order-pending:  var(--order-pending);
  --color-order-filled:   var(--order-filled);
  --color-order-canceled: var(--order-canceled);
  --color-order-rejected: var(--order-rejected);

  --color-warning: var(--warning-500);
  --color-danger:  var(--danger-500);
  --color-success: var(--success-500);
  --color-info:    var(--info-500);

  /* ---------- CHART COLORS ---------- */
  --chart-grid:       oklch(28% 0.014 240 / 0.5);
  --chart-axis-text:  var(--n-500);
  --chart-crosshair:  oklch(70% 0.03 240 / 0.6);
  --chart-candle-up:  var(--color-trade-long);
  --chart-candle-dn:  var(--color-trade-short);
  --chart-ma-1:       oklch(80% 0.13 85);   /* MA20 amber */
  --chart-ma-2:       oklch(78% 0.13 285);  /* MA60 violet */
  --chart-ma-3:       oklch(76% 0.13 210);  /* MA120 cyan */
  --chart-volume-up:  oklch(72% 0.14 175 / 0.35);
  --chart-volume-dn:  oklch(68% 0.22 355 / 0.35);

  /* 지표 라인 팔레트 — 여러 지표를 겹쳐 그릴 때 쓰는 8색(지표 라이브러리 v2 전용).
     chart-indicators.js 의 hex 폴백은 DOM 없는 환경용 안전망이라 그대로 둔다. */
  --chart-line-1: oklch(67.25% 0.3048 328.33);   /* brand magenta */
  --chart-line-2: oklch(72% 0.15 175);
  --chart-line-3: oklch(70% 0.14 250);
  --chart-line-4: oklch(76% 0.14 85);
  --chart-line-5: oklch(70% 0.16 285);
  --chart-line-6: oklch(72% 0.13 200);
  --chart-line-7: oklch(70% 0.15 145);
  --chart-line-8: oklch(68% 0.18 355);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Pretendard Variable', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-num:  'IBM Plex Mono', 'Pretendard Variable', ui-monospace, monospace;
  --font-en:   'IBM Plex Sans', 'Pretendard Variable', system-ui, sans-serif;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;
  --fs-4xl: 28px;
  --fs-5xl: 36px;

  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- SPACING (density: Comfortable 기본) ---------- */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-16: 32px;
  --sp-20: 40px;

  --density-scale: 1;
  --row-h-xs: calc(20px * var(--density-scale));
  --row-h-sm: calc(24px * var(--density-scale));
  --row-h-md: calc(28px * var(--density-scale));
  --row-h-lg: calc(32px * var(--density-scale));
  --input-h:  calc(32px * var(--density-scale));
  --btn-h:    calc(32px * var(--density-scale));
  --header-h: 48px;
  --sub-header-h: 56px;

  /* ---------- RADII ---------- */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-full: 999px;

  /* ---------- BORDER / SHADOW / OPACITY ---------- */
  --bw-1: 1px;
  --bw-2: 2px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow-ai: 0 0 0 1px var(--color-ai), 0 8px 24px oklch(72% 0.15 285 / 0.25);

  --opacity-disabled: 0.4;
  --opacity-hover: 0.85;

  /* ---------- MOTION ---------- */
  --dur-instant: 60ms;
  --dur-fast: 120ms;
  --dur-normal: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-INDEX ---------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
  --z-max: 9999;

  /* ---------- BREAKPOINTS (values only) ---------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
  --bp-3xl: 1680px;
  --bp-4xl: 1920px;

  /* ---------- WIDGET GRID ---------- */
  --grid-cols: 24;
  --grid-gap: var(--sp-3);
  --grid-row: 40px;
}

/* ============ BRAND VARIANTS ============ */
/* 예전 기본값이던 시안 팔레트(명암비 보정값 포함). 이제 기본이 아니라 선택 옵션이다. */
[data-brand="institutional-cool"] {
  --brand-primary-50:  oklch(96% 0.02 220);
  --brand-primary-100: oklch(90% 0.04 220);
  --brand-primary-200: oklch(80% 0.08 220);
  --brand-primary-300: oklch(70% 0.11 220);
  --brand-primary-400: oklch(62% 0.13 220);
  --brand-primary-500: oklch(64% 0.15 220);   /* signature cyan */
  --brand-primary-600: oklch(48% 0.14 220);
  --brand-primary-700: oklch(38% 0.11 220);
  --brand-primary-800: oklch(28% 0.08 220);
  --brand-primary-900: oklch(20% 0.05 220);
  --brand-accent-500: oklch(78% 0.13 210);    /* light cyan (highlight) */
  --brand-neutral-hue: 240;                    /* cool blue-gray */
  --color-brand: var(--brand-primary-500);
  --color-brand-hover: var(--brand-primary-400);
  --color-brand-subtle: oklch(56% 0.15 220 / 0.14);
  --info-500: var(--brand-primary-500);
}

[data-brand="quantum-violet"] {
  /*
     ★ 64% → 69%. 이 테마도 명암비 미달이었다(최저 **3.97** — hover 배경 위).
       기본 테마만 고치면 테마를 바꾼 이용자는 그대로 미달이다.
       68% 부터 통과(4.65), **69%** 로 여유를 둔다.
  */
  --brand-primary-500: oklch(69% 0.20 300);
  --brand-primary-400: oklch(70% 0.18 300);
  --brand-primary-600: oklch(56% 0.22 300);
  --brand-accent-500:  oklch(78% 0.16 285);
  --color-brand: var(--brand-primary-500);
  --color-brand-hover: var(--brand-primary-400);
  --color-brand-subtle: oklch(64% 0.20 300 / 0.14);
}
[data-brand="onyx-emerald"] {
  --brand-primary-500: oklch(66% 0.15 160);
  --brand-primary-400: oklch(72% 0.13 160);
  --brand-primary-600: oklch(56% 0.16 160);
  --brand-accent-500:  oklch(78% 0.14 155);
  --color-brand: var(--brand-primary-500);
  --color-brand-hover: var(--brand-primary-400);
  --color-brand-subtle: oklch(64% 0.15 160 / 0.14);
}
[data-brand="graphite-amber"] {
  --brand-primary-500: oklch(72% 0.14 70);
  --brand-primary-400: oklch(78% 0.12 70);
  --brand-primary-600: oklch(64% 0.16 70);
  --brand-accent-500:  oklch(80% 0.13 65);
  --color-brand: var(--brand-primary-500);
  --color-brand-hover: var(--brand-primary-400);
  --color-brand-subtle: oklch(72% 0.14 70 / 0.14);
}

/* ============ LONG/SHORT VARIANTS ============ */
[data-longshort="green-red"] {
  --color-on-trade: oklch(18% 0.02 220);
  --trade-long-500: oklch(70% 0.17 145);
  --trade-long-bg:  oklch(70% 0.17 145 / 0.12);
  --trade-short-500: oklch(64% 0.22 25);
  --trade-short-bg:  oklch(64% 0.22 25 / 0.12);
  --color-trade-long: var(--trade-long-500);
  --color-trade-short: var(--trade-short-500);
  --color-trade-long-bg: var(--trade-long-bg);
  --color-trade-short-bg: var(--trade-short-bg);
  --chart-candle-up: var(--trade-long-500);
  --chart-candle-dn: var(--trade-short-500);
  --chart-volume-up: oklch(70% 0.17 145 / 0.35);
  --chart-volume-dn: oklch(64% 0.22 25 / 0.35);
}
[data-longshort="cyan-orange"] {
  --color-on-trade: oklch(18% 0.02 220);
  --trade-long-500: oklch(72% 0.15 220);
  --trade-long-bg:  oklch(72% 0.15 220 / 0.12);
  --trade-short-500: oklch(72% 0.17 55);
  --trade-short-bg:  oklch(72% 0.17 55 / 0.12);
  --color-trade-long: var(--trade-long-500);
  --color-trade-short: var(--trade-short-500);
  --color-trade-long-bg: var(--trade-long-bg);
  --color-trade-short-bg: var(--trade-short-bg);
  --chart-candle-up: var(--trade-long-500);
  --chart-candle-dn: var(--trade-short-500);
  --chart-volume-up: oklch(72% 0.15 220 / 0.35);
  --chart-volume-dn: oklch(72% 0.17 55 / 0.35);
}

/* 롱=빨강, 숏=파랑 — 한국 증권사(키움 등) 관행. 롱(상승)이 빨강, 숏(하락)이 파랑. */
[data-longshort="red-blue"] {
  --color-on-trade: oklch(18% 0.02 220);
  --trade-long-500: oklch(64% 0.22 25);
  --trade-long-bg:  oklch(64% 0.22 25 / 0.12);
  --trade-short-500: oklch(62% 0.18 255);
  --trade-short-bg:  oklch(62% 0.18 255 / 0.12);
  --color-trade-long: var(--trade-long-500);
  --color-trade-short: var(--trade-short-500);
  --color-trade-long-bg: var(--trade-long-bg);
  --color-trade-short-bg: var(--trade-short-bg);
  --chart-candle-up: var(--trade-long-500);
  --chart-candle-dn: var(--trade-short-500);
  --chart-volume-up: oklch(64% 0.22 25 / 0.35);
  --chart-volume-dn: oklch(62% 0.18 255 / 0.35);
}

/* ============ LIGHT THEME ============ */
[data-theme="light"] {
  --color-bg-app:       oklch(98% 0.003 240);
  --color-bg-surface:   oklch(100% 0 0);
  --color-bg-panel:     oklch(99% 0.002 240);
  --color-bg-elevated:  oklch(100% 0 0);
  --color-bg-hover:     oklch(94% 0.006 240);
  --color-bg-active:    oklch(90% 0.008 240);
  --color-bg-input:     oklch(100% 0 0);

  --color-text-primary:   oklch(20% 0.014 240);
  --color-text-secondary: oklch(38% 0.014 240);
  /* (2026-10-11) 52% → 48%: 선택 배경(bg-active 90%) 위 4.09:1 로 글자 기준 미달이었다(라이트 블록을 처음 검사하며 발견). */
  --color-text-tertiary:  oklch(48% 0.012 240);
  --color-text-disabled:  oklch(72% 0.008 240);
  --color-text-inverse:   oklch(98% 0.003 240);

  --color-border-subtle:  oklch(90% 0.006 240);
  --color-border-default: oklch(82% 0.008 240);
  --color-border-strong:  oklch(68% 0.010 240);

  --chart-grid: oklch(88% 0.006 240 / 0.7);
  --chart-axis-text: oklch(48% 0.012 240);
  --chart-crosshair: oklch(38% 0.014 240 / 0.5);

  /* 라이트에서 누락돼 있던 차트 색 — 예전엔 캔들·MA·거래량이 다크 값 그대로라 흰 배경에서 흐렸다. 흰 배경 4.5:1 이상. */
  --chart-candle-up: oklch(52.1% 0.099 175);
  --chart-candle-dn: oklch(56.1% 0.200 355);
  --chart-ma-1:      oklch(54.1% 0.115 75);
  --chart-ma-2:      oklch(55.1% 0.190 285);
  --chart-ma-3:      oklch(52.8% 0.106 230);
  --chart-volume-up: oklch(39.3% 0.049 175.0 / 0.6);
  --chart-volume-dn: oklch(42.7% 0.106 355.0 / 0.6);

  --chart-line-1: oklch(56.0% 0.190 328.33);
  --chart-line-2: oklch(52.1% 0.099 175);
  --chart-line-3: oklch(53.4% 0.150 250);
  --chart-line-4: oklch(54.1% 0.115 75);
  --chart-line-5: oklch(54.9% 0.170 285);
  --chart-line-6: oklch(52.5% 0.090 200);
  --chart-line-7: oklch(52.1% 0.150 145);
  --chart-line-8: oklch(55.8% 0.180 355);

  /* 지표 팔레트(LINE_TOKENS)가 직접 참조하는 의미 토큰도 라이트에서 어둡게 내린다. */
  --color-trade-long:      oklch(52.1% 0.099 175);
  --color-trade-short:     oklch(56.1% 0.200 355);
  --color-ai:              oklch(55.1% 0.190 285);
  --color-signal-approved: oklch(52.1% 0.150 145);
  --color-order-pending:   oklch(54.1% 0.115 75);

  --shadow-1: 0 1px 2px rgba(15,20,28,0.06);
  --shadow-2: 0 4px 12px rgba(15,20,28,0.08);
  --shadow-3: 0 12px 32px rgba(15,20,28,0.14);
}

/* ============ DENSITY ============ */
[data-density="comfortable"] { --density-scale: 1; }
[data-density="compact"]     { --density-scale: 0.88; }
[data-density="dense"]       { --density-scale: 0.78; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-normal: 0.01ms;
    --dur-slow: 0.01ms;
  }
}

/*
   브랜드 색을 '텍스트'로 쓸 때는 라이트에서 어둡게 내린다. #F00FF0 는 흰 배경에서 3.05:1 로 AA 미달 → 6.41:1.
   ★ 기본 브랜드(마젠타)에만 건다 — 라이트 블록에 그냥 두면 다른 브랜드(시안 등)를 골라도 마젠타가 된다.
*/
[data-brand="chartcontrol"][data-theme="light"] {
  --color-brand:        oklch(48% 0.190 328.33);
  --color-brand-hover:  oklch(40% 0.190 328.33);
  --color-brand-subtle: oklch(48% 0.190 328.33 / 0.12);
}