/* ============================================================
   다원이 디자인 시스템 — Design Tokens
   Source: "Design System _1_.json" (W3C Design Tokens 형식)
   - primitive → --{group}-{name}
   - semantic  → --bg-*, --text-*, --border-*, --status-*
   - component → --btn-*, --input-*, --card-*, --badge-*, --focus-*
   ============================================================ */

:root {
  color-scheme: light;
  /* ---------- Primitive: Color ---------- */
  --brand-50: #fff0f1;
  --brand-100: #ffe0e3;
  --brand-200: #ffc2c8;
  --brand-300: #ff99a3;
  --brand-400: #ff8591;
  --brand-500: #ff6b7a;
  --brand-600: #ff4255;
  --brand-700: #ff142c;
  --brand-800: #e00017;
  --brand-900: #ad0012;
  --brand-950: #70000b;

  --secondary-50: #f0f5ff;
  --secondary-100: #e0ebff;
  --secondary-200: #c2d7ff;
  --secondary-300: #99bcff;
  --secondary-400: #85afff;
  --secondary-500: #6b9eff;
  --secondary-600: #4283ff;
  --secondary-700: #1465ff;
  --secondary-800: #004de0;
  --secondary-900: #003cad;
  --secondary-950: #002770;

  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f2f2f2;
  --neutral-200: #e6e6e6;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #2e2e2e;
  --neutral-900: #1c1c1c;
  --neutral-950: #121212;

  --error-50: #f9b8b3;
  --error-400: #f25a50;
  --error-500: #f04438;
  --error-600: #d91507;
  --error-700: #c31a0f;
  --error-950: #2b0603;

  --warning-50: #fbca89;
  --warning-400: #f89b22;
  --warning-500: #f79009;
  --warning-600: #d07907;
  --warning-700: #a45f05;
  --warning-950: #140b01;

  --info-50: #b0d5fd;
  --info-400: #479dfb;
  --info-500: #2e90fa;
  --info-600: #067bf9;
  --info-700: #0565cc;
  --info-950: #01162d;

  --success-50: #5eefac;
  --success-400: #14ce77;
  --success-500: #12b76a;
  --success-600: #0e9254;
  --success-700: #0a683c;
  --success-950: #02130b;

  --transparent: transparent;

  /* ---------- Primitive: Spacing ---------- */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---------- Primitive: Radius ---------- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ---------- Primitive: Shadow ---------- */
  --shadow-sm: 0 1px 2px 0 rgba(10, 10, 10, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(10, 10, 10, 0.1), 0 2px 4px -2px rgba(10, 10, 10, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(10, 10, 10, 0.1), 0 4px 6px -4px rgba(10, 10, 10, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(10, 10, 10, 0.15), 0 8px 10px -6px rgba(10, 10, 10, 0.1);

  /* ---------- Primitive: Font ---------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* ---------- Semantic: Background ---------- */
  --bg-canvas: var(--neutral-0);
  --bg-surface: var(--neutral-50);
  --bg-subtle: var(--neutral-100);
  --bg-disabled: var(--neutral-200);
  /* WCAG AA — 흰 글자 대비 ≥4.5:1 (기존 #ff6b7a는 2.9로 실패) */
  --bg-brand: #c23a52;
  --bg-brand-hover: #a52f43;
  --bg-brand-pressed: #8e2436;
  --bg-brand-subtle: var(--brand-50);
  --bg-danger: var(--error-500);
  --bg-danger-hover: var(--error-600);
  --bg-danger-pressed: var(--error-700);
  --bg-danger-subtle: var(--error-50);
  --bg-success-subtle: var(--success-50);
  --bg-warning-subtle: var(--warning-50);
  --bg-info-subtle: var(--info-50);

  /* ---------- Semantic: Text ---------- */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  /* WCAG AA — 밝은 배경 위 본문 대비 ≥4.5:1 (기존 #ff4255는 3.26으로 실패) */
  --text-brand: #b82f44;
  --text-on-brand: var(--neutral-0);
  --text-link: var(--secondary-600);
  --text-error: var(--error-600);
  --text-success: var(--success-700);
  --text-warning: var(--warning-700);
  --text-info: var(--info-600);

  /* ---------- Semantic: Border ---------- */
  --border-default: var(--neutral-200);
  --border-subtle: var(--neutral-100);
  --border-strong: var(--neutral-300);
  --border-brand: var(--brand-500);
  --border-focus: var(--brand-500);
  --border-error: var(--error-500);

  /* ---------- Semantic: Status ---------- */
  --status-error: var(--error-500);
  --status-warning: var(--warning-500);
  --status-info: var(--info-500);
  --status-success: var(--success-500);

  /* ---------- Component: Button ---------- */
  --btn-radius: var(--radius-lg);
  --btn-sm-height: var(--space-32);
  --btn-sm-padding-x: var(--space-16);
  --btn-sm-gap: var(--space-8);
  --btn-sm-font-size: var(--font-size-sm);
  --btn-md-height: var(--space-40);
  --btn-md-padding-x: var(--space-24);
  --btn-md-gap: var(--space-16);
  --btn-md-font-size: var(--font-size-md);
  --btn-lg-height: var(--space-48);
  --btn-lg-padding-x: var(--space-32);
  --btn-lg-gap: var(--space-20);
  --btn-lg-font-size: var(--font-size-lg);

  /* ---------- Component: Input ---------- */
  --input-radius: var(--radius-md);
  --input-height: var(--space-40);
  --input-padding-x: var(--space-16);
  --input-font-size: var(--font-size-md);

  /* ---------- Component: Card ---------- */
  --card-bg: var(--bg-surface);
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-24);
  --card-shadow: var(--shadow-sm);

  /* ---------- Component: Badge ---------- */
  --badge-radius: var(--radius-full);
  --badge-padding-x: var(--space-8);
  --badge-padding-y: var(--space-2);
  --badge-font-size: var(--font-size-xs);

  /* ---------- Component: Focus ring ---------- */
  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--border-focus);

  /* ---------- Component: Icon ---------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* ============================================================
   Semantic: Dark theme
   ============================================================ */
[data-theme='dark'] {
  color-scheme: dark;
  --bg-canvas: var(--neutral-950);
  --bg-surface: var(--neutral-900);
  --bg-subtle: var(--neutral-800);
  --bg-disabled: var(--neutral-700);
  --bg-brand: var(--brand-400);
  --bg-brand-hover: var(--brand-300);
  --bg-brand-pressed: var(--brand-500);
  --bg-brand-subtle: var(--brand-950);
  --bg-danger: var(--error-400);
  --bg-danger-hover: var(--error-500);
  --bg-danger-pressed: var(--error-600);
  --bg-danger-subtle: var(--error-950);
  --bg-success-subtle: var(--success-950);
  --bg-warning-subtle: var(--warning-950);
  --bg-info-subtle: var(--info-950);

  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-disabled: var(--neutral-600);
  --text-brand: var(--brand-400);
  --text-on-brand: var(--neutral-950);
  --text-link: var(--secondary-400);
  --text-error: var(--error-400);
  --text-success: var(--success-400);
  --text-warning: var(--warning-400);
  --text-info: var(--info-400);

  --border-default: var(--neutral-700);
  --border-subtle: var(--neutral-800);
  --border-strong: var(--neutral-600);
  --border-brand: var(--brand-400);
  --border-focus: var(--brand-400);
  --border-error: var(--error-400);

  --status-error: var(--error-400);
  --status-warning: var(--warning-400);
  --status-info: var(--info-400);
  --status-success: var(--success-400);
}