@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex/IBMPlexSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex/IBMPlexSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex/IBMPlexMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Math";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex/IBMPlexMath-Regular.woff2") format("woff2");
}

:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas,
    "Liberation Mono", monospace;
  --font-math: "IBM Plex Math", "IBM Plex Serif", Cambria Math, STIX Two Math,
    "Times New Roman", serif;

  /* Core brand palette: keep these five IBM colorblind-friendly hues intact. */
  --palette-yellow: #ffb000;
  --palette-orange: #fe6100;
  --palette-magenta: #dc267f;
  --palette-purple: #785ef0;
  --palette-blue: #648fff;

  /* IBM-inspired neutral support system for UI structure, contrast, and states. */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-neutral-100: #161616;
  --color-neutral-90: #262626;
  --color-neutral-80: #393939;
  --color-neutral-70: #525252;
  --color-neutral-60: #6f6f6f;
  --color-neutral-50: #8d8d8d;
  --color-neutral-40: #a8a8a8;
  --color-neutral-30: #c6c6c6;
  --color-neutral-20: #e0e0e0;
  --color-neutral-10: #f4f4f4;
  --color-warm-neutral-100: #171414;
  --color-warm-neutral-90: #272525;
  --color-warm-neutral-80: #3c3838;
  --color-warm-neutral-70: #565151;
  --color-warm-neutral-60: #726e6e;
  --color-warm-neutral-50: #8f8b8b;
  --color-warm-neutral-40: #ada8a8;
  --color-warm-neutral-30: #cac5c4;
  --color-warm-neutral-20: #e5e0df;
  --color-warm-neutral-10: #f7f3f2;

  --color-background: #f8eadb;
  --color-surface: #fffaf3;
  --color-surface-raised: #fcf2e6;
  --color-surface-muted: #efe0ce;
  --color-shade: #f3e6d5;
  --color-border: var(--color-warm-neutral-30);
  --color-border-strong: var(--color-warm-neutral-50);

  --color-ink: #23272f;
  --color-ink-soft: #343a46;
  --color-band-background: linear-gradient(180deg, var(--color-neutral-90), var(--color-neutral-100));
  --color-band-text: rgba(255, 255, 255, 0.96);
  --color-band-muted: rgba(244, 244, 244, 0.78);
  --color-band-subtle: rgba(224, 224, 224, 0.64);
  --color-band-border: rgba(255, 255, 255, 0.12);
  --color-yellow: var(--palette-yellow);
  --color-yellow-soft: #fff8db;
  --color-orange: var(--palette-orange);
  --color-orange-text: #b54800;
  --color-orange-soft: #fff0e6;
  --color-magenta: var(--palette-magenta);
  --color-magenta-text: #b51c67;
  --color-magenta-soft: #fff0f7;
  --color-purple: var(--palette-purple);
  --color-purple-text: #624dc4;
  --color-purple-soft: #f6f2ff;
  --color-blue: var(--palette-blue);
  --color-blue-text: #0043ce;
  --color-blue-soft: #edf5ff;
  --color-action-blue: #0043ce;
  --color-action-blue-hover: #001d6c;
  --color-action-text: var(--color-white);
  --color-action-text-inverse: var(--color-ink);
  --color-alert-error: #da1e28;
  --color-alert-error-text: #750e13;
  --color-alert-error-soft: #fff1f1;
  --color-alert-error-border: #ffb3b8;
  --color-alert-success: #24a148;
  --color-alert-success-text: #0e6027;
  --color-alert-success-soft: #defbe6;
  --color-alert-success-border: #6fdc8c;
  --color-alert-caution: #ff832b;
  --color-alert-caution-text: #8a3800;
  --color-alert-caution-soft: #fff0e1;
  --color-alert-caution-border: #ffb784;
  --color-alert-warning: #f1c21b;
  --color-alert-warning-text: #684e00;
  --color-alert-warning-soft: #fcf4d6;
  --color-alert-warning-border: #fddc69;
  --color-card-warm-border: var(--color-alert-warning-border);
  --color-card-hover-border: rgba(241, 194, 27, 0.42);
  --color-text: var(--color-ink);
  --color-muted: var(--color-neutral-70);
  --color-subtle: var(--color-neutral-60);
  --color-link: var(--color-action-blue);
  --color-link-hover: var(--color-action-blue-hover);
  --color-focus: var(--color-purple);

  --color-grid-line: rgba(22, 22, 22, 0.052);
  --color-orbit-line: rgba(120, 94, 240, 0.2);

  /* Product/web 2x rhythm: an 8px mini-unit with a 24px brand macro-cell. */
  --unit-2x: 8px;
  --grid-cell: calc(var(--unit-2x) * 3);
  --grid-cell-lg: calc(var(--grid-cell) * 2);
  --grid-cell-xl: calc(var(--grid-cell) * 4);
  --grid-cell-xxl: calc(var(--grid-cell) * 6);
  --diagram-node-height: calc(var(--unit-2x) * 6);
  --diagram-node-radius: var(--unit-2x);
  --diagram-node-padding-block: var(--unit-2x);
  --diagram-node-padding-inline: calc(var(--unit-2x) * 2);
  --diagram-node-label-size: 0.875rem;
  --diagram-node-label-leading: 1.285714;
  --diagram-indicator-size: var(--unit-2x);
  --chart-grid-line: rgba(35, 39, 47, 0.12);
  --chart-muted-line: rgba(35, 39, 47, 0.18);
  --chart-emphasis-line: rgba(120, 94, 240, 0.54);
  --chart-emphasis-fill: rgba(120, 94, 240, 0.16);
  --brand-plane-rotate-left: -12deg;
  --brand-plane-rotate-right: 12deg;
  --brand-plane-rotate-deep-left: -18deg;
  --brand-plane-rotate-deep-right: 18deg;

  /* Brand motif opacity bands. */
  --brand-plane-opacity-ambient: 0.26;
  --brand-plane-opacity-ambient-dark: 0.3;
  --brand-plane-opacity-section: 0.34;
  --brand-plane-opacity-dark-section: 0.25;
  --brand-plane-opacity-feature: 0.56;
  --brand-plane-opacity-foreground: 0.82;

  /* Warm paper background recipes: cream first, amber trace, purple identity underneath. */
  --background-warm-top-left:
    radial-gradient(circle at 8% 0%, rgba(255, 238, 217, 0.92), transparent 26rem),
    radial-gradient(circle at 12% 2%, rgba(255, 176, 0, 0.072), transparent 24rem),
    radial-gradient(circle at 17% 6%, rgba(254, 97, 0, 0.042), transparent 30rem),
    radial-gradient(circle at 14% 4%, rgba(120, 94, 240, 0.058), transparent 34rem);
  --background-warm-bottom-right:
    radial-gradient(circle at 92% 100%, rgba(255, 238, 217, 0.9), transparent 26rem),
    radial-gradient(circle at 88% 98%, rgba(255, 176, 0, 0.068), transparent 24rem),
    radial-gradient(circle at 83% 94%, rgba(254, 97, 0, 0.04), transparent 30rem),
    radial-gradient(circle at 86% 96%, rgba(120, 94, 240, 0.056), transparent 34rem);

  /* Elevation aliases keep card depth consistent across the site. */
  --elevation-header: 0 10px 30px rgba(35, 39, 47, 0.035);
  --elevation-soft: 0 10px 30px rgba(35, 39, 47, 0.05);
  --elevation-node: 0 12px 24px rgba(35, 39, 47, 0.08);
  --elevation-card: 0 18px 45px rgba(35, 39, 47, 0.085);
  --elevation-card-strong: 0 24px 70px rgba(35, 39, 47, 0.14);
  --elevation-button: 0 14px 28px rgba(35, 39, 47, 0.18);
  --elevation-button-hover: 0 16px 32px rgba(35, 39, 47, 0.16);
  --elevation-secondary-hover: 0 14px 28px rgba(35, 39, 47, 0.08);
  --elevation-dark-button: 0 16px 34px rgba(0, 0, 0, 0.22);
  --elevation-dark-button-hover: 0 20px 42px rgba(0, 0, 0, 0.26);
  --elevation-dark-card: 0 18px 38px rgba(0, 0, 0, 0.12);

  --gradient-primary: linear-gradient(135deg, var(--color-action-blue), var(--palette-purple));
  --gradient-primary-hover: linear-gradient(135deg, var(--color-action-blue-hover), var(--palette-blue));
  --gradient-nav-accent: linear-gradient(90deg, rgba(120, 94, 240, 0.58), rgba(100, 143, 255, 0.66));
  --gradient-plane-corners:
    radial-gradient(circle at 0% 0%, rgba(100, 143, 255, 0.95), transparent 58%),
    radial-gradient(circle at 100% 0%, rgba(120, 94, 240, 0.94), transparent 58%),
    radial-gradient(circle at 0% 100%, rgba(254, 97, 0, 0.92), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255, 176, 0, 0.95), transparent 60%),
    linear-gradient(135deg, var(--palette-blue), var(--palette-purple) 32%, var(--palette-orange) 72%, var(--palette-yellow));
  --gradient-plane-subtle:
    radial-gradient(circle at 0% 0%, rgba(100, 143, 255, 0.28), transparent 58%),
    radial-gradient(circle at 100% 0%, rgba(120, 94, 240, 0.24), transparent 58%),
    radial-gradient(circle at 0% 100%, rgba(254, 97, 0, 0.2), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255, 176, 0, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(100, 143, 255, 0.1), rgba(120, 94, 240, 0.08) 38%, rgba(254, 97, 0, 0.08) 72%, rgba(255, 176, 0, 0.1));
  --gradient-plane-ambient:
    radial-gradient(circle at 0% 0%, rgba(100, 143, 255, 0.14), transparent 54%),
    radial-gradient(circle at 100% 0%, rgba(120, 94, 240, 0.12), transparent 52%),
    radial-gradient(circle at 0% 100%, rgba(254, 97, 0, 0.1), transparent 56%),
    radial-gradient(circle at 100% 100%, rgba(255, 176, 0, 0.12), transparent 54%),
    linear-gradient(180deg, rgba(255, 250, 243, 0.94), rgba(255, 246, 235, 0.62));
  --brand-plane-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M17 10 C29 13 40 9 52 8 C47 22 47 42 52 56 C40 54 29 50 17 54 C22 42 22 22 17 10 Z'/%3E%3C/svg%3E");

  --shadow-card: var(--elevation-card);
  --shadow-card-strong: var(--elevation-card-strong);
  --shadow-button: var(--elevation-button);
  --transition-fast: 160ms ease;
  --transition-medium: 260ms ease;
  --radius-card: 24px;
  --radius-card-small: 18px;
  --radius-pill: 999px;

  --max-width-page: 1120px;
  --max-width-copy: 68ch;
  --max-width-measure: 58ch;

  --space-page-inline: clamp(calc(var(--unit-2x) * 2), 5vw, calc(var(--unit-2x) * 4));
  --space-page-block: clamp(calc(var(--unit-2x) * 7), 9vw, calc(var(--unit-2x) * 14));
  --space-page-start: clamp(calc(var(--grid-cell) * 2), calc(9vw - var(--grid-cell)), calc(var(--grid-cell) * 4));
  --space-section: clamp(calc(var(--unit-2x) * 5), 6vw, calc(var(--unit-2x) * 10));
  --space-card: clamp(calc(var(--unit-2x) * 2), 4vw, calc(var(--unit-2x) * 4));
  --space-gap: clamp(calc(var(--unit-2x) * 2), 3vw, calc(var(--unit-2x) * 3));

  /* IBM Plex default type-scale stops, expressed as fluid site tokens. */
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.02rem + 0.52vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3: clamp(2rem, 1.72rem + 1.4vw, 3rem);
  --step-4: clamp(2.625rem, 1.9rem + 3.62vw, 5.25rem);

  --leading-body: 1.5;
  --leading-tight: 1.25;
  --leading-heading: 1.17;
  --leading-display: 1.12;
}