/**
 * Slate Theme — B2B SaaS / Tech (Phase 11 + Phase 16)
 *
 * 적용: <html data-theme="slate" data-mode="light">
 *       <html data-theme="slate" data-mode="dark">
 *
 * 단일 진실: _design-audit/TOKENS_EXTRACTED.md §5 Slate
 * 03_docs + Phase 16 의 accent-cyan-* 보강. 다크모드가 본문 기준.
 * Slate 는 mono 폰트(JetBrains)가 brand/nav/body 에 광범위 사용.
 */

/* ============================================================
 * Slate · Light
 * ============================================================ */
[data-theme="slate"][data-mode="light"],
[data-theme="slate"]:not([data-mode]) {
  /* ─── Primary · Slate (#475569) ─── */
  --wdot-color-primary-50:  #f8fafc;
  --wdot-color-primary-100: #f1f5f9;
  --wdot-color-primary-200: #e2e8f0;
  --wdot-color-primary-300: #cbd5e1;
  --wdot-color-primary-400: #94a3b8;
  --wdot-color-primary-500: #64748b;
  --wdot-color-primary-600: #475569; /* 브랜드 메인 */
  --wdot-color-primary-700: #334155;
  --wdot-color-primary-800: #1e293b;
  --wdot-color-primary-900: #0f172a;
  --wdot-color-primary-950: #020617;

  /* ─── Secondary · Steel ─── */
  --wdot-color-secondary-50:  #f5f7fa;
  --wdot-color-secondary-100: #e8edf3;
  --wdot-color-secondary-200: #d2dbe7;
  --wdot-color-secondary-300: #aebccf;
  --wdot-color-secondary-400: #8497b3;
  --wdot-color-secondary-500: #647898;
  --wdot-color-secondary-600: #4d617e;
  --wdot-color-secondary-700: #3d4e66;
  --wdot-color-secondary-800: #2e3d50;
  --wdot-color-secondary-900: #1f2a39;
  --wdot-color-secondary-950: #11171f;

  /* ─── Accent · Cyan glow (Phase 16) ─── */
  --wdot-color-accent-50:  #ecfeff;
  --wdot-color-accent-100: #cffafe;
  --wdot-color-accent-200: #a5f3fc;
  --wdot-color-accent-300: #67e8f9;
  --wdot-color-accent-400: #22d3ee; /* Phase 16: --accent */
  --wdot-color-accent-500: #06b6d4; /* Phase 16: --accent-2 */
  --wdot-color-accent-600: #0891b2;
  --wdot-color-accent-700: #0e7490;
  --wdot-color-accent-800: #155e75;
  --wdot-color-accent-900: #164e63;
  --wdot-color-accent-950: #083344;

  /* Cyan accent aliases (Phase 16 호환) */
  --wdot-color-accent-cyan-400: #22d3ee;
  --wdot-color-accent-cyan-500: #06b6d4;
  --wdot-color-accent-cyan-600: #0891b2;

  /* ─── AI · Violet ─── */
  --wdot-color-ai-50:  #f3eeff;
  --wdot-color-ai-100: #e9defc;
  --wdot-color-ai-200: #d4bcfa;
  --wdot-color-ai-300: #b794f6;
  --wdot-color-ai-400: #9b6ff0;
  --wdot-color-ai-500: #7c3aed;
  --wdot-color-ai-600: #6d28d9;
  --wdot-color-ai-700: #5b21b6;
  --wdot-color-ai-800: #4c1d95;
  --wdot-color-ai-900: #3b1779;
  --wdot-color-ai-950: #240e4d;

  /* ─── Neutral · Slate ─── */
  --wdot-color-neutral-0:   #ffffff;
  --wdot-color-neutral-50:  #f8fafc;
  --wdot-color-neutral-100: #f1f5f9;
  --wdot-color-neutral-200: #e2e8f0;
  --wdot-color-neutral-300: #cbd5e1;
  --wdot-color-neutral-400: #94a3b8;
  --wdot-color-neutral-500: #64748b;
  --wdot-color-neutral-600: #475569;
  --wdot-color-neutral-700: #334155;
  --wdot-color-neutral-800: #1e293b;
  --wdot-color-neutral-900: #0f172a;
  --wdot-color-neutral-950: #020617;

  --wdot-color-success: #10b981;
  --wdot-color-warning: #f59e0b;
  --wdot-color-error:   #ef4444;
  --wdot-color-info:    #3b82f6;

  --wdot-bg:            var(--wdot-color-neutral-0);
  --wdot-bg-subtle:     var(--wdot-color-neutral-50);
  --wdot-bg-muted:      var(--wdot-color-neutral-100);
  --wdot-fg:            var(--wdot-color-neutral-900);
  --wdot-fg-muted:      var(--wdot-color-neutral-500);
  --wdot-fg-subtle:     var(--wdot-color-neutral-400);
  --wdot-border:        var(--wdot-color-neutral-200);
  --wdot-border-strong: var(--wdot-color-neutral-300);

  /* ─── Typography — Slate 는 mono 강조 ─── */
  --wdot-font-sans:    "Pretendard Variable", Pretendard, "Inter",
                       -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wdot-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
                       Consolas, monospace;
  --wdot-font-display: "JetBrains Mono", "Pretendard Variable", ui-monospace, monospace;

  --wdot-text-xs:   12px;
  --wdot-text-sm:   14px;
  --wdot-text-base: 16px;
  --wdot-text-lg:   18px;
  --wdot-text-xl:   20px;
  --wdot-text-2xl:  24px;
  --wdot-text-3xl:  30px;
  --wdot-text-4xl:  36px;
  --wdot-text-5xl:  48px;
  --wdot-text-6xl:  60px;
  --wdot-text-7xl:  72px;
  --wdot-text-8xl:  96px;
  --wdot-text-9xl:  128px;

  --wdot-leading-tight:   1.15;
  --wdot-leading-snug:    1.35;
  --wdot-leading-normal:  1.55;
  --wdot-leading-relaxed: 1.75;

  --wdot-weight-regular:   400;
  --wdot-weight-medium:    500;
  --wdot-weight-semibold:  600;
  --wdot-weight-bold:      700;
  --wdot-weight-extrabold: 800;
  --wdot-weight-black:     900;

  --wdot-space-0:  0;
  --wdot-space-1:  4px;
  --wdot-space-2:  8px;
  --wdot-space-3:  12px;
  --wdot-space-4:  16px;
  --wdot-space-5:  20px;
  --wdot-space-6:  24px;
  --wdot-space-8:  32px;
  --wdot-space-10: 40px;
  --wdot-space-12: 48px;
  --wdot-space-16: 64px;
  --wdot-space-20: 80px;
  --wdot-space-24: 96px;
  --wdot-space-32: 128px;

  --wdot-radius-none: 0;
  --wdot-radius-sm:   4px;
  --wdot-radius-md:   8px;
  --wdot-radius-lg:   12px;
  --wdot-radius-xl:   16px;
  --wdot-radius-2xl:  24px;
  --wdot-radius-full: 9999px;

  --wdot-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --wdot-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --wdot-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --wdot-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --wdot-shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.14);

  --wdot-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --wdot-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --wdot-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --wdot-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --wdot-dur-fast:     120ms;
  --wdot-dur-normal:   200ms;
  --wdot-dur-slow:     320ms;
}

/* ============================================================
 * Slate · Dark (Phase 16 본문 기준 — Cyan glow)
 * ============================================================ */
[data-theme="slate"][data-mode="dark"] {
  --wdot-color-primary-50:  #020617;
  --wdot-color-primary-100: #0f172a;
  --wdot-color-primary-200: #1e293b;
  --wdot-color-primary-300: #334155;
  --wdot-color-primary-400: #475569;
  --wdot-color-primary-500: #64748b;
  --wdot-color-primary-600: #22d3ee; /* 다크 메인 — Cyan glow */
  --wdot-color-primary-700: #67e8f9;
  --wdot-color-primary-800: #a5f3fc;
  --wdot-color-primary-900: #cffafe;
  --wdot-color-primary-950: #ecfeff;

  --wdot-bg:            #0a0e1a;  /* Phase 16 본문 */
  --wdot-bg-subtle:     #11161f;
  --wdot-bg-muted:      #1a2030;
  --wdot-fg:            #e2e8f0;
  --wdot-fg-muted:      #94a3b8;
  --wdot-fg-subtle:     #64748b;
  --wdot-border:        rgba(34, 211, 238, 0.10);
  --wdot-border-strong: rgba(34, 211, 238, 0.20);

  --wdot-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --wdot-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --wdot-shadow-md: 0 4px 12px rgba(6, 182, 212, 0.12), 0 2px 4px rgba(0, 0, 0, 0.5);
  --wdot-shadow-lg: 0 12px 32px rgba(6, 182, 212, 0.16), 0 4px 8px rgba(0, 0, 0, 0.6);
  --wdot-shadow-xl: 0 24px 56px rgba(6, 182, 212, 0.20);
}
