/* ---------------------------------------------------------------------------
   Unipass 디자인 토큰
   Figma의 Variables와 이름이 1:1로 대응합니다.
     Figma  color/bg/brand      →  CSS  var(--bg-brand)
     Figma  spacing/md          →  CSS  var(--spacing-md)
   값을 바꿀 때는 Figma가 정답입니다. 여기는 그 사본입니다.
   → design/01-design-tokens.md
--------------------------------------------------------------------------- */

:root {
  /* ---------- Primitives — 컴포넌트에서 직접 쓰지 마세요 ---------- */
  --navy-50: #f1f4fa;
  --navy-100: #e1e8f5;
  --navy-200: #c3d0e8;
  --navy-300: #93a7ce;
  --navy-400: #5c77ae;
  --navy-500: #33518f;
  --navy-600: #1e3a73;
  --navy-700: #142b5c;
  --navy-800: #0a1f49;
  --navy-900: #03143f; /* 브랜드 */
  --navy-950: #020d2b;

  --gray-0: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-450: #7b8ba1;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  --green-100: #dcfce7;
  --green-400: #4ade80;
  --green-500: #16a34a;
  --green-700: #15803d;
  --green-950: #052e16;
  --amber-100: #fef3c7;
  --amber-400: #fbbf24;
  --amber-500: #d97706;
  --amber-700: #b45309;
  --amber-950: #451a03;
  --red-100: #fee2e2;
  --red-400: #f87171;
  --red-500: #dc2626;
  --red-700: #b91c1c;
  --red-950: #450a0a;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #2563eb;
  --blue-700: #1d4ed8;
  --blue-950: #172554;
  --violet-100: #ede9fe;
  --violet-400: #a78bfa;
  --violet-500: #7c3aed;
  --violet-700: #6d28d9;
  --violet-950: #2e1065;

  /* ---------- Semantic — Light ---------- */
  --bg-canvas: var(--gray-50);
  --bg-surface: var(--gray-0);
  --bg-surface-raised: var(--gray-0);
  --bg-subtle: var(--gray-100);
  --bg-hover: var(--gray-100);
  --bg-inverse: var(--navy-900);
  --bg-brand: var(--navy-900);
  --bg-brand-hover: var(--navy-800);
  --bg-danger: var(--red-500);
  --bg-danger-hover: var(--red-700);

  --sidebar-bg: var(--navy-900);
  --sidebar-border: var(--navy-800);
  --sidebar-fg: var(--gray-0);
  --sidebar-fg-muted: var(--navy-300);
  --sidebar-active-bg: var(--navy-700);

  /* 코드·다이어그램 블록. bg-inverse 를 쓰면 안 된다 —
     다크에서 흰 배경이 되어 글자가 사라진다. 두 테마 모두 어두워야 한다. */
  --code-bg: var(--navy-900);
  --code-fg: var(--gray-100);
  --code-border: var(--navy-800);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--gray-0);
  /*
   * --text-on-brand 는 브랜드 배경 위에 얹는 글자색이다.
   * --text-inverse(캔버스의 반대색)와는 다르다. 다크 모드에서 브랜드 배경이
   * 밝아지는데 text-inverse 를 쓰면 어두운 글자가 얹혀 대비가 2.31:1 까지
   * 떨어진다. 실제로 그렇게 되어 있었다.
   */
  --text-on-brand: var(--gray-0);
  --text-brand: var(--navy-900);
  --text-link: var(--blue-700);

  --border-subtle: var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  /*
   * --border-control 은 입력창·버튼처럼 "만질 수 있는 것"의 경계선이다.
   *
   * WCAG 1.4.11 은 UI 컴포넌트의 경계에 3:1 을 요구한다. 표 구분선 같은
   * 장식용 선(--border-default, 1.23:1)을 입력창에 쓰면 이 기준을 못 넘는다.
   * 심사 자료로 인쇄될 화면이라 여기서 타협하지 않는다.
   */
  --border-control: var(--gray-500);
  --border-focus: var(--navy-500);

  --status-success-bg: var(--green-100);
  --status-success-fg: var(--green-700);
  --status-success-border: var(--green-500);
  --status-success-accent: var(--green-500);
  --status-success-strong: var(--green-700);
  --status-warning-bg: var(--amber-100);
  --status-warning-fg: var(--amber-700);
  --status-warning-border: var(--amber-500);
  --status-warning-accent: var(--amber-500);
  --status-warning-strong: var(--amber-700);
  --status-danger-bg: var(--red-100);
  --status-danger-fg: var(--red-700);
  --status-danger-border: var(--red-500);
  --status-danger-accent: var(--red-500);
  --status-danger-strong: var(--red-700);
  --status-info-bg: var(--blue-100);
  --status-info-fg: var(--blue-700);
  --status-info-border: var(--blue-500);
  --status-info-accent: var(--blue-500);
  --status-info-strong: var(--blue-700);
  --status-neutral-bg: var(--gray-100);
  --status-neutral-fg: var(--gray-700);
  --status-neutral-border: var(--gray-300);
  --status-neutral-accent: var(--gray-500);
  --status-neutral-strong: var(--gray-700);

  --level-access-bg: var(--gray-100);
  --level-access-fg: var(--gray-700);
  --level-access-accent: var(--gray-500);
  --level-access-strong: var(--gray-700);
  --level-use-bg: var(--blue-100);
  --level-use-fg: var(--blue-700);
  --level-use-accent: var(--blue-500);
  --level-use-strong: var(--blue-700);
  --level-extended-bg: var(--violet-100);
  --level-extended-fg: var(--violet-700);
  --level-extended-accent: var(--violet-500);
  --level-extended-strong: var(--violet-700);

  --text-on-accent: var(--gray-0);

  /* ---------- Spacing ---------- */
  --spacing-0: 0px;
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* ---------- Elevation ---------- */
  --elevation-sm: 0 1px 2px rgba(5, 20, 64, 0.06);
  --elevation-md:
    0 4px 12px -2px rgba(5, 20, 64, 0.08), 0 1px 3px rgba(5, 20, 64, 0.04);
  --elevation-lg: 0 12px 32px -8px rgba(5, 20, 64, 0.12);

  /* ---------- Typography ---------- */
  --font-sans:
    "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Motion ----------
     design/03-motion-and-responsive.md §1.2.
     관리 콘솔의 90% 는 instant + fast + ease-out 이면 끝난다. */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-deliberate: 500ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Semantic — Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: var(--gray-950);
    --bg-surface: var(--gray-900);
    --bg-surface-raised: var(--gray-800);
    --bg-subtle: var(--gray-800);
    --bg-hover: var(--gray-800);
    --bg-inverse: var(--gray-0);
    --bg-brand: var(--navy-500);
    --bg-brand-hover: var(--navy-400);

    --sidebar-bg: var(--navy-950);
    --sidebar-border: var(--navy-900);
    --sidebar-fg: var(--gray-100);
    --sidebar-fg-muted: var(--navy-400);
    --sidebar-active-bg: var(--navy-800);

    --code-bg: var(--gray-950);
    --code-fg: var(--gray-100);
    --code-border: var(--gray-800);

    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-inverse: var(--gray-900);
    --text-on-brand: var(--gray-50);
    --text-brand: var(--navy-300);
    --text-link: var(--blue-300);

    --border-subtle: var(--gray-800);
    --border-default: var(--gray-700);
    --border-strong: var(--gray-600);
    --border-control: var(--gray-500);
    --border-focus: var(--navy-400);

    --status-success-bg: var(--green-950);
    --status-success-fg: var(--green-100);
    --status-success-border: var(--green-700);
    --status-success-accent: var(--green-400);
    --status-success-strong: var(--green-500);
    --status-warning-bg: var(--amber-950);
    --status-warning-fg: var(--amber-100);
    --status-warning-border: var(--amber-700);
    --status-warning-accent: var(--amber-400);
    --status-warning-strong: var(--amber-500);
    --status-danger-bg: var(--red-950);
    --status-danger-fg: var(--red-100);
    --status-danger-border: var(--red-700);
    --status-danger-accent: var(--red-400);
    --status-danger-strong: var(--red-500);
    --status-info-bg: var(--blue-950);
    --status-info-fg: var(--blue-100);
    --status-info-border: var(--blue-700);
    --status-info-accent: var(--blue-400);
    --status-info-strong: var(--blue-500);
    --status-neutral-bg: var(--gray-950);
    --status-neutral-fg: var(--gray-100);
    --status-neutral-border: var(--gray-700);
    --status-neutral-accent: var(--gray-450);
    --status-neutral-strong: var(--gray-500);

    --level-access-bg: var(--gray-800);
    --level-access-fg: var(--gray-300);
    --level-access-accent: var(--gray-450);
    --level-access-strong: var(--gray-500);
    --level-use-bg: var(--blue-950);
    --level-use-fg: var(--blue-100);
    --level-use-accent: var(--blue-400);
    --level-use-strong: var(--blue-500);
    --level-extended-bg: var(--violet-950);
    --level-extended-fg: var(--violet-100);
    --level-extended-accent: var(--violet-400);
    --level-extended-strong: var(--violet-500);

    --text-on-accent: var(--gray-0);
  }
}

/* ---------- Semantic — Dark (명시적 선택) ----------
 *
 * 위 블록은 OS 설정만 따른다. 사용자가 화면에서 직접 다크를 고르면
 * OS 가 라이트여도 다크가 나와야 하므로 같은 값을 한 번 더 둔다.
 * 두 곳을 함께 고쳐야 한다 — 한쪽만 바꾸면 토글과 시스템 설정이 갈라진다.
 */
:root[data-theme="dark"] {
  --bg-canvas: var(--gray-950);
  --bg-surface: var(--gray-900);
  --bg-surface-raised: var(--gray-800);
  --bg-subtle: var(--gray-800);
  --bg-hover: var(--gray-800);
  --bg-inverse: var(--gray-0);
  --bg-brand: var(--navy-500);
  --bg-brand-hover: var(--navy-400);

  --sidebar-bg: var(--navy-950);
  --sidebar-border: var(--navy-900);
  --sidebar-fg: var(--gray-100);
  --sidebar-fg-muted: var(--navy-400);
  --sidebar-active-bg: var(--navy-800);

  --code-bg: var(--gray-950);
  --code-fg: var(--gray-100);
  --code-border: var(--gray-800);

  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-400);
  --text-inverse: var(--gray-900);
  --text-on-brand: var(--gray-50);
  --text-brand: var(--navy-300);
  --text-link: var(--blue-300);

  --border-subtle: var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong: var(--gray-600);
  --border-control: var(--gray-500);
  --border-focus: var(--navy-400);

  --status-success-bg: var(--green-950);
  --status-success-fg: var(--green-100);
  --status-success-border: var(--green-700);
  --status-success-accent: var(--green-400);
  --status-success-strong: var(--green-500);
  --status-warning-bg: var(--amber-950);
  --status-warning-fg: var(--amber-100);
  --status-warning-border: var(--amber-700);
  --status-warning-accent: var(--amber-400);
  --status-warning-strong: var(--amber-500);
  --status-danger-bg: var(--red-950);
  --status-danger-fg: var(--red-100);
  --status-danger-border: var(--red-700);
  --status-danger-accent: var(--red-400);
  --status-danger-strong: var(--red-500);
  --status-info-bg: var(--blue-950);
  --status-info-fg: var(--blue-100);
  --status-info-border: var(--blue-700);
  --status-info-accent: var(--blue-400);
  --status-info-strong: var(--blue-500);
  --status-neutral-bg: var(--gray-950);
  --status-neutral-fg: var(--gray-100);
  --status-neutral-border: var(--gray-700);
  --status-neutral-accent: var(--gray-450);
  --status-neutral-strong: var(--gray-500);

  --level-access-bg: var(--gray-800);
  --level-access-fg: var(--gray-300);
  --level-access-accent: var(--gray-450);
  --level-access-strong: var(--gray-500);
  --level-use-bg: var(--blue-950);
  --level-use-fg: var(--blue-100);
  --level-use-accent: var(--blue-400);
  --level-use-strong: var(--blue-500);
  --level-extended-bg: var(--violet-950);
  --level-extended-fg: var(--violet-100);
  --level-extended-accent: var(--violet-400);
  --level-extended-strong: var(--violet-500);

  --text-on-accent: var(--gray-0);
}