/* ============================================================
   ERP Design Tokens — shared across AD-HRIS and AI 계약관리시스템
   ------------------------------------------------------------
   Source of truth for both projects' visual identity. Neither
   project should redefine any of these names locally — extend
   with new, domain-specific tokens instead (e.g. contract-status
   pill colors live in AI 계약관리시스템's own stylesheet, not here,
   since AD-HRIS has no equivalent concept).

   Naming/structure adopted from AD-HRIS's dashboard.css (already
   the more complete taxonomy of the two). Accent color, the
   Pretendard-first font stack, and the light/dark delivery pattern
   (media query + explicit data-theme attribute, both directions)
   are adopted from AI 계약관리시스템, which had the more robust
   version of each.
   ============================================================ */

:root {
  --font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 0.9375rem;

  /* Brand — single accent (previously two competing teal/emerald
     brand colors in AD-HRIS; neither project asked for two, so this
     collapses them into one, consistently derived, accent family) */
  --primary: #0e7c86;
  --primary-hover: #0a5f67;
  --primary-light: #7dd3d8;
  --primary-bg: #e3f2f1;
  --accent: #0e7c86;
  --accent-light: #7dd3d8;
  --accent-bg: #e3f2f1;

  /* Status colors, each paired with a soft background tint */
  --success: #1a7a41;
  --success-bg: #e2f6ea;
  --warning: #b5620a;
  --warning-bg: #fdecd6;
  --danger: #c02626;
  --danger-bg: #fce8e8;
  --info: #2456c9;
  --info-bg: #e5edfc;

  /* Backgrounds */
  --bg-primary: #f2f4f7;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-light: #f8f9fb;
  --bg-white: #ffffff;
  --bg-hover: #f8f9fb;
  --bg-active: rgba(14, 124, 134, 0.1);

  /* Text hierarchy */
  --text-primary: #1c222b;
  --text-secondary: #5b6472;
  --text-tertiary: #8991a0;
  --text-inverse: #ffffff;

  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-text: #5b6472;
  --sidebar-text-hover: #1c222b;
  --sidebar-border: #dde2e8;
  --sidebar-active-bg: #e3f2f1;
  --sidebar-active-text: #0e7c86;
  --sidebar-width: 240px;

  /* Header */
  --header-bg: #ffffff;
  --header-text: #1c222b;
  --header-border: #dde2e8;

  /* Borders */
  --border-color: #dde2e8;
  --border-light: #eef1f5;
  --border-strong: #c7ced7;
  --border-focus: #0e7c86;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(20, 24, 30, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 24, 30, 0.08);
  --shadow-md: 0 2px 8px rgba(20, 24, 30, 0.08);
  --shadow-lg: 0 4px 16px rgba(20, 24, 30, 0.08);
  --shadow-xl: 0 8px 24px rgba(20, 24, 30, 0.1);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition: all 0.2s ease;
  --transition-slow: all 0.3s ease;
}

/* ============================================================
   Dark theme
   - @media covers OS-level preference with no explicit choice yet
   - [data-theme="dark"] covers an explicit in-app toggle, and must
     win over the media query in both directions (see [data-theme="light"]
     below for a user who explicitly chose light while their OS is dark)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-hover: #57c6c9;
    --primary-light: #57c6c9;
    --primary-bg: rgba(14, 124, 134, 0.15);
    --accent: #2bb1b5;
    --accent-light: #57c6c9;
    --accent-bg: rgba(14, 124, 134, 0.15);

    --success: #6fd08e;
    --success-bg: #16321f;
    --warning: #f2ab5c;
    --warning-bg: #3a2510;
    --danger: #f28a8a;
    --danger-bg: #3a1c1c;
    --info: #85aef5;
    --info-bg: #16233f;

    --bg-primary: #14171c;
    --bg-secondary: #1b1f26;
    --bg-card: #1b1f26;
    --bg-light: #20242c;
    --bg-white: #1b1f26;
    --bg-hover: #20242c;
    --bg-active: rgba(43, 177, 181, 0.15);

    --text-primary: #e7e9ec;
    --text-secondary: #a3aab5;
    --text-tertiary: #747c88;

    --sidebar-bg: #14171c;
    --sidebar-text: #a3aab5;
    --sidebar-text-hover: #e7e9ec;
    --sidebar-border: #2b303a;
    --sidebar-active-bg: rgba(43, 177, 181, 0.15);
    --sidebar-active-text: #2bb1b5;

    --header-bg: #1b1f26;
    --header-text: #e7e9ec;
    --header-border: #2b303a;

    --border-color: #2b303a;
    --border-light: #20242c;
    --border-strong: #3a4049;
    --border-focus: #2bb1b5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --primary-hover: #57c6c9;
  --primary-light: #57c6c9;
  --primary-bg: rgba(14, 124, 134, 0.15);
  --accent: #2bb1b5;
  --accent-light: #57c6c9;
  --accent-bg: rgba(14, 124, 134, 0.15);

  --success: #6fd08e;
  --success-bg: #16321f;
  --warning: #f2ab5c;
  --warning-bg: #3a2510;
  --danger: #f28a8a;
  --danger-bg: #3a1c1c;
  --info: #85aef5;
  --info-bg: #16233f;

  --bg-primary: #14171c;
  --bg-secondary: #1b1f26;
  --bg-card: #1b1f26;
  --bg-light: #20242c;
  --bg-white: #1b1f26;
  --bg-hover: #20242c;
  --bg-active: rgba(43, 177, 181, 0.15);

  --text-primary: #e7e9ec;
  --text-secondary: #a3aab5;
  --text-tertiary: #747c88;

  --sidebar-bg: #14171c;
  --sidebar-text: #a3aab5;
  --sidebar-text-hover: #e7e9ec;
  --sidebar-border: #2b303a;
  --sidebar-active-bg: rgba(43, 177, 181, 0.15);
  --sidebar-active-text: #2bb1b5;

  --header-bg: #1b1f26;
  --header-text: #e7e9ec;
  --header-border: #2b303a;

  --border-color: #2b303a;
  --border-light: #20242c;
  --border-strong: #3a4049;
  --border-focus: #2bb1b5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  --primary: #0e7c86;
  --primary-hover: #0a5f67;
  --primary-light: #7dd3d8;
  --primary-bg: #e3f2f1;
  --accent: #0e7c86;
  --accent-light: #7dd3d8;
  --accent-bg: #e3f2f1;

  --success: #1a7a41;
  --success-bg: #e2f6ea;
  --warning: #b5620a;
  --warning-bg: #fdecd6;
  --danger: #c02626;
  --danger-bg: #fce8e8;
  --info: #2456c9;
  --info-bg: #e5edfc;

  --bg-primary: #f2f4f7;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-light: #f8f9fb;
  --bg-white: #ffffff;
  --bg-hover: #f8f9fb;
  --bg-active: rgba(14, 124, 134, 0.1);

  --text-primary: #1c222b;
  --text-secondary: #5b6472;
  --text-tertiary: #8991a0;

  --sidebar-bg: #ffffff;
  --sidebar-text: #5b6472;
  --sidebar-text-hover: #1c222b;
  --sidebar-border: #dde2e8;
  --sidebar-active-bg: #e3f2f1;
  --sidebar-active-text: #0e7c86;

  --header-bg: #ffffff;
  --header-text: #1c222b;
  --header-border: #dde2e8;

  --border-color: #dde2e8;
  --border-light: #eef1f5;
  --border-strong: #c7ced7;
  --border-focus: #0e7c86;

  --shadow-sm: 0 1px 3px rgba(20, 24, 30, 0.08);
  --shadow-md: 0 2px 8px rgba(20, 24, 30, 0.08);
  --shadow-lg: 0 4px 16px rgba(20, 24, 30, 0.08);
}