/* ===========================================================================
   Optmyzr Design System — colors_and_type.css
   ---------------------------------------------------------------------------
   The single CSS file to import in any HTML artifact made with ODS.
   Pulls together: tokens (light + dark + brand + legacy themes), font imports,
   semantic typography classes (.h1 .h2 .body etc), and a small reset.
   Token values are mirrored from ODS/tokens/tokens.css (truth source).
   =========================================================================== */

/* ── Webfonts ─────────────────────────────────────────────────────────────── */
/* Roboto — brand sans (loaded locally from /fonts). Three families:
   Roboto (default), Roboto Condensed, Roboto SemiCondensed.
   Each weight + italic variant is registered so font-weight / font-style pick
   the correct face. Mono numerics keep JetBrains Mono via Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* Roboto (default width) ----------------------------------------------------*/
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Roboto-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Roboto-ThinItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Roboto-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Roboto-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Roboto-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Roboto-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Roboto-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Roboto-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Roboto-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Roboto-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Roboto-BlackItalic.ttf") format("truetype");
}

/* Roboto Condensed ----------------------------------------------------------*/
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-ThinItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Roboto_Condensed-BlackItalic.ttf") format("truetype");
}

/* Roboto SemiCondensed ------------------------------------------------------*/
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-ThinItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto SemiCondensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Roboto_SemiCondensed-BlackItalic.ttf") format("truetype");
}

/* ====================================================================
   TOKENS — Legacy is the ONLY theme.
   Brand tokens (purple-blue), neutrals, semantics, charts — all defined
   here on :root. The teal "brand" theme has been removed; the system is
   single-theme to match how the live product is configured.
   ==================================================================== */
:root {
  /* ── Brand / Interactive (purple-blue) ────────────────────────────── */
  --ods-color-text-brand-primary: #6682fb;
  --ods-color-text-brand-vibrant: #526ee7;
  --ods-color-text-brand-hover: #526ee7;
  --ods-color-text-brand-clicked: #4560d0;

  --ods-color-surface-brand-action: #6682fb;
  --ods-color-surface-brand-action-hover: #526ee7;
  --ods-color-surface-brand-action-clicked: #4560d0;
  --ods-color-surface-brand-secondary: #e2e8ff;
  --ods-color-surface-brand-tertiary: #e2e8ff;
  --ods-color-surface-brand-disabled: #c3cffe;

  --ods-color-icon-brand-primary: #6682fb;
  --ods-color-icon-brand-hover: #526ee7;
  --ods-color-icon-brand-clicked: #4560d0;
  --ods-color-border-brand-primary: #6682fb;

  --ods-color-interactive-primary-default: #6682fb;
  --ods-color-interactive-primary-hover: #526ee7;
  --ods-color-interactive-primary-subtle: #e2e8ff;
  --ods-color-interactive-destructive: #fb4e4e;
  --ods-color-interactive-destructive-subtle: #ffebec;

  /* Optmyzr orange — accent highlight */
  --ods-color-brand-orange: #ff8735;

  /* ── Surface ──────────────────────────────────────────────────────── */
  --ods-color-surface-page: #e8ebee;
  --ods-color-surface-default: #ffffff;
  --ods-color-surface-raised: #ffffff;
  --ods-color-surface-sunken: #f5f5f5;
  --ods-color-surface-hover: #f9fafb;
  --ods-color-surface-selected: #e2e8ff;
  --ods-color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* ── Text ─────────────────────────────────────────────────────────── */
  --ods-color-text-primary: #2d3a48;
  --ods-color-text-secondary: #728192;
  --ods-color-text-tertiary: #b3c0cf;
  --ods-color-text-on-primary: #ffffff;
  --ods-color-text-inverted: #ffffff;

  /* ── Border ───────────────────────────────────────────────────────── */
  --ods-color-border-default: #cfd9e2;
  --ods-color-border-strong: #728192;
  --ods-color-border-focus: #6682fb;

  /* ── Badges (legacy palette) ──────────────────────────────────────── */
  --ods-color-surface-badge-default-bg: #e2e8ff;
  --ods-color-surface-badge-default-text: #526ee7;
  --ods-color-surface-badge-error-bg: rgba(251, 78, 78, 0.15);
  --ods-color-surface-badge-error-text: #fb4e4e;
  --ods-color-surface-badge-neutral-bg: #e8ebee;
  --ods-color-surface-badge-neutral-text: #728192;

  /* ── Feedback / Semantic ──────────────────────────────────────────── */
  --ods-color-feedback-success: #47be8a;
  --ods-color-feedback-success-surface: #f0fdf4;
  --ods-color-feedback-warning: #f6a609;
  --ods-color-feedback-warning-surface: #fffbeb;
  --ods-color-feedback-error: #fb4e4e;
  --ods-color-feedback-error-surface: #ffebec;

  --ods-color-data-positive: #47be8a;
  --ods-color-data-negative: #fb4e4e;
  --ods-color-data-neutral: #728192;
  --ods-color-data-warning: #f6a609;

  /* ── Chart palette (16-color, contrast-ordered) ───────────────────── */
  --ods-color-data-chart-1: #ff6bad;
  --ods-color-data-chart-2: #fbb354;
  --ods-color-data-chart-3: #82befc;
  --ods-color-data-chart-4: #e993ff;
  --ods-color-data-chart-5: #e97b3b;
  --ods-color-data-chart-6: #3358da;
  --ods-color-data-chart-7: #079d90;
  --ods-color-data-chart-8: #a74f29;
  --ods-color-data-chart-9: #b7266e;
  --ods-color-data-chart-10: #00a2ff;
  --ods-color-data-chart-11: #b42afa;
  --ods-color-data-chart-12: #3ed292;
  --ods-color-data-chart-13: #fd625e;
  --ods-color-data-chart-14: #da3587;
  --ods-color-data-chart-15: #f5eb52;
  --ods-color-data-chart-16: #8670ff;

  /* ── Grey scale ───────────────────────────────────────────────────── */
  --ods-color-grey-0: #ffffff;
  --ods-color-grey-50: #f6f7fa;
  --ods-color-grey-100: #f3f5f8;
  --ods-color-grey-200: #e2e4eb;
  --ods-color-grey-300: #cacfd8;
  --ods-color-grey-400: #9aa0ae;
  --ods-color-grey-500: #717784;
  --ods-color-grey-600: #525866;
  --ods-color-grey-700: #2b303b;
  --ods-color-grey-800: #232530;
  --ods-color-grey-900: #191b25;
  --ods-color-grey-950: #0f1215;

  /* Status palettes (selected scale stops; full palette in ODS/tokens) */
  --ods-color-green-100: #ecfdf3;
  --ods-color-green-500: #12b76a;
  --ods-color-green-700: #027a48;
  --ods-color-yellow-100: #fff1b8;
  --ods-color-yellow-500: #faad14;
  --ods-color-yellow-700: #ad6800;
  --ods-color-red-100: #ffd5d8;
  --ods-color-red-500: #fb3748;
  --ods-color-red-700: #d02633;
  --ods-color-blue-100: #d6e2ff;
  --ods-color-blue-500: #335cff;
  --ods-color-blue-700: #2547d0;

  /* ── Typography ───────────────────────────────────────────────────── */
  --ods-typography-family-sans: "Roboto", system-ui, -apple-system, sans-serif;
  --ods-typography-family-mono: "JetBrains Mono", "Courier New", monospace;
  --ods-typography-family-display: "Roboto", system-ui, sans-serif;

  --ods-typography-size-2xs: 8px;
  --ods-typography-size-xs: 11px;
  --ods-typography-size-sm: 12px;
  --ods-typography-size-body: 13px; /* base */
  --ods-typography-size-base: 13px;
  --ods-typography-size-md: 15px;
  --ods-typography-size-lg: 16px;
  --ods-typography-size-heading-md: 18px;
  --ods-typography-size-xl: 20px;
  --ods-typography-size-2xl: 24px;
  --ods-typography-size-display-md: 28px;
  --ods-typography-size-3xl: 32px;

  --ods-typography-weight-regular: 400;
  --ods-typography-weight-medium: 500;
  --ods-typography-weight-semibold: 600;
  --ods-typography-weight-bold: 700;

  /* Semantic scales (Figma-aligned brand) */
  --ods-typography-display-lg-size: 32px;
  --ods-typography-display-lg-line: 40px;
  --ods-typography-display-lg-weight: 700;
  --ods-typography-display-lg-track: 0.4px;

  --ods-typography-display-md-size: 28px;
  --ods-typography-display-md-line: 34px;
  --ods-typography-display-md-weight: 700;
  --ods-typography-display-md-track: 0.2px;

  --ods-typography-display-sm-size: 24px;
  --ods-typography-display-sm-line: 28px;
  --ods-typography-display-sm-weight: 700;
  --ods-typography-display-sm-track: 0.2px;

  --ods-typography-heading-lg-size: 20px;
  --ods-typography-heading-lg-line: 28px;
  --ods-typography-heading-lg-weight: 600;

  --ods-typography-heading-md-size: 18px;
  --ods-typography-heading-md-line: 24px;
  --ods-typography-heading-md-weight: 600;

  --ods-typography-heading-sm-size: 16px;
  --ods-typography-heading-sm-line: 22px;
  --ods-typography-heading-sm-weight: 600;

  --ods-typography-body-regular-size: 13px;
  --ods-typography-body-regular-line: 18px;
  --ods-typography-body-regular-weight: 400;

  --ods-typography-body-medium-size: 13px;
  --ods-typography-body-medium-line: 18px;
  --ods-typography-body-medium-weight: 500;

  --ods-typography-body-sm-size: 12px;
  --ods-typography-body-sm-line: 16px;
  --ods-typography-body-sm-weight: 400;

  --ods-typography-caption-medium-size: 11px;
  --ods-typography-caption-medium-line: 14px;
  --ods-typography-caption-medium-weight: 500;

  --ods-typography-label-uppercase-size: 11px;
  --ods-typography-label-uppercase-line: 14px;
  --ods-typography-label-uppercase-weight: 500;
  --ods-typography-label-uppercase-track: 0.6px;

  /* ── Spacing ──────────────────────────────────────────────────────── */
  --ods-space-component-xs: 4px;
  --ods-space-component-sm: 8px;
  --ods-space-component-md: 12px;
  --ods-space-component-lg: 16px;
  --ods-space-component-xl: 24px;
  --ods-space-component-2xl: 32px;
  --ods-space-layout-sm: 16px;
  --ods-space-layout-md: 24px;
  --ods-space-layout-lg: 32px;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --ods-radius-none: 0px;
  --ods-radius-xxs: 2px;
  --ods-radius-xs: 4px; /* standard */
  --ods-radius-sm: 8px;
  --ods-radius-md: 12px;
  --ods-radius-lg: 20px; /* pill badges */
  --ods-radius-xl: 100px;
  --ods-radius-full: 9999px;

  /* ── Stroke (border width) ────────────────────────────────────────── */
  --ods-stroke-xs: 0.5px;
  --ods-stroke-sm: 1px;
  --ods-stroke-md: 1.5px;
  --ods-stroke-lg: 2px;

  /* ── Shadows (flat-design — overlays only) ────────────────────────── */
  --ods-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ods-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --ods-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ods-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ods-shadow-popover: 0 6px 12px 0 rgba(45, 58, 72, 0.12);
  --ods-shadow-row: 0 2px 2px 0 rgba(45, 58, 72, 0.08);
  --ods-shadow-tile: 0 1px 1px rgba(45, 58, 72, 0.2);

  /* ── Heights (interactive) ────────────────────────────────────────── */
  --ods-height-interactive-default: 36px;
  --ods-height-table-row: 64px;
  --ods-height-list-item: 34px;
  --ods-height-chip: 24px;
}

/* ====================================================================
   DARK MODE — flips surfaces + text
   ==================================================================== */
[data-theme="dark"],
.dark {
  --ods-color-surface-page: #0f1215;
  --ods-color-surface-default: #191b25;
  --ods-color-surface-raised: #232530;
  --ods-color-surface-sunken: #0f1215;
  --ods-color-surface-hover: #232530;
  --ods-color-surface-selected: #0d1f3c;
  --ods-color-surface-overlay: rgba(0, 0, 0, 0.65);

  --ods-color-text-primary: #f6f7fa;
  --ods-color-text-secondary: #cacfd8;
  --ods-color-text-tertiary: #717784;
  --ods-color-text-inverted: #232530;

  --ods-color-border-default: #525866;
  --ods-color-border-strong: #717784;

  /* Brand purple-blue stays the same in dark mode (high enough contrast on dark surfaces) */
}

/* ====================================================================
   TYPOGRAPHY — semantic helper classes
   Use these as a quick-start; production uses the tokens directly.
   ==================================================================== */
html {
  font-family: var(--ods-typography-family-sans);
  font-size: var(--ods-typography-size-base);
  color: var(--ods-color-text-primary);
  background: var(--ods-color-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--ods-typography-body-regular-size);
  line-height: var(--ods-typography-body-regular-line);
  font-weight: var(--ods-typography-body-regular-weight);
}

/* Display — page titles & marquee */
.ods-display-lg,
h1.ods,
h1 {
  font-size: var(--ods-typography-display-lg-size);
  line-height: var(--ods-typography-display-lg-line);
  font-weight: 500; /* Legacy uses 500 for h-tags; brand can use 700 */
  letter-spacing: 0;
  margin: 0;
}
.ods-display-md,
h2.ods,
h2 {
  font-size: var(--ods-typography-display-md-size);
  line-height: var(--ods-typography-display-md-line);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}
.ods-display-sm,
h3.ods,
h3 {
  font-size: var(--ods-typography-display-sm-size);
  line-height: var(--ods-typography-display-sm-line);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}

/* Heading — section + card titles */
.ods-heading-lg,
h4.ods,
h4 {
  font-size: var(--ods-typography-heading-lg-size);
  line-height: var(--ods-typography-heading-lg-line);
  font-weight: 500;
  margin: 0;
}
.ods-heading-md,
h5.ods,
h5 {
  font-size: var(--ods-typography-heading-md-size);
  line-height: var(--ods-typography-heading-md-line);
  font-weight: 500;
  margin: 0;
}
.ods-heading-sm,
h6.ods,
h6 {
  font-size: var(--ods-typography-heading-sm-size);
  line-height: var(--ods-typography-heading-sm-line);
  font-weight: 500;
  margin: 0;
}

/* Body */
.ods-body,
p.ods,
p {
  font-size: var(--ods-typography-body-regular-size);
  line-height: var(--ods-typography-body-regular-line);
  font-weight: 400;
  margin: 0;
}
.ods-body-medium {
  font-size: var(--ods-typography-body-medium-size);
  line-height: var(--ods-typography-body-medium-line);
  font-weight: 500;
}
.ods-body-sm {
  font-size: var(--ods-typography-body-sm-size);
  line-height: var(--ods-typography-body-sm-line);
  font-weight: 400;
}

/* Caption + label */
.ods-caption {
  font-size: var(--ods-typography-caption-medium-size);
  line-height: var(--ods-typography-caption-medium-line);
  font-weight: 500;
  color: var(--ods-color-text-secondary);
}
.ods-label-uppercase {
  font-size: var(--ods-typography-label-uppercase-size);
  line-height: var(--ods-typography-label-uppercase-line);
  font-weight: 500;
  letter-spacing: var(--ods-typography-label-uppercase-track);
  text-transform: uppercase;
  color: var(--ods-color-text-secondary);
}

/* Mono — numeric data */
.ods-mono,
code,
kbd,
samp {
  font-family: var(--ods-typography-family-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Link */
.ods-link,
a.ods {
  color: var(--ods-color-text-brand-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.ods-link:hover,
a.ods:hover {
  border-bottom-color: currentColor;
}

/* Focus ring — universal */
*:focus-visible {
  outline: 2px solid var(--ods-color-border-focus);
  outline-offset: 1px;
}

/* Selection */
::selection {
  background: var(--ods-color-surface-brand-tertiary);
  color: var(--ods-color-text-brand-clicked);
}