/* =============================================================
   IBM Carbon Design System — Skin
   Source: skins/ibm/DESIGN.md (getdesign.md/ibm)

   Two layers:
     1. --cds-*  : full Carbon token system (semantic, theme-switchable)
     2. --color-*, --font, --radius*, --shadow-*  : project token
                  overrides so the existing style.css inherits the
                  IBM aesthetic without per-rule edits.

   Load AFTER style.css for the overrides to win.
   ============================================================= */

@custom-variant dark (&:is(.dark *));

:root {
  /* ── Carbon raw color scale ─────────────────────────────── */
  --ibm-white:     #ffffff;
  --ibm-gray-10:   #f4f4f4;
  --ibm-gray-10h:  #e8e8e8;
  --ibm-gray-20:   #e0e0e0;
  --ibm-gray-30:   #c6c6c6;
  --ibm-gray-50:   #8d8d8d;
  --ibm-gray-60:   #6f6f6f;
  --ibm-gray-70:   #525252;
  --ibm-gray-80:   #393939;
  --ibm-gray-90:   #262626;
  --ibm-gray-100:  #161616;

  --ibm-blue-10:   #edf5ff;
  --ibm-blue-40:   #78a9ff;
  --ibm-blue-60:   #0f62fe;
  --ibm-blue-60h:  #0353e9;
  --ibm-blue-70:   #0043ce;
  --ibm-blue-80:   #002d9c;

  --ibm-red-60:    #da1e28;
  --ibm-red-70:    #b81921;
  --ibm-green-50:  #24a148;
  --ibm-yellow-30: #f1c21b;

  /* ── Carbon semantic tokens (--cds-*) ───────────────────── */
  --cds-background:               var(--ibm-white);
  --cds-layer-01:                 var(--ibm-gray-10);
  --cds-layer-02:                 var(--ibm-gray-20);
  --cds-layer-hover-01:           var(--ibm-gray-10h);

  --cds-text-primary:             var(--ibm-gray-100);
  --cds-text-secondary:           var(--ibm-gray-70);
  --cds-text-placeholder:         var(--ibm-gray-60);
  --cds-text-on-color:            var(--ibm-white);
  --cds-text-disabled:            var(--ibm-gray-50);

  --cds-border-subtle:            var(--ibm-gray-30);
  --cds-border-strong:            var(--ibm-gray-100);

  --cds-link-primary:             var(--ibm-blue-60);
  --cds-link-primary-hover:       var(--ibm-blue-70);

  --cds-button-primary:           var(--ibm-blue-60);
  --cds-button-primary-hover:     var(--ibm-blue-60h);
  --cds-button-primary-active:    var(--ibm-blue-80);
  --cds-button-secondary:         var(--ibm-gray-80);
  --cds-button-secondary-hover:   #4c4c4c;
  --cds-button-secondary-active:  var(--ibm-gray-60);
  --cds-button-tertiary:          var(--ibm-blue-60);
  --cds-button-danger:            var(--ibm-red-60);
  --cds-button-danger-hover:      var(--ibm-red-70);

  --cds-field:                    var(--ibm-gray-10);
  --cds-field-hover:              var(--ibm-gray-10h);

  --cds-focus:                    var(--ibm-blue-60);
  --cds-focus-inset:              var(--ibm-white);

  --cds-support-error:            var(--ibm-red-60);
  --cds-support-success:          var(--ibm-green-50);
  --cds-support-warning:          var(--ibm-yellow-30);
  --cds-support-info:             var(--ibm-blue-60);

  /* ── Spacing (Carbon 8px grid) ──────────────────────────── */
  --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 */

  /* ── Type ──────────────────────────────────────────────── */
  --cds-font-sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --cds-font-mono:  'IBM Plex Mono', Menlo, Courier, monospace;
  --cds-font-serif: 'IBM Plex Serif', Georgia, serif;

  /* ─────────────────────────────────────────────────────────
     PROJECT VARIABLE OVERRIDES
     The existing style.css uses these; we remap them to IBM.
     ───────────────────────────────────────────────────────── */
  --color-primary:    var(--ibm-blue-60);
  --color-primary-dk: var(--ibm-blue-70);
  --color-secondary:  var(--ibm-blue-60);     /* Carbon: single accent */
  --color-bg:         var(--ibm-white);
  --color-bg-alt:     var(--ibm-gray-10);
  --color-bg-dark:    var(--ibm-gray-100);
  --color-text:       var(--ibm-gray-100);
  --color-muted:      var(--ibm-gray-70);
  --color-border:     var(--ibm-gray-30);
  --color-success:    var(--ibm-green-50);

  /* Carbon is rectangular — radii collapse to 0
     (pills/avatars use 999px directly where needed) */
  --radius:    0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  /* Carbon is shadow-averse — depth = background layering */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --font: var(--cds-font-sans);
  --transition: 110ms cubic-bezier(0, 0, 0.38, 0.9); /* Carbon productive easing */
}

/* ─────────────────────────────────────────────────────────────
   Global Carbon adjustments
   These re-shape the project's components into IBM Carbon look.
   ───────────────────────────────────────────────────────────── */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
  background: var(--cds-background);
}

/* Type — light weight at display sizes (Carbon expressive) */
h1 { font-weight: 300; letter-spacing: 0; line-height: 1.17; }
h2 { font-weight: 300; letter-spacing: 0; line-height: 1.19; }
h3 { font-weight: 400; letter-spacing: 0; line-height: 1.25; }
h4 { font-weight: 600; letter-spacing: 0; line-height: 1.40; }
h5, h6 { font-weight: 600; letter-spacing: 0; }

/* Productive micro-tracking on small text */
small, .caption, .eyebrow,
.site-header__nav a,
.site-footer small,
.site-footer__col p,
.site-footer__col li,
.faq__list li,
.tabs__list button,
[class*="badge"], [class*="chip"] { letter-spacing: 0.16px; }

/* Links — Carbon: no underline by default, underline on hover */
a {
  color: var(--cds-link-primary);
  text-decoration: none;
}
a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

/* Buttons — sharp rectangles, asymmetric padding, 48px height */
button,
.btn,
[class*="button"],
[class*="-btn"],
.cta,
input[type="submit"],
input[type="button"] {
  border-radius: 0 !important;
  font-family: var(--cds-font-sans);
  letter-spacing: 0.16px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* Primary CTA — IBM Blue */
.btn--primary,
.btn-primary,
.cta--primary,
button[type="submit"] {
  background: var(--cds-button-primary) !important;
  color: var(--cds-text-on-color) !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  min-height: 48px;
  padding: 14px 63px 14px 15px;
  font-weight: 700;
}
.btn--primary:hover,
.btn-primary:hover,
.cta--primary:hover,
button[type="submit"]:hover {
  background: var(--cds-button-primary-hover) !important;
}
.btn--primary:active,
.btn-primary:active,
button[type="submit"]:active {
  background: var(--cds-button-primary-active) !important;
}

/* Secondary CTA — Carbon ghost (blue text + thin blue border) */
.btn--secondary,
.btn-secondary,
.cta--secondary {
  background: transparent !important;
  color: var(--cds-link-primary) !important;
  border: 1px solid var(--cds-link-primary) !important;
  border-radius: 0 !important;
  min-height: 48px;
  padding: 14px 16px;
  font-weight: 700;
}
.btn--secondary:hover,
.btn-secondary:hover,
.cta--secondary:hover {
  background: var(--ibm-blue-10) !important;
  color: var(--cds-link-primary-hover) !important;
}

/* Cards / panels — flat, no radius, no shadow */
.card,
.panel,
[class*="card"],
[class*="-card"],
.tile,
.faq__item,
.review,
.feature {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Inputs — bottom-border only, gray-10 fill */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  background-color: #fff;
  color: var(--cds-text-primary);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  height: 40px;
  padding: 0 16px;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  letter-spacing: 0.16px;
  transition: border-color var(--transition), background-color var(--transition);
}
textarea { height: auto; padding: 12px 16px; min-height: 96px; }

input:hover,
select:hover,
textarea:hover {/* background: var(--cds-field-hover); */}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--cds-focus);
}

input::placeholder,
textarea::placeholder { color: var(--cds-text-placeholder); }

/* Focus ring — Carbon 2px inset blue */
*:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* Header / nav — dark masthead vibe optional via .site-header--dark.
   Default keeps light header but applies Carbon border treatment. */
.site-header {
  background: var(--cds-background) !important;
  border-bottom: 1px solid var(--cds-border-subtle) !important;
  box-shadow: none !important;
}

/* Alternating section bands — depth via background layering */
section:nth-of-type(even),
.section--alt,
.section-alt {
  background: var(--cds-layer-01);
}

/* Tags / pills — sole rounded exception (24px pill) */
.tag, .pill, .badge, .chip {
  background: var(--ibm-blue-10) !important;
  color: var(--cds-link-primary) !important;
  padding: 4px 8px !important;
  border-radius: 24px !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
}

/* Carbon dark theme (Gray 100) — opt-in via .dark or .ibm-dark */
.dark, .ibm-dark {
  --cds-background:        var(--ibm-gray-100);
  --cds-layer-01:          var(--ibm-gray-90);
  --cds-layer-02:          var(--ibm-gray-80);
  --cds-text-primary:      var(--ibm-gray-10);
  --cds-text-secondary:    var(--ibm-gray-30);
  --cds-border-subtle:     var(--ibm-gray-80);
  --cds-link-primary:      var(--ibm-blue-40);
  --cds-field:             var(--ibm-gray-90);

  --color-bg:     var(--ibm-gray-100);
  --color-bg-alt: var(--ibm-gray-90);
  --color-text:   var(--ibm-gray-10);
  --color-muted:  var(--ibm-gray-30);
  --color-border: var(--ibm-gray-80);
  --color-primary: var(--ibm-blue-40);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}