/* ============================================================
   함께워크_SI Design Tokens
   Cobalt design system — single source of truth
   ============================================================ */

:root {
  /* Brand */
  --cobalt: #0866FF;
  --cobalt-deep: #0143B5;
  --cobalt-darker: #0A2E7A;
  --cobalt-soft: #E5F0FE;
  --cobalt-softer: #F2F7FF;
  --cobalt-tint: #7AA8FF;

  /* Surface */
  --canvas: #FFFFFF;
  --surface-soft: #F5F6F7;
  --surface-softer: #FAFBFC;
  --surface-dark: #0A1317;
  --surface-darker: #060B0E;

  /* Hairlines */
  --hairline: #E4E6EB;
  --hairline-soft: #EBEDF0;
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --hairline-darker: rgba(255, 255, 255, 0.08);

  /* Ink */
  --ink-deep: #0A1317;
  --ink: #1C2B33;
  --slate: #4B5563;
  --steel: #6B7280;
  --stone: #9CA3AF;
  --mist: #D1D5DB;

  /* Status */
  --critical: #E41E3F;
  --critical-soft: #FDE9EC;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --success: #31A24C;
  --success-soft: #DCFCE7;
  --info: #0EA5E9;
  --info-soft: #E0F2FE;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 13px;
  --r-2xl: 20px;
  --r-3xl: 28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(10, 19, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 19, 23, 0.04), 0 0 0 1px var(--hairline-soft);
  --shadow-md: 0 4px 12px rgba(10, 19, 23, 0.06), 0 0 0 1px var(--hairline-soft);
  --shadow-lg: 0 8px 24px rgba(10, 19, 23, 0.08), 0 0 0 1px var(--hairline);
  --shadow-xl: 0 24px 64px rgba(10, 19, 23, 0.12), 0 0 0 1px var(--hairline);
  --shadow-glow: 0 0 0 4px rgba(8, 102, 255, 0.12);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Typography */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration */
  --d-fast: 150ms;
  --d-base: 220ms;
  --d-slow: 380ms;
  --d-slower: 600ms;

  /* Layer */
  --z-nav: 100;
  --z-overlay: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-chatbot: 350;

  /* Layout */
  --container-max: 1240px;
  --container-pad: 32px;
}

[data-theme="dark"] {
  --canvas: #0A1317;
  --surface-soft: #111B22;
  --surface-softer: #0D161B;
  --surface-dark: #1C2B33;

  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-soft: rgba(255, 255, 255, 0.08);

  --ink-deep: #FFFFFF;
  --ink: #E5E7EB;
  --slate: #9CA3AF;
  --steel: #6B7280;
  --stone: #4B5563;

  --cobalt-soft: rgba(8, 102, 255, 0.12);
  --cobalt-softer: rgba(8, 102, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--hairline-soft);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--hairline-soft);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--hairline);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--hairline);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss06";
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }