/* D4 Networks design tokens. Fonts self-hosted (IBM Plex, OFL). */

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

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

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

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

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

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

/* D4 Networks — Color tokens. IBM Carbon palette.
   One chromatic accent: IBM Blue. Charcoal + grays carry everything else. */

:root {
  /* ---- Carbon base palette ---- */
  --d4-blue-50: #4589ff;
  --d4-blue-60: #0f62fe;   /* primary */
  --d4-blue-70: #0043ce;   /* hover */
  --d4-blue-80: #002d9c;   /* pressed */

  --d4-gray-10: #f4f4f4;
  --d4-gray-20: #e0e0e0;
  --d4-gray-30: #c6c6c6;
  --d4-gray-50: #8c8c8c;
  --d4-gray-60: #6f6f6f;
  --d4-gray-70: #525252;
  --d4-gray-90: #262626;
  --d4-gray-100: #161616;
  --d4-white: #ffffff;

  --d4-green-50: #24a148;
  --d4-yellow-30: #f1c21b;
  --d4-red-60: #da1e28;

  /* ---- Brand & accent ---- */
  --colors-primary: var(--d4-blue-60);
  --colors-on-primary: #ffffff;
  --colors-blue-60: var(--d4-blue-60);
  --colors-blue-80: var(--d4-blue-80);
  --colors-blue-hover: var(--d4-blue-70);

  /* ---- Surface ---- */
  --colors-canvas: var(--d4-white);
  --colors-surface-1: var(--d4-gray-10);
  --colors-surface-2: var(--d4-gray-20);
  --colors-hairline: var(--d4-gray-20);
  --colors-hairline-strong: var(--d4-gray-100);
  --colors-inverse-canvas: var(--d4-gray-100);
  --colors-inverse-surface-1: var(--d4-gray-90);

  /* ---- Text ---- */
  --colors-ink: var(--d4-gray-100);
  --colors-ink-muted: var(--d4-gray-70);
  --colors-ink-subtle: var(--d4-gray-50);
  --colors-inverse-ink: #ffffff;
  --colors-inverse-ink-muted: var(--d4-gray-30);

  /* ---- Semantic ---- */
  --colors-semantic-success: var(--d4-green-50);
  --colors-semantic-warning: var(--d4-yellow-30);
  --colors-semantic-error: var(--d4-red-60);
  --colors-semantic-info: var(--d4-blue-60);

  /* ---- Focus ---- */
  --colors-focus: var(--d4-blue-60);
}

/* D4 Networks — Typography tokens. IBM Plex Sans across the whole hierarchy.
   Light-weight (300) display is the brand voice; body carries letter-spacing 0.16px. */

:root {
  --font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ---- Display (weight 300) ---- */
  --type-display-xl-size: 76px;
  --type-display-xl-weight: 300;
  --type-display-xl-line: 1.17;
  --type-display-xl-spacing: -0.5px;

  --type-display-lg-size: 60px;
  --type-display-lg-weight: 300;
  --type-display-lg-line: 1.17;
  --type-display-lg-spacing: -0.4px;

  --type-display-md-size: 42px;
  --type-display-md-weight: 300;
  --type-display-md-line: 1.20;
  --type-display-md-spacing: 0px;

  /* ---- Headings & titles (weight 400) ---- */
  --type-headline-size: 32px;
  --type-headline-weight: 400;
  --type-headline-line: 1.25;
  --type-headline-spacing: 0px;

  --type-card-title-size: 24px;
  --type-card-title-weight: 400;
  --type-card-title-line: 1.33;
  --type-card-title-spacing: 0px;

  --type-subhead-size: 20px;
  --type-subhead-weight: 400;
  --type-subhead-line: 1.40;
  --type-subhead-spacing: 0px;

  /* ---- Body ---- */
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-line: 1.50;
  --type-body-lg-spacing: 0px;

  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-line: 1.50;
  --type-body-spacing: 0.16px;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-line: 1.29;
  --type-body-sm-spacing: 0.16px;

  --type-body-emphasis-size: 14px;
  --type-body-emphasis-weight: 600;
  --type-body-emphasis-line: 1.29;
  --type-body-emphasis-spacing: 0.16px;

  /* ---- Caption / utility ---- */
  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-line: 1.33;
  --type-caption-spacing: 0.32px;

  --type-button-size: 14px;
  --type-button-weight: 400;
  --type-button-line: 1.29;
  --type-button-spacing: 0.16px;

  --type-eyebrow-size: 14px;
  --type-eyebrow-weight: 400;
  --type-eyebrow-line: 1.29;
  --type-eyebrow-spacing: 0.16px;
}

/* D4 Networks — Spacing, radius & elevation tokens. Carbon's 4px grid. */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* ---- Border radius (brand commits to 0px) ---- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--colors-hairline);
  --border-width: 1px;

  /* ---- Layout ---- */
  --container-max: 1584px;
  --nav-height: 48px;
  --utility-height: 32px;
  --tap-min: 48px;

  /* ---- Elevation (marketing = flat; product surfaces may use shadow) ---- */
  --elevation-0: none;
  --elevation-1: none; /* hairline border carries depth, not shadow */
  --elevation-2: 0 2px 6px rgba(0,0,0,0.10);
  --elevation-3: 0 4px 12px rgba(0,0,0,0.16);

  /* ---- Soft blue hero wash (the one documented gradient) ---- */
  --hero-wash: linear-gradient(180deg, #edf5ff 0%, #ffffff 70%); /* @kind other */
}