/*
 * IBM Carbon Design System — g100 Dark Theme Tokens
 * https://carbondesignsystem.com
 * Fonts: IBM Plex Sans + IBM Plex Mono (Google Fonts)
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=IBM+Plex+Serif:wght@300;400;600&display=swap');

/* ── CARBON G100 DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Background */
  --cds-background:            #161616;
  --cds-background-hover:      #1f1f1f;
  --cds-background-active:     #393939;
  --cds-background-selected:   #262626;

  /* Layers */
  --cds-layer-01:              #262626;
  --cds-layer-02:              #393939;
  --cds-layer-03:              #525252;
  --cds-layer-hover-01:        #333333;
  --cds-layer-hover-02:        #474747;
  --cds-layer-active-01:       #525252;
  --cds-layer-selected-01:     #393939;
  --cds-layer-accent-01:       #393939;

  /* Borders */
  --cds-border-subtle-00:      #262626;
  --cds-border-subtle-01:      #393939;
  --cds-border-subtle-02:      #525252;
  --cds-border-strong-01:      #6f6f6f;
  --cds-border-strong-02:      #8d8d8d;
  --cds-border-inverse:        #f4f4f4;
  --cds-border-interactive:    #4589ff;

  /* Text */
  --cds-text-primary:          #f4f4f4;
  --cds-text-secondary:        #c6c6c6;
  --cds-text-placeholder:      #6f6f6f;
  --cds-text-helper:           #8d8d8d;
  --cds-text-error:            #ffb3b8;
  --cds-text-inverse:          #161616;
  --cds-text-on-color:         #ffffff;
  --cds-text-disabled:         #525252;

  /* Links */
  --cds-link-primary:          #78a9ff;
  --cds-link-primary-hover:    #a6c8ff;
  --cds-link-secondary:        #a6c8ff;
  --cds-link-visited:          #be95ff;
  --cds-link-inverse:          #0f62fe;

  /* Interactive */
  --cds-interactive:           #4589ff;
  --cds-focus:                 #ffffff;
  --cds-focus-inset:           #161616;

  /* Button */
  --cds-button-primary:        #0f62fe;
  --cds-button-primary-hover:  #0353e9;
  --cds-button-primary-active: #002d9c;
  --cds-button-secondary:      #393939;
  --cds-button-secondary-hover:#474747;
  --cds-button-danger:         #da1e28;
  --cds-button-danger-hover:   #b81921;
  --cds-button-disabled:       #262626;
  --cds-button-separator:      #161616;

  /* Support / Status */
  --cds-support-error:         #ff8389;
  --cds-support-success:       #42be65;
  --cds-support-warning:       #f1c21b;
  --cds-support-info:          #4589ff;
  --cds-support-caution-major: #ff832b;
  --cds-support-caution-minor: #f1c21b;

  /* Brand Blues (IBM Palette) */
  --ibm-blue-10:  #edf5ff;
  --ibm-blue-20:  #d0e2ff;
  --ibm-blue-30:  #a6c8ff;
  --ibm-blue-40:  #78a9ff;
  --ibm-blue-50:  #4589ff;
  --ibm-blue-60:  #0f62fe;   /* Primary IBM Blue */
  --ibm-blue-70:  #0043ce;
  --ibm-blue-80:  #002d9c;
  --ibm-blue-90:  #001d6c;
  --ibm-blue-100: #001141;

  /* IBM Cyan */
  --ibm-cyan-40:  #33b1ff;
  --ibm-cyan-50:  #1192e8;
  --ibm-cyan-60:  #0072c3;

  /* IBM Teal */
  --ibm-teal-40:  #08bdba;

  /* IBM Green */
  --ibm-green-40: #42be65;
  --ibm-green-50: #24a148;

  /* IBM Yellow */
  --ibm-yellow-30:#f1c21b;

  /* IBM Red */
  --ibm-red-40:   #ff8389;
  --ibm-red-50:   #fa4d56;
  --ibm-red-60:   #da1e28;

  /* IBM Purple */
  --ibm-purple-40:#be95ff;
  --ibm-purple-50:#a56eff;

  /* IBM Magenta */
  --ibm-magenta-40:#ff7eb6;

  /* Overlay */
  --cds-overlay:  rgba(0, 0, 0, 0.65);

  /* ── SPACING SCALE (Carbon 2px base) ──────────────────────────────── */
  --cds-spacing-01: 0.125rem;   /* 2px  */
  --cds-spacing-02: 0.25rem;    /* 4px  */
  --cds-spacing-03: 0.5rem;     /* 8px  */
  --cds-spacing-04: 0.75rem;    /* 12px */
  --cds-spacing-05: 1rem;       /* 16px */
  --cds-spacing-06: 1.5rem;     /* 24px */
  --cds-spacing-07: 2rem;       /* 32px */
  --cds-spacing-08: 2.5rem;     /* 40px */
  --cds-spacing-09: 3rem;       /* 48px */
  --cds-spacing-10: 4rem;       /* 64px */
  --cds-spacing-11: 5rem;       /* 80px */
  --cds-spacing-12: 6rem;       /* 96px */
  --cds-spacing-13: 10rem;      /* 160px */

  /* ── TYPOGRAPHY SCALE ─────────────────────────────────────────────── */
  --cds-label-01-size:       0.75rem;    /* 12px */
  --cds-label-01-weight:     400;
  --cds-label-01-tracking:   0.32px;

  --cds-helper-text-01-size: 0.75rem;
  --cds-helper-text-01-weight:400;

  --cds-body-short-01-size:  0.875rem;   /* 14px */
  --cds-body-short-01-weight:400;
  --cds-body-short-01-line:  1.28572;

  --cds-body-long-01-size:   0.875rem;
  --cds-body-long-01-weight: 400;
  --cds-body-long-01-line:   1.42857;

  --cds-body-short-02-size:  1rem;       /* 16px */
  --cds-body-short-02-weight:400;
  --cds-body-short-02-line:  1.375;

  --cds-body-long-02-size:   1rem;
  --cds-body-long-02-weight: 400;
  --cds-body-long-02-line:   1.5;

  --cds-code-01-size:        0.75rem;
  --cds-code-01-family:      'IBM Plex Mono', monospace;

  --cds-code-02-size:        0.875rem;
  --cds-code-02-family:      'IBM Plex Mono', monospace;

  --cds-heading-01-size:     0.875rem;
  --cds-heading-01-weight:   600;

  --cds-heading-02-size:     1rem;
  --cds-heading-02-weight:   600;

  --cds-heading-03-size:     1.25rem;
  --cds-heading-03-weight:   400;
  --cds-heading-03-line:     1.4;

  --cds-heading-04-size:     1.75rem;
  --cds-heading-04-weight:   400;

  --cds-heading-05-size:     2rem;
  --cds-heading-05-weight:   300;

  --cds-heading-06-size:     2.625rem;
  --cds-heading-06-weight:   300;

  --cds-heading-07-size:     3.375rem;
  --cds-heading-07-weight:   300;

  --cds-display-01-size:     2.625rem;
  --cds-display-01-weight:   300;
  --cds-display-01-line:     1.19;

  --cds-display-02-size:     2.625rem;
  --cds-display-02-weight:   600;

  --cds-display-03-size:     clamp(2.625rem, 5.5vw, 4.25rem);
  --cds-display-03-weight:   300;

  --cds-display-04-size:     clamp(2.625rem, 5.5vw, 4.25rem);
  --cds-display-04-weight:   600;

  /* ── APP CONVENIENCE ALIASES ──────────────────────────────────────── */
  --bg:           var(--cds-background);
  --bg-1:         var(--cds-layer-01);
  --bg-2:         var(--cds-layer-02);
  --bg-3:         var(--cds-layer-03);
  --blue:         var(--ibm-blue-60);
  --blue-l:       var(--ibm-blue-40);
  --blue-ll:      var(--ibm-blue-30);
  --cyan:         var(--ibm-cyan-40);
  --cyan-d:       var(--ibm-cyan-50);
  --gold:         var(--ibm-yellow-30);
  --green:        var(--ibm-green-40);
  --green-d:      var(--ibm-green-50);
  --red:          var(--ibm-red-50);
  --purple:       var(--ibm-purple-50);
  --text-0:       var(--cds-text-primary);
  --text-1:       var(--cds-text-secondary);
  --text-2:       var(--cds-text-helper);
  --border:       var(--cds-border-subtle-01);
  --border-b:     var(--cds-border-interactive);
  --radius:       0px;            /* Carbon uses 0px radius for most UI */
  --radius-lg:    4px;
  --shadow:       0 2px 6px rgba(0,0,0,0.3);
  --shadow-b:     0 4px 16px rgba(15,98,254,0.25);
  --transition:   0.15s ease;
}

/* ── GLOBAL BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--cds-body-long-02-size);
  font-weight: var(--cds-body-long-02-weight);
  line-height: var(--cds-body-long-02-line);
  background-color: var(--cds-background);
  color: var(--cds-text-primary);
  overflow-x: hidden;
}

a {
  color: var(--cds-link-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

img, svg { display: block; max-width: 100%; }
ul, ol  { list-style: none; }

/* ── CARBON TYPOGRAPHY CLASSES ────────────────────────────────────────── */
.cds--label           { font-size: var(--cds-label-01-size); font-weight: var(--cds-label-01-weight); letter-spacing: var(--cds-label-01-tracking); }
.cds--helper-text     { font-size: var(--cds-helper-text-01-size); color: var(--cds-text-helper); }
.cds--body-short-01   { font-size: var(--cds-body-short-01-size); line-height: var(--cds-body-short-01-line); }
.cds--body-long-01    { font-size: var(--cds-body-long-01-size); line-height: var(--cds-body-long-01-line); }
.cds--body-short-02   { font-size: var(--cds-body-short-02-size); line-height: var(--cds-body-short-02-line); }
.cds--body-long-02    { font-size: var(--cds-body-long-02-size); line-height: var(--cds-body-long-02-line); }
.cds--heading-01      { font-size: var(--cds-heading-01-size); font-weight: var(--cds-heading-01-weight); }
.cds--heading-02      { font-size: var(--cds-heading-02-size); font-weight: var(--cds-heading-02-weight); }
.cds--heading-03      { font-size: var(--cds-heading-03-size); font-weight: var(--cds-heading-03-weight); line-height: var(--cds-heading-03-line); }
.cds--heading-04      { font-size: var(--cds-heading-04-size); font-weight: var(--cds-heading-04-weight); }
.cds--heading-05      { font-size: var(--cds-heading-05-size); font-weight: var(--cds-heading-05-weight); }
.cds--heading-06      { font-size: var(--cds-heading-06-size); font-weight: var(--cds-heading-06-weight); }
.cds--heading-07      { font-size: var(--cds-heading-07-size); font-weight: var(--cds-heading-07-weight); }
.cds--display-01      { font-size: var(--cds-display-01-size); font-weight: var(--cds-display-01-weight); line-height: var(--cds-display-01-line); }
.cds--display-02      { font-size: var(--cds-display-02-size); font-weight: var(--cds-display-02-weight); }

/* Convenience heading aliases */
h1 { font-size: clamp(var(--cds-heading-06-size), 4vw, var(--cds-heading-07-size)); font-weight: var(--cds-heading-06-weight); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(var(--cds-heading-04-size), 3vw, var(--cds-heading-05-size)); font-weight: 400; line-height: 1.2; }
h3 { font-size: var(--cds-heading-03-size); font-weight: var(--cds-heading-03-weight); line-height: var(--cds-heading-03-line); }
h4 { font-size: var(--cds-heading-02-size); font-weight: var(--cds-heading-02-weight); }
h5, h6 { font-size: var(--cds-heading-01-size); font-weight: var(--cds-heading-01-weight); }
p  { color: var(--cds-text-secondary); font-size: var(--cds-body-long-02-size); line-height: var(--cds-body-long-02-line); }

.mono  { font-family: 'IBM Plex Mono', monospace; }
.serif { font-family: 'IBM Plex Serif', Georgia, serif; }

/* Overline / eyebrow label */
.label, .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}
.label-blue, .eyebrow-blue {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ibm-blue-40);
}

/* ── LAYOUT UTILITIES ─────────────────────────────────────────────────── */
.container  { max-width: 1584px; margin: 0 auto; padding: 0 var(--cds-spacing-07); }
.container--sm { max-width: 1056px; margin: 0 auto; padding: 0 var(--cds-spacing-07); }
.section    { padding: var(--cds-spacing-12) 0; }
.section-sm { padding: var(--cds-spacing-10) 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-07); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cds-spacing-06); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cds-spacing-05); }
.flex   { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1  { gap: var(--cds-spacing-03); }
.gap-2  { gap: var(--cds-spacing-05); }
.gap-3  { gap: var(--cds-spacing-06); }
.gap-4  { gap: var(--cds-spacing-07); }
.col    { flex-direction: column; }

/* ── CARBON NAV / MASTHEAD ─────────────────────────────────────────────── */
.c-nav {
  position: sticky; top: 0; z-index: 1000;
  background: #161616;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  height: 48px;
  display: flex; align-items: center;
}
.c-nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.c-nav-brand {
  display: flex; align-items: center; gap: var(--cds-spacing-04);
  font-size: 0.875rem; font-weight: 600;
  color: var(--cds-text-primary);
  text-decoration: none;
}
.c-nav-brand:hover { color: var(--cds-text-primary); text-decoration: none; }
.ibm-logo-svg { fill: #ffffff; }
.c-nav-links { display: flex; align-items: center; gap: 0; }
.c-nav-links a {
  display: flex; align-items: center;
  height: 48px;
  padding: 0 var(--cds-spacing-05);
  font-size: 0.875rem; font-weight: 400;
  color: var(--cds-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.c-nav-links a:hover {
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  text-decoration: none;
}
.c-nav-links a.active {
  color: var(--cds-text-primary);
  border-bottom-color: var(--ibm-blue-60);
}

/* ── CARBON BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding: 0 var(--cds-spacing-07) 0 var(--cds-spacing-05);
  min-width: 10rem; height: 48px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem; font-weight: 400;
  letter-spacing: 0;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
  position: relative;
}
.btn-primary {
  background: var(--cds-button-primary);
  color: #ffffff;
}
.btn-primary:hover { background: var(--cds-button-primary-hover); color: #ffffff; text-decoration: none; }
.btn-secondary {
  background: var(--cds-button-secondary);
  color: var(--cds-text-primary);
  border: 1px solid var(--cds-border-strong-01);
}
.btn-secondary:hover { background: var(--cds-button-secondary-hover); color: var(--cds-text-primary); text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--cds-link-primary);
  padding: 0 var(--cds-spacing-05);
  min-width: auto;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--cds-link-primary-hover); text-decoration: none; }
.btn-sm { height: 32px; font-size: 0.75rem; padding: 0 var(--cds-spacing-05); min-width: auto; gap: var(--cds-spacing-03); }
.btn-danger { background: var(--cds-button-danger); color: #ffffff; }
.btn-danger:hover { background: var(--cds-button-danger-hover); color: #ffffff; text-decoration: none; }

/* ── CARBON TILE / CARD ───────────────────────────────────────────────── */
.tile {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  padding: var(--cds-spacing-07);
  position: relative;
  transition: background var(--transition);
}
.tile--clickable { cursor: pointer; }
.tile--clickable:hover { background: var(--cds-layer-hover-01); }
.tile--selected { border-color: var(--ibm-blue-60); }

/* ── CARBON FORM CONTROLS ─────────────────────────────────────────────── */
.cds-form-group { margin-bottom: var(--cds-spacing-06); }
.cds-label {
  display: block;
  font-size: var(--cds-label-01-size);
  font-weight: var(--cds-label-01-weight);
  letter-spacing: var(--cds-label-01-tracking);
  color: var(--cds-text-secondary);
  margin-bottom: var(--cds-spacing-02);
}
.cds-input, .cds-select, .cds-textarea {
  display: block; width: 100%;
  padding: 0 var(--cds-spacing-05);
  height: 40px;
  background: var(--cds-layer-02);
  border: none;
  border-bottom: 1px solid var(--cds-border-strong-01);
  color: var(--cds-text-primary);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: var(--cds-body-short-01-size);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  -webkit-appearance: none; appearance: none;
}
.cds-input:focus, .cds-select:focus, .cds-textarea:focus {
  background: var(--cds-layer-02);
  border-bottom-color: var(--ibm-blue-60);
  outline: 2px solid var(--ibm-blue-60);
  outline-offset: -2px;
}
.cds-input::placeholder, .cds-textarea::placeholder { color: var(--cds-text-placeholder); }
.cds-textarea { height: auto; min-height: 100px; padding: var(--cds-spacing-04) var(--cds-spacing-05); resize: vertical; }
.cds-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23c6c6c6' d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.cds-select option { background: var(--cds-layer-02); color: var(--cds-text-primary); }

/* ── TAG / BADGE ──────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-02);
  height: 24px;
  padding: 0 var(--cds-spacing-04);
  font-size: 0.75rem; font-weight: 400;
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  border: none;
}
.tag-blue    { background: rgba(15,98,254,0.2); color: var(--ibm-blue-40); }
.tag-cyan    { background: rgba(51,177,255,0.15); color: var(--ibm-cyan-40); }
.tag-green   { background: rgba(66,190,101,0.15); color: var(--ibm-green-40); }
.tag-gold    { background: rgba(241,194,27,0.15); color: var(--ibm-yellow-30); }
.tag-red     { background: rgba(255,131,137,0.15); color: var(--cds-support-error); }
.tag-purple  { background: rgba(165,110,255,0.15); color: var(--ibm-purple-50); }
.tag-teal    { background: rgba(8,189,186,0.15); color: var(--ibm-teal-40); }

/* ── NOTIFICATION / TOAST ─────────────────────────────────────────────── */
.notification {
  display: flex; align-items: flex-start; gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  background: var(--cds-layer-01);
  border-left: 3px solid var(--cds-support-info);
}
.notification--success { border-left-color: var(--cds-support-success); }
.notification--warning { border-left-color: var(--cds-support-warning); }
.notification--error   { border-left-color: var(--cds-support-error); }

/* ── PROGRESS BAR ────────────────────────────────────────────────────── */
.progress-bar-track {
  width: 100%; height: 8px;
  background: var(--cds-layer-02);
}
.progress-bar-fill {
  height: 100%;
  background: var(--ibm-blue-60);
  transition: width 0.4s ease;
}

/* ── DATA TABLE ──────────────────────────────────────────────────────── */
.cds-table { width: 100%; border-collapse: collapse; }
.cds-table thead tr { background: var(--cds-layer-02); border-bottom: 1px solid var(--cds-border-strong-01); }
.cds-table th {
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  font-size: 0.875rem; font-weight: 600;
  color: var(--cds-text-primary);
  text-align: left;
  white-space: nowrap;
}
.cds-table td {
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.cds-table tbody tr:hover td { background: var(--cds-layer-hover-01); }

/* ── SECTION DIVIDER ─────────────────────────────────────────────────── */
.section-rule { border: none; border-top: 1px solid var(--cds-border-subtle-01); margin: 0; }

/* ── SCROLLBAR ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--cds-background); }
::-webkit-scrollbar-thumb { background: var(--cds-border-strong-01); }
::-webkit-scrollbar-thumb:hover { background: var(--cds-border-strong-02); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1056px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 672px) {
  .container { padding: 0 var(--cds-spacing-05); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .c-nav-links a span { display: none; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
}