/* =========================================================================
   레이의 레버리지 — Design Tokens
   Source: .agents/design_system4_better_stack.md  (Better Stack — Midnight SRE console)
   - 다크: Void Black 캔버스 + Carbon 카드 + Gunmetal/Steel 보더
   - 액센트: 바이올렛-블루 그래디언트(Primary CTA 전용) / Periwinkle(링크)
   - 폰트는 사용자 요청대로 Noto Sans 유지 (드롭섀도 금지, inset 하이라이트)
   ========================================================================= */

:root {
  /* ---- Better Stack raw colors ---- */
  --color-void-black: #0f101a;
  --color-carbon-surface: #151621;
  --color-gunmetal: #1f2433;
  --color-steel-border: #939db8;
  --color-muted-steel: #646e87;
  --color-frost: #c9d3ee;
  --color-pure-white: #ffffff;
  --color-deep-ink: #000000;
  --color-iris-blue: #5b63d3;
  --color-periwinkle-glow: #98a4f7;
  --gradient-iris: linear-gradient(353deg, rgb(91, 99, 211) 17.51%, rgb(124, 135, 247) 183.08%);

  /* ---- Back-compat color aliases (구 토큰명 → Better Stack 값) ---- */
  --color-charcoal-ink: #ffffff;     /* 구 '잉크' 텍스트 → 다크에선 화이트 */
  --color-pure-white-2: #ffffff;
  --color-ink-black: #0f101a;
  --color-bone: #151621;
  --color-cutout-gray: #1f2433;
  --color-hairline: #1f2433;
  --color-deep-charcoal: #1f2433;
  --color-slate-mid: #646e87;
  --color-logo-violet: #98a4f7;
  --color-lavender-trace: #98a4f7;
  --color-mist-gray: #151621;
  --color-bolt-violet: #98a4f7;
  --color-sunset-orange: #98a4f7;
  --color-data-gold: #646e87;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--color-pure-white);
  --text-secondary: var(--color-frost);
  --text-tertiary: var(--color-muted-steel);
  --bg-base: var(--color-void-black);
  --bg-surface-1: #14151f;            /* 캔버스보다 살짝 들린 alt 섹션 */
  --bg-surface-2: #14151f;
  --bg-surface-3: #14151f;
  --bg-card: var(--color-carbon-surface);
  --border-strong: var(--color-steel-border);
  --border-subtle: var(--color-gunmetal);
  --border-card: var(--color-gunmetal);
  --border-input: var(--color-gunmetal);
  --accent: var(--color-periwinkle-glow);     /* 링크/액센트 */
  --accent-soft: rgba(152, 164, 247, 0.16);
  --accent-grad: var(--gradient-iris);        /* Primary CTA 전용 */
  --accent-on: var(--color-pure-white);

  /* ---- Typography — Families (Noto Sans 유지) ---- */
  --font-noto: 'Noto Sans KR', ui-sans-serif, system-ui, -apple-system,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-inter: var(--font-noto);
  --font-inter-display: var(--font-noto);
  --font-aux-mono: var(--font-noto);
  --font-helvetica-now-text: var(--font-noto);
  --font-helvetica-now-display: var(--font-noto);
  --font-polysans: var(--font-noto);

  /* ---- Typography — Scale (Better Stack) ---- */
  --text-caption: 12px;            /* 가독성 위해 10→12 */
  --leading-caption: 1.55;
  --tracking-caption: -0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.55;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: -0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.45;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.45;
  --tracking-heading-sm: -0.28px;
  --text-heading: 36px;
  --leading-heading: 1.17;
  --tracking-heading: -0.36px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.4px;
  --text-display: 53px;
  --leading-display: 1.08;
  --tracking-display: -0.53px;

  /* ---- Typography — Weights (헤드라인 500) ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;
  --fw-bold: 700;

  /* ---- Spacing ---- */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-128: 128px;
  --spacing-140: 140px;
  --spacing-164: 164px;
  --spacing-192: 192px;

  /* ---- Layout ---- */
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 20px;
  --container-max: 1200px;
  --container-pad: 24px;

  /* ---- Header ---- */
  --header-h: 64px;

  /* ---- Border Radius ---- */
  --radius-sm: 10px;
  --radius-input: 10px;
  --radius-nav: 10px;
  --radius-card: 16px;
  --radius-xl: 16px;          /* legacy */
  --radius-hero: 16px;        /* legacy */
  --radius-secondary: 9999px;
  --radius-pill: 9999px;      /* buttons */
  --radius-full: 9999px;

  /* ---- Shadows (inset 하이라이트만) ---- */
  --shadow-inset-rim: rgba(255, 255, 255, 0.25) 0 1px 3px 0 inset;
  --shadow-inset-hairline: inset 0 0 0 1px var(--color-gunmetal);

  /* ---- Surfaces ---- */
  --surface-canvas: #0f101a;
  --surface-card: #151621;
  --surface-elevated: #1f2433;
}