/* ==========================================================================
   SMART-WORK DESIGN SYSTEM TOKENS (DESIGN.html Master CSS)
   Single Source of Truth for all Web Applications & Sub-pages
   ========================================================================== */

/* Pretendard Webfont CDN */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root, html.light {
  /* 1. Page Canvas Background */
  --background: #F6F9F8;

  /* 2. Surface Container / Card & Header Background */
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card-foreground: #182622;

  /* 3. Primary Foreground / Main Text Color */
  --foreground: #182622;

  /* 5. Muted Foreground / Sub-labels & Secondary Text */
  --muted-foreground: #5C6E67;
  --muted: #F0F4F2;
  --muted-subtle: #8A9E96;

  /* 6. Primary Brand Accent (Mint Teal) */
  --primary: #5FA793;
  --primary-hover: #4F9280;
  --primary-active: #3E7A6B;

  /* 7. Primary Element Text Color */
  --primary-foreground: #FFFFFF;

  /* 8. Secondary Surface (Soft Sage) */
  --secondary: #EAF3F0;
  --secondary-hover: #DCEBE6;

  /* 9. Secondary Element Text Color */
  --secondary-foreground: #1D3A32;

  /* 10. Accent Sand (Warm Sand/Beige) */
  --accent-sand: #E6DDD0;
  --accent-sand-hover: #DAD0C0;

  /* 11. Accent Sand Text Color */
  --accent-sand-foreground: #3D352B;

  /* 12. Border & Divider Line Color */
  --border: #D8E5E1;
  --border-hover: #B2CCC4;

  /* 13. Input Field Background & Border */
  --input: #E4ECE9;

  /* 14. Focus Ring Outline Highlight */
  --ring: rgba(95, 167, 147, 0.4);

  /* 15. Destructive Status (Red) */
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --destructive-bg: #FEF2F2;

  /* 16. Warning Status (Amber) */
  --warning: #F59E0B;
  --warning-foreground: #FFFFFF;
  --warning-bg: #FFFBEB;

  /* 17. Success Status (Emerald) */
  --success: #10B981;
  --success-foreground: #FFFFFF;
  --success-bg: #ECFDF5;

  /* 18. Info Status (Sky Blue) */
  --info: #0EA5E9;
  --info-foreground: #FFFFFF;
  --info-bg: #F0F9FF;

  /* Node Ports (노드 그래프 포트 — 상태·스킨과 상관없이 고정: 들어오는 쪽 / 나가는 쪽) */
  --port-in: #0891B2;
  --port-out: #C026D3;

  /* Font Families (스킨이 --font-display만 바꿔서 제목·숫자 서체를 교체한다) */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: Consolas, "Courier New", monospace;

  /* Geometry Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Box Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(24, 38, 34, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(24, 38, 34, 0.07), 0 2px 4px -2px rgba(24, 38, 34, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(24, 38, 34, 0.08), 0 4px 6px -4px rgba(24, 38, 34, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(24, 38, 34, 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgba(24, 38, 34, 0.08), inset 0 1px 2px 0 rgba(24, 38, 34, 0.04);
  --shadow-input: inset 0 2px 4px 0 rgba(24, 38, 34, 0.07), inset 0 1px 2px 0 rgba(24, 38, 34, 0.03);
}

/* Dark Mode Overrides (Mint Slate Dark Theme) */
html.dark {
  --background: #0E1614;
  --surface: #14211D;
  --card: #14211D;
  --card-foreground: #D3DDD9;

  /* 다크모드 본문은 순백 대신 라이트그레이 — 대비가 과해 눈부시지 않게 */
  --foreground: #D3DDD9;
  --muted: #1B2B26;
  --muted-foreground: #8FA49C;
  --muted-subtle: #62776F;

  --secondary: #1E312A;
  --secondary-hover: #263E35;
  --secondary-foreground: #CBDAD5;

  --accent-sand: #363028;
  --accent-sand-hover: #473F35;
  --accent-sand-foreground: #D6CABC;

  --border: #233730;
  --border-hover: #324D43;
  --input: #1C2D27;
  --ring: rgba(95, 167, 147, 0.5);

  --destructive-bg: #2C1517;
  --warning-bg: #2B2111;
  --success-bg: #0D281F;
  --info-bg: #0F2634;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5), inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-input: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4), inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);

  --port-in: #22D3EE;
  --port-out: #E879F9;
}

/* Pretendard Font Size & Readability Utility Classes */
/* 1. Caption / Label (최소 크기 12px: Medium 500 두께 + line-height 1.5 + letter-spacing 보정) */
.fs-12 { font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }
.fs-13 { font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }

/* 2. Body 2 (조밀한 본문 14px: line-height 1.45) */
.fs-14 { font-size: 14px; line-height: 1.45; letter-spacing: -0.015em; }

/* 3. Body 1 (일반 본문 15px/16px: 읽기 편한 line-height 1.55) */
.fs-15 { font-size: 15px; line-height: 1.55; letter-spacing: -0.015em; }
.fs-16 { font-size: 16px; line-height: 1.55; letter-spacing: -0.02em; }
.fs-18 { font-size: 18px; line-height: 1.45; letter-spacing: -0.02em; }

/* 4. Display / Head (큰 제목 20px, 24px, 28px, 32px: Bold 700 / SemiBold 600) */
.fs-20 { font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.025em; }
.fs-24 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; }
.fs-28 { font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; }
.fs-32 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.035em; }
.fs-36 { font-size: 36px; line-height: 1.18; font-weight: 700; letter-spacing: -0.04em; }
.fs-48 { font-size: 48px; line-height: 1.12; font-weight: 700; letter-spacing: -0.04em; }

.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }