/* ==========================================================================
   디자인 토큰 — 테크어비스
   '어비스(심연)' 콘셉트: 깊은 남청색 배경 + 오실로스코프 시안 트레이스 액센트
   모든 팔레트/타이포/스페이싱 값은 이 파일에서만 정의한다.
   ========================================================================== */

:root {
  /* ---- 표면(surface) 계열: 심연의 깊이를 4단계로 ---- */
  --c-abyss-1000: oklch(10% 0.028 258);  /* 최심부 — 바디 배경 */
  --c-abyss-900:  oklch(14% 0.034 258);  /* 섹션 배경 */
  --c-abyss-800:  oklch(19% 0.040 258);  /* 카드 표면 */
  --c-abyss-700:  oklch(25% 0.044 258);  /* 올라온 카드 / 호버 */
  --c-abyss-600:  oklch(33% 0.046 258);  /* 테두리 강조 */

  /* ---- 텍스트: 어두운 배경 대비 WCAG AA 이상을 기준으로 선정 ---- */
  /* 아래 대비비는 --c-abyss-1000 배경 기준 실측값 (verify.py 로 검증) */
  --c-text:       oklch(96% 0.008 258);  /* 본문/제목 — 18.3:1 */
  --c-text-muted: oklch(78% 0.018 258);  /* 보조 설명 — 10.3:1 */
  --c-text-dim:   oklch(66% 0.022 258);  /* 라벨/캡션 — 6.6:1 */

  /* ---- 액센트: 계측 장비의 발광색에서 가져옴 ---- */
  --c-signal:     oklch(80% 0.145 196);  /* 시안 — 주 액센트(신호 트레이스) */
  --c-brand:      oklch(43% 0.147 260);  /* #17499d — 로고 칩 그라데이션 상단 색 */
  --c-signal-deep:oklch(59% 0.154 256);  /* 로고 블루를 배경용으로 끌어올린 값 */
  --c-probe:      oklch(78% 0.170 152);  /* 그린 — 측정 OK / 2번 채널 */
  --c-flux:       oklch(82% 0.150 78);   /* 앰버 — 경고 / 3번 채널 */

  /* ---- 선/테두리 ---- */
  --c-line:        oklch(100% 0 0 / 0.08);
  --c-line-strong: oklch(100% 0 0 / 0.16);
  --c-glow:        oklch(80% 0.145 196 / 0.28);

  /* ---- 타이포그래피 ---- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* 유동 타입 스케일 — 320px~1440px 구간에서 선형 보간 */
  --t-mono-xs:  0.6875rem;                              /* 11px 고정 — 라벨 */
  --t-xs:       clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --t-sm:       clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-base:     clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-lg:       clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-xl:       clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-2xl:      clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --t-3xl:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-hero:     clamp(2.5rem, 1.2rem + 5.6vw, 5.75rem);

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.72;
  --ls-tight: -0.035em;
  --ls-label: 0.18em;

  /* ---- 스페이싱: 리듬을 만들기 위해 균일 패딩을 쓰지 않는다 ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-section:  clamp(4.5rem, 3rem + 6vw, 9rem);
  --s-gutter:   clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --w-content:  76rem;
  --w-prose:    38rem;

  /* ---- 모서리: 요소 성격에 따라 다르게 (전부 동일 반경 금지) ---- */
  --r-sharp: 2px;
  --r-card:  10px;
  --r-panel: 18px;
  --r-pill:  999px;

  /* ---- 그림자 / 깊이 ---- */
  --sh-card:  0 1px 2px oklch(0% 0 0 / 0.4), 0 12px 32px -12px oklch(0% 0 0 / 0.7);
  --sh-float: 0 2px 4px oklch(0% 0 0 / 0.45), 0 28px 60px -20px oklch(0% 0 0 / 0.85);
  --sh-glow:  0 0 0 1px var(--c-glow), 0 0 32px -6px var(--c-glow);

  /* ---- 모션 ---- */
  --d-fast:   140ms;
  --d-normal: 280ms;
  --d-slow:   620ms;
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- 레이어 ---- */
  --z-grid:   0;
  --z-base:   1;
  --z-raised: 10;
  --z-nav:    100;
  --z-modal:  1000;
}

/* 필름 그레인 텍스처 — 외부 이미지 요청 없이 SVG 노이즈를 인라인 */
:root {
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}