/* ============================================================
   IBM Carbon Design System — Colors & Type
   Token values aligned to Carbon v11 (White + G10 / G90 + G100)
   Reference: https://carbondesignsystem.com
   ============================================================ */

/* ---------- Fonts (IBM Plex) ---------- */
/* Local variable font (uploaded by user) — covers 300–700 + width axis */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
/* IBM Plex Mono — local vendor bundle (offline-safe, CDN 제거) */
@import url('fonts/vendor/_local-fonts-legacy.css');

/* Plex Serif 는 거의 사용 안 함 → 시스템 Georgia fallback */
/* 필요 시 https://github.com/IBM/plex 에서 serif woff2 받아 vendor 에 추가 */

/* NanumGothic — 한글 전용 (Carbon 공식엔 없지만 한국어 발표 지원 추가) */
@font-face {
  font-family: 'NanumGothic';
  src: url('fonts/NanumGothic.otf') format('opentype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================
     CORE PALETTE — IBM Design Language swatches
     ========================================================== */

  /* Neutrals */
  --cds-white:      #ffffff;
  --cds-gray-10:    #f4f4f4;
  --cds-gray-20:    #e0e0e0;
  --cds-gray-30:    #c6c6c6;
  --cds-gray-40:    #a8a8a8;
  --cds-gray-50:    #8d8d8d;
  --cds-gray-60:    #6f6f6f;
  --cds-gray-70:    #525252;
  --cds-gray-80:    #393939;
  --cds-gray-90:    #262626;
  --cds-gray-100:   #161616;
  --cds-black:      #000000;

  /* Blue — IBM signature */
  --cds-blue-10:    #edf5ff;
  --cds-blue-20:    #d0e2ff;
  --cds-blue-30:    #a6c8ff;
  --cds-blue-40:    #78a9ff;
  --cds-blue-50:    #4589ff;
  --cds-blue-60:    #0f62fe;    /* IBM Blue — brand */
  --cds-blue-70:    #0043ce;
  --cds-blue-80:    #002d9c;
  --cds-blue-90:    #001d6c;
  --cds-blue-100:   #001141;

  /* Red — danger */
  --cds-red-10:     #fff1f1;
  --cds-red-20:     #ffd7d9;
  --cds-red-30:     #ffb3b8;
  --cds-red-40:     #ff8389;
  --cds-red-50:     #fa4d56;
  --cds-red-60:     #da1e28;
  --cds-red-70:     #a2191f;
  --cds-red-80:     #750e13;
  --cds-red-90:     #520408;
  --cds-red-100:    #2d0709;

  /* Green — success */
  --cds-green-10:   #defbe6;
  --cds-green-20:   #a7f0ba;
  --cds-green-30:   #6fdc8c;
  --cds-green-40:   #42be65;
  --cds-green-50:   #24a148;
  --cds-green-60:   #198038;
  --cds-green-70:   #0e6027;
  --cds-green-80:   #044317;
  --cds-green-90:   #022d0d;
  --cds-green-100:  #071908;

  /* Yellow — caution (used on dark) */
  --cds-yellow-10:  #fcf4d6;
  --cds-yellow-20:  #fddc69;
  --cds-yellow-30:  #f1c21b;
  --cds-yellow-40:  #d2a106;
  --cds-yellow-50:  #b28600;
  --cds-yellow-60:  #8e6a00;
  --cds-yellow-70:  #684e00;

  /* Purple — AI gradient anchors */
  --cds-purple-10:  #f6f2ff;
  --cds-purple-20:  #e8daff;
  --cds-purple-30:  #d4bbff;
  --cds-purple-40:  #be95ff;
  --cds-purple-50:  #a56eff;
  --cds-purple-60:  #8a3ffc;
  --cds-purple-70:  #6929c4;
  --cds-purple-80:  #491d8b;

  /* Teal / Cyan / Magenta / Orange — categorical */
  --cds-teal-60:    #009d9a;
  --cds-cyan-60:    #0072c3;
  --cds-magenta-60: #d02670;
  --cds-orange-60:  #ba4e00;

  /* ==========================================================
     SEMANTIC TOKENS — WHITE THEME (default)
     ========================================================== */

  /* Backgrounds */
  --cds-background:                 var(--cds-white);
  --cds-background-hover:           rgba(141,141,141,0.12);
  --cds-background-active:          rgba(141,141,141,0.50);
  --cds-background-selected:        rgba(141,141,141,0.20);
  --cds-background-selected-hover:  rgba(141,141,141,0.32);
  --cds-background-inverse:         var(--cds-gray-80);
  --cds-background-inverse-hover:   #4c4c4c;
  --cds-background-brand:           var(--cds-blue-60);

  /* Layers (White theme uses G10 → White → G10 alternation) */
  --cds-layer-01:          var(--cds-gray-10);
  --cds-layer-02:          var(--cds-white);
  --cds-layer-03:          var(--cds-gray-10);
  --cds-layer-hover-01:    #e8e8e8;
  --cds-layer-hover-02:    #e8e8e8;
  --cds-layer-active-01:   var(--cds-gray-30);
  --cds-layer-accent-01:   var(--cds-gray-20);

  /* Field */
  --cds-field-01:          var(--cds-gray-10);
  --cds-field-02:          var(--cds-white);
  --cds-field-hover-01:    #e8e8e8;

  /* Text */
  --cds-text-primary:      var(--cds-gray-100);
  --cds-text-secondary:    var(--cds-gray-70);
  --cds-text-placeholder:  var(--cds-gray-40);
  --cds-text-helper:       var(--cds-gray-60);
  --cds-text-on-color:     var(--cds-white);
  --cds-text-on-color-disabled: var(--cds-gray-50);
  --cds-text-inverse:      var(--cds-white);
  --cds-text-disabled:     rgba(22,22,22,0.25);
  --cds-text-error:        var(--cds-red-60);

  /* Icons */
  --cds-icon-primary:      var(--cds-gray-100);
  --cds-icon-secondary:    var(--cds-gray-70);
  --cds-icon-on-color:     var(--cds-white);
  --cds-icon-inverse:      var(--cds-white);
  --cds-icon-disabled:     rgba(22,22,22,0.25);

  /* Borders */
  --cds-border-subtle-00:  var(--cds-gray-20);
  --cds-border-subtle-01:  var(--cds-gray-20);
  --cds-border-strong-01:  var(--cds-gray-50);
  --cds-border-tile-01:    var(--cds-gray-30);
  --cds-border-inverse:    var(--cds-gray-100);
  --cds-border-interactive:var(--cds-blue-60);

  /* Links */
  --cds-link-primary:       var(--cds-blue-60);
  --cds-link-primary-hover: var(--cds-blue-70);
  --cds-link-secondary:     var(--cds-blue-70);
  --cds-link-visited:       var(--cds-purple-70);

  /* Buttons */
  --cds-button-primary:         var(--cds-blue-60);
  --cds-button-primary-hover:   #0050e6;
  --cds-button-primary-active:  var(--cds-blue-80);
  --cds-button-secondary:       var(--cds-gray-80);
  --cds-button-secondary-hover: #4c4c4c;
  --cds-button-danger:          var(--cds-red-60);
  --cds-button-danger-hover:    #b81921;
  --cds-button-tertiary:        var(--cds-blue-60);
  --cds-button-disabled:        var(--cds-gray-20);
  --cds-button-separator:       var(--cds-gray-20);

  /* Support (status) */
  --cds-support-error:     var(--cds-red-60);
  --cds-support-success:   var(--cds-green-50);
  --cds-support-warning:   var(--cds-yellow-30);
  --cds-support-info:      var(--cds-blue-70);

  /* Focus */
  --cds-focus:             var(--cds-blue-60);
  --cds-focus-inset:       var(--cds-white);
  --cds-focus-inverse:     var(--cds-white);

  /* Tag colors (neutral) */
  --cds-tag-bg-gray:       var(--cds-gray-20);
  --cds-tag-fg-gray:       var(--cds-gray-100);
  --cds-tag-bg-blue:       var(--cds-blue-20);
  --cds-tag-fg-blue:       var(--cds-blue-80);
  --cds-tag-bg-red:        var(--cds-red-20);
  --cds-tag-fg-red:        var(--cds-red-80);
  --cds-tag-bg-green:      var(--cds-green-20);
  --cds-tag-fg-green:      var(--cds-green-80);
  --cds-tag-bg-purple:     var(--cds-purple-20);
  --cds-tag-fg-purple:     var(--cds-purple-80);

  /* AI gradient (used for AI surfaces, AI label) */
  --cds-ai-gradient-start: #d0e2ff;
  --cds-ai-gradient-mid:   #e8daff;
  --cds-ai-gradient-end:   #f6f2ff;
  --cds-ai-border:         #a56eff;

  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */
  --cds-font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --cds-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --cds-font-serif:   'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  /* 한글 우선 스택 (NERV 추가 — 슬라이드에서 한국어 표시 시 사용) */
  --cds-font-sans-kr: 'IBM Plex Sans', 'NanumGothic', 'Apple SD Gothic Neo', 'Pretendard', -apple-system, sans-serif;
  --cds-font-nanum:   'NanumGothic', 'IBM Plex Sans', 'Apple SD Gothic Neo', sans-serif;

  /* Type tokens — Carbon Productive scale */
  --cds-label-01-size: 12px;     --cds-label-01-lh: 16px;  --cds-label-01-weight: 400; --cds-label-01-ls: 0.32px;
  --cds-helper-text-01-size: 12px; --cds-helper-text-01-lh: 16px; --cds-helper-text-01-weight: 400; --cds-helper-text-01-ls: 0.32px;
  --cds-body-compact-01-size: 14px; --cds-body-compact-01-lh: 18px; --cds-body-compact-01-weight: 400; --cds-body-compact-01-ls: 0.16px;
  --cds-body-compact-02-size: 16px; --cds-body-compact-02-lh: 22px; --cds-body-compact-02-weight: 400;
  --cds-body-01-size: 14px;   --cds-body-01-lh: 20px;   --cds-body-01-weight: 400; --cds-body-01-ls: 0.16px;
  --cds-body-02-size: 16px;   --cds-body-02-lh: 24px;   --cds-body-02-weight: 400;
  --cds-code-01-size: 12px;   --cds-code-01-lh: 16px;   --cds-code-01-weight: 400; --cds-code-01-ls: 0.32px;
  --cds-code-02-size: 14px;   --cds-code-02-lh: 20px;   --cds-code-02-weight: 400; --cds-code-02-ls: 0.32px;
  --cds-heading-compact-01-size: 14px; --cds-heading-compact-01-lh: 18px; --cds-heading-compact-01-weight: 600; --cds-heading-compact-01-ls: 0.16px;
  --cds-heading-compact-02-size: 16px; --cds-heading-compact-02-lh: 22px; --cds-heading-compact-02-weight: 600;
  --cds-heading-01-size: 14px; --cds-heading-01-lh: 20px; --cds-heading-01-weight: 600; --cds-heading-01-ls: 0.16px;
  --cds-heading-02-size: 16px; --cds-heading-02-lh: 24px; --cds-heading-02-weight: 600;
  --cds-heading-03-size: 20px; --cds-heading-03-lh: 28px; --cds-heading-03-weight: 400;
  --cds-heading-04-size: 28px; --cds-heading-04-lh: 36px; --cds-heading-04-weight: 400;
  --cds-heading-05-size: 32px; --cds-heading-05-lh: 40px; --cds-heading-05-weight: 400;
  --cds-heading-06-size: 42px; --cds-heading-06-lh: 50px; --cds-heading-06-weight: 300; /* Light */
  --cds-heading-07-size: 54px; --cds-heading-07-lh: 64px; --cds-heading-07-weight: 300;

  /* Fluid expressive heading (Heading-07 fluid example) */
  --cds-fluid-heading-03-size: clamp(20px, 2vw, 28px);
  --cds-fluid-heading-04-size: clamp(28px, 3vw, 42px);
  --cds-fluid-heading-05-size: clamp(32px, 4vw, 60px);

  /* ==========================================================
     SPACING (Carbon spacing scale, 4px base)
     ========================================================== */
  --cds-spacing-01: 2px;
  --cds-spacing-02: 4px;
  --cds-spacing-03: 8px;
  --cds-spacing-04: 12px;
  --cds-spacing-05: 16px;
  --cds-spacing-06: 24px;
  --cds-spacing-07: 32px;
  --cds-spacing-08: 40px;
  --cds-spacing-09: 48px;
  --cds-spacing-10: 64px;
  --cds-spacing-11: 80px;
  --cds-spacing-12: 96px;
  --cds-spacing-13: 160px;

  /* ==========================================================
     ELEVATION / SHADOWS
     ========================================================== */
  --cds-shadow-raised: 0 2px 6px rgba(0,0,0,0.20);
  --cds-shadow-overlay: 0 4px 16px rgba(0,0,0,0.20);
  --cds-shadow-menu:    0 2px 6px rgba(0,0,0,0.30);
  --cds-shadow-focus:   0 0 0 2px var(--cds-focus), 0 0 0 4px var(--cds-focus-inset);

  /* Carbon does NOT use rounded corners by default. */
  --cds-radius-0: 0;
  --cds-radius-sm: 2px;   /* code snippets, tags */
  --cds-radius-md: 4px;   /* rarely used — modals sometimes */
  --cds-radius-pill: 999px;

  /* Motion */
  --cds-motion-fast-01: 70ms;
  --cds-motion-fast-02: 110ms;
  --cds-motion-moderate-01: 150ms;
  --cds-motion-moderate-02: 240ms;
  --cds-motion-slow-01: 400ms;
  --cds-motion-slow-02: 700ms;
  --cds-ease-standard:  cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-entrance:  cubic-bezier(0.0, 0, 0.38, 0.9);
  --cds-ease-exit:      cubic-bezier(0.2, 0, 1, 0.9);
  --cds-ease-expressive-standard: cubic-bezier(0.4, 0.14, 0.3, 1);

  /* Grid gutter / max width */
  --cds-grid-gutter: 32px;
  --cds-grid-margin: 16px;
}

/* ============================================================
   DARK THEME — Gray 100 (apply via [data-theme="g100"])
   ============================================================ */
[data-theme="g100"] {
  --cds-background:                 var(--cds-gray-100);
  --cds-background-hover:           rgba(141,141,141,0.16);
  --cds-background-active:          rgba(141,141,141,0.40);
  --cds-background-selected:        rgba(141,141,141,0.24);
  --cds-background-selected-hover:  rgba(141,141,141,0.32);
  --cds-background-inverse:         var(--cds-gray-10);
  --cds-background-inverse-hover:   var(--cds-gray-20);
  --cds-background-brand:           var(--cds-blue-60);

  --cds-layer-01:          var(--cds-gray-90);
  --cds-layer-02:          var(--cds-gray-80);
  --cds-layer-03:          var(--cds-gray-70);
  --cds-layer-hover-01:    #333333;
  --cds-layer-active-01:   var(--cds-gray-60);
  --cds-layer-accent-01:   var(--cds-gray-80);

  --cds-field-01:          var(--cds-gray-90);
  --cds-field-02:          var(--cds-gray-80);
  --cds-field-hover-01:    #333333;

  --cds-text-primary:      var(--cds-gray-10);
  --cds-text-secondary:    var(--cds-gray-30);
  --cds-text-placeholder:  var(--cds-gray-60);
  --cds-text-helper:       var(--cds-gray-50);
  --cds-text-on-color:     var(--cds-white);
  --cds-text-on-color-disabled: rgba(255,255,255,0.25);
  --cds-text-inverse:      var(--cds-gray-100);
  --cds-text-disabled:     rgba(244,244,244,0.25);
  --cds-text-error:        var(--cds-red-40);

  --cds-icon-primary:      var(--cds-gray-10);
  --cds-icon-secondary:    var(--cds-gray-30);
  --cds-icon-on-color:     var(--cds-white);
  --cds-icon-inverse:      var(--cds-gray-100);

  --cds-border-subtle-00:  var(--cds-gray-80);
  --cds-border-subtle-01:  var(--cds-gray-70);
  --cds-border-strong-01:  var(--cds-gray-50);
  --cds-border-tile-01:    var(--cds-gray-70);
  --cds-border-inverse:    var(--cds-gray-10);

  --cds-button-secondary:       #6f6f6f;
  --cds-button-secondary-hover: #5e5e5e;

  --cds-support-error:     var(--cds-red-50);
  --cds-support-info:      var(--cds-blue-50);

  --cds-focus:             var(--cds-white);
  --cds-focus-inset:       var(--cds-gray-100);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — use .cds-* directly on elements
   ============================================================ */

html, body {
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
  background: var(--cds-background);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cds-code-01, .cds-code-02 { font-family: var(--cds-font-mono); }

.cds-label-01        { font: 400 12px/16px var(--cds-font-sans); letter-spacing: 0.32px; }
.cds-helper-text-01  { font: 400 12px/16px var(--cds-font-sans); letter-spacing: 0.32px; color: var(--cds-text-helper); }
.cds-body-compact-01 { font: 400 14px/18px var(--cds-font-sans); letter-spacing: 0.16px; }
.cds-body-compact-02 { font: 400 16px/22px var(--cds-font-sans); }
.cds-body-01         { font: 400 14px/20px var(--cds-font-sans); letter-spacing: 0.16px; }
.cds-body-02         { font: 400 16px/24px var(--cds-font-sans); }
.cds-code-01         { font: 400 12px/16px var(--cds-font-mono); letter-spacing: 0.32px; }
.cds-code-02         { font: 400 14px/20px var(--cds-font-mono); letter-spacing: 0.32px; }

.cds-heading-compact-01 { font: 600 14px/18px var(--cds-font-sans); letter-spacing: 0.16px; }
.cds-heading-compact-02 { font: 600 16px/22px var(--cds-font-sans); }
.cds-heading-01 { font: 600 14px/20px var(--cds-font-sans); letter-spacing: 0.16px; }
.cds-heading-02 { font: 600 16px/24px var(--cds-font-sans); }
.cds-heading-03 { font: 400 20px/28px var(--cds-font-sans); }
.cds-heading-04 { font: 400 28px/36px var(--cds-font-sans); }
.cds-heading-05 { font: 400 32px/40px var(--cds-font-sans); letter-spacing: 0; }
.cds-heading-06 { font: 300 42px/50px var(--cds-font-sans); letter-spacing: 0; }
.cds-heading-07 { font: 300 54px/64px var(--cds-font-sans); letter-spacing: 0; }

/* fluid expressive style (used on marketing / AI surfaces) */
.cds-fluid-heading {
  font-family: var(--cds-font-sans);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 76px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Link style */
.cds-link {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.cds-link:hover { color: var(--cds-link-primary-hover); }

/* Default element bindings */
h1 { font: 300 42px/50px var(--cds-font-sans); }
h2 { font: 400 32px/40px var(--cds-font-sans); }
h3 { font: 400 28px/36px var(--cds-font-sans); }
h4 { font: 400 20px/28px var(--cds-font-sans); }
h5 { font: 600 16px/24px var(--cds-font-sans); }
h6 { font: 600 14px/20px var(--cds-font-sans); letter-spacing: 0.16px; }
p  { font: 400 14px/20px var(--cds-font-sans); letter-spacing: 0.16px; }
code, kbd, samp, pre { font-family: var(--cds-font-mono); }