/* Filtar branding for the Harbor portal (v2.16, Clarity).
 *
 * Clarity custom properties only (--cds-*, plus one --clr-* font), no component selectors. Values come
 * from the filtar-design-system skill (colors_and_type.css); the token name is
 * in each comment. Light values sit on :root; dark ones on body[cds-theme~=dark],
 * one step more specific than Harbor's own [cds-theme~=dark] in dark-theme.css,
 * which is loaded after this file.
 *
 * Fonts: IBM Plex Sans 1.1.0 and IBM Plex Mono 2.5.0 (github.com/IBM/plex,
 * OFL-1.1, fonts/OFL.txt), served from the portal next to this file. */

@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 Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

:root {
  /* --font-sans, --font-mono */
  --cds-alias-typography-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cds-alias-typography-header-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cds-alias-typography-monospace-font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Harbor 2.16 takes body and heading fonts from this Clarity property, not a --cds-* one. */
  --clr-metropolis-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Surfaces */
  --cds-alias-object-app-background: #F8FAFC;        /* --bg (gray-50) */
  --cds-alias-object-container-background: #FFFFFF;  /* --bg-elevated */
  --cds-alias-object-border-color: #E2E8F0;          /* --border (gray-200) */
  --cds-alias-object-container-border-color: #E2E8F0; /* --border (gray-200) */

  /* Text */
  --cds-alias-typography-color-500: #0F172A;         /* gray-900 */
  --cds-alias-typography-color-450: #1E293B;         /* --fg (gray-800) */
  --cds-alias-typography-color-400: #334155;         /* gray-700 */
  --cds-alias-typography-color-300: #475569;         /* gray-600 */
  --cds-alias-typography-color-200: #64748B;         /* --fg-muted (gray-500) */

  /* The one accent: brand blue (--accent) for primary actions and links */
  --cds-alias-status-info: #1998E0;                  /* --accent (blue-700) */
  --cds-alias-status-info-shade: #0069CC;            /* --accent-hover (blue-800) */
  --cds-alias-status-info-tint: #E5F4FD;             /* blue-100 */
  --cds-alias-object-interaction-info-hover: #0069CC; /* --accent-hover (blue-800) */
  --cds-alias-object-interaction-info-click: #00447F; /* blue-900 */
  --cds-alias-object-interaction-info-active: #00447F; /* blue-900 */
  --cds-alias-object-interaction-info-selected: #00447F; /* blue-900 */
  --cds-alias-object-interaction-background-highlight: #1998E0; /* --accent (blue-700) */
  --cds-alias-object-interaction-background-selected: #E5F4FD;  /* blue-100 */
  --cds-alias-typography-link-color: #0069CC;        /* blue-800 */
  --cds-alias-typography-link-color-hover: #00447F;  /* blue-900 */
  --cds-alias-typography-link-color-visited: #0069CC; /* blue-800: no violet */
  --cds-alias-typography-link-color-visited-hover: #00447F; /* blue-900 */
}

body[cds-theme~=dark] {
  /* Surfaces: --dark-bg, --dark-bg-elevated, --dark-border */
  --cds-alias-object-app-background: #0A1628;        /* navy-900 */
  --cds-alias-object-container-background: #0F1E3D;  /* navy-800 */
  --cds-alias-object-overlay-background: #0F1E3D;    /* navy-800 */
  --cds-alias-object-border-color: #1A2B4A;          /* navy-700 */
  --cds-alias-object-container-border-color: #1A2B4A; /* navy-700 */

  /* Text: --dark-fg, --dark-fg-muted */
  --cds-alias-typography-color-500: #F8FAFC;         /* gray-50 */
  --cds-alias-typography-color-450: #F1F5F9;         /* gray-100 */
  --cds-alias-typography-color-400: #E2E8F0;         /* gray-200 */
  --cds-alias-typography-color-300: #CBD5E1;         /* gray-300 */
  --cds-alias-typography-color-200: #94A3B8;         /* gray-400 */

  /* Accent on navy */
  --cds-alias-status-info: #1998E0;                  /* --accent (blue-700) */
  --cds-alias-status-info-shade: #2FA9E8;            /* blue-600 */
  --cds-alias-status-info-tint: #00447F;             /* blue-900 */
  --cds-alias-object-interaction-info-hover: #2FA9E8; /* blue-600 */
  --cds-alias-object-interaction-info-click: #4AB7ED; /* blue-500 */
  --cds-alias-object-interaction-info-active: #4AB7ED; /* blue-500 */
  --cds-alias-object-interaction-info-selected: #4AB7ED; /* blue-500 */
  --cds-alias-object-interaction-background-highlight: #1998E0; /* --accent (blue-700) */
  --cds-alias-object-interaction-background-selected: #00447F;  /* blue-900 */
  --cds-alias-typography-link-color: #84D1F4;        /* blue-400 */
  --cds-alias-typography-link-color-hover: #B8E6FA;  /* blue-300 */
  --cds-alias-typography-link-color-visited: #84D1F4; /* blue-400 */
  --cds-alias-typography-link-color-visited-hover: #B8E6FA; /* blue-300 */
}