/* ─────────────────────────────────────────────
   슬현 크리에이티브 디자인 토큰 — Figma 변수와 같은 이름
   A · Ivory & Thread (기본) / B · Sky & Lavender ([data-theme="b"])
   ───────────────────────────────────────────── */
:root {
  /* Primitives */
  --sh-ink-900: #161616; --sh-ink-800: #2a2826; --sh-ink-700: #44403c; --sh-ink-600: #5e5853; --sh-ink-500: #7a736d;
  --sh-ink-400: #a39c95; --sh-ink-300: #c9c2ba; --sh-ink-200: #e3ddd6; --sh-ink-100: #efeae4;
  --sh-ivory-50: #fbf9f6; --sh-ivory-100: #f6f2ee; --sh-ivory-200: #ede6de;
  --sh-thread-50: #fbeeeb; --sh-thread-100: #f6d5cd; --sh-thread-500: #c93d27; --sh-thread-600: #a83220; --sh-thread-700: #86281a;
  --sh-green-50: #e8f1ec; --sh-green-600: #2f6b4f; --sh-blue-50: #e9eefb; --sh-blue-600: #1f4fd8;
  --sh-white: #ffffff;

  /* Semantic — A · Ivory & Thread */
  --color-bg-canvas: var(--sh-ivory-100);
  --color-bg-canvas-subtle: var(--sh-ivory-50);
  --color-bg-surface: var(--sh-white);
  --color-bg-muted: var(--sh-ivory-200);
  --color-bg-inverse: var(--sh-ink-900);
  --color-bg-brand: var(--sh-thread-500);
  --color-bg-brand-hover: var(--sh-thread-600);
  --color-bg-brand-subtle: var(--sh-thread-50);
  --color-text-primary: var(--sh-ink-900);
  --color-text-secondary: var(--sh-ink-600);
  --color-text-tertiary: var(--sh-ink-400);
  --color-text-inverse: var(--sh-white);
  --color-text-inverse-secondary: var(--sh-ink-300);
  --color-text-brand: var(--sh-thread-500);
  --color-text-on-brand: var(--sh-white);
  --color-border-subtle: var(--sh-ink-200);
  --color-border-default: var(--sh-ink-300);
  --color-border-strong: var(--sh-ink-900);
  --color-border-brand: var(--sh-thread-500);
  --color-border-inverse: var(--sh-ink-700);
  --color-status-success-bg: var(--sh-green-50);
  --color-status-success-text: var(--sh-green-600);
  --color-status-info-bg: var(--sh-blue-50);
  --color-status-info-text: var(--sh-blue-600);
  --color-brand-thread: var(--sh-thread-500);
  --color-brand-cursor: var(--sh-thread-500);

  /* Spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;

  /* Elevation */
  --shadow-card: 0 2px 8px rgba(22, 22, 22, 0.06), 0 12px 32px -8px rgba(22, 22, 22, 0.06);
  --shadow-raised: 0 20px 48px -12px rgba(22, 22, 22, 0.12);

  /* Typography */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-logo: "Gowun Batang", serif;

  --container: 1280px;
  --gutter: var(--space-20);
  --section-y: var(--space-32);
}

[data-theme="b"] {
  --sh-sky-100: #e3f1fb; --sh-sky-200: #c6e3f7; --sh-sky-500: #4a9bd6; --sh-sky-800: #1b4566;
  --sh-lav-100: #ece8fb; --sh-lav-500: #7e69d4; --sh-lav-600: #6550b8; --sh-lav-700: #4e3e91;
  --sh-navy-900: #1b2033; --sh-navy-700: #3e4560; --sh-navy-600: #5a6079; --sh-navy-400: #a3a8ba; --sh-navy-300: #c7cbd8; --sh-navy-200: #e1e4ec;
  --sh-cloud-50: #f9fafe; --sh-cloud-100: #f3f5fc;

  --color-bg-canvas: var(--sh-cloud-100);
  --color-bg-canvas-subtle: var(--sh-cloud-50);
  --color-bg-muted: var(--sh-sky-100);
  --color-bg-inverse: var(--sh-navy-900);
  --color-bg-brand: var(--sh-lav-600);
  --color-bg-brand-hover: var(--sh-lav-700);
  --color-bg-brand-subtle: var(--sh-lav-100);
  --color-text-primary: var(--sh-navy-900);
  --color-text-secondary: var(--sh-navy-600);
  --color-text-tertiary: var(--sh-navy-400);
  --color-text-inverse-secondary: var(--sh-navy-300);
  --color-text-brand: var(--sh-lav-600);
  --color-border-subtle: var(--sh-navy-200);
  --color-border-default: var(--sh-navy-300);
  --color-border-strong: var(--sh-navy-900);
  --color-border-brand: var(--sh-lav-500);
  --color-border-inverse: var(--sh-navy-700);
  --color-status-info-bg: var(--sh-sky-200);
  --color-status-info-text: var(--sh-sky-800);
  --color-brand-thread: var(--sh-sky-500);
  --color-brand-cursor: var(--sh-lav-600);
}

@media (max-width: 1023px) {
  :root { --gutter: var(--space-10); --section-y: var(--space-24); }
}
@media (max-width: 599px) {
  :root { --gutter: var(--space-4); --section-y: var(--space-20); }
}