/* CARE Dashboard Kit — Foundations (Figma → CSS)
 * Source: Figma file RiM217WNVed5I5uE38zCiT (01 Foundations, live 2026-08-10)
 * Authority: Figma variables + text styles lead. Do not invent semantic tokens here.
 * Typography mode: Eurostile (Saira mode is Figma legacy only).
 */

:root {
    /* ===== Primitives ===== */
    --is4it-black: #303030; /* IS4IT-Black */
    --is4it-black-100: #4d4d4d; /* IS4IT-Black-Shade-1 */
    --is4it-blue: #0360f0; /* IS4IT-Blue */
    --is4it-blue-100: #7eaff5; /* IS4IT-Blue-Shade-1 */
    --is4it-lime: #c3f481; /* IS4IT-Lime */
    --is4it-lime-100: #def7bd; /* IS4IT-Lime-Shade-1 */
    --is4it-pure-white: #f9f9f9; /* IS4IT-Pure-White — DEPRECATED, value = White/Black (deprecated) */
    --is4it-purple: #c6adf7; /* IS4IT-Purple */
    --is4it-purple-100: #d3c0f8; /* IS4IT-Purple-Shade-1 */
    --is4it-purple-200: #dcd3f4; /* IS4IT-Purple-Shade-2 */
    --is4it-purple-strong: #a178f2; /* IS4IT-Purple-Strong */
    --is4it-red: #ff665a; /* IS4IT-Red */
    --is4it-red-100: #fe8b82; /* IS4IT-Red-Shade-1 */
    --is4it-red-200: #ffada9; /* IS4IT-Red-Shade-2 */
    --is4it-red-strong: #ff5547; /* IS4IT-Red-Strong */
    --is4it-rose: #eca4a4; /* IS4IT-Rose */
    --is4it-rose-100: #f3cfcf; /* IS4IT-Rose-Shade-1 */
    --is4it-rose-200: #f4dfdf; /* IS4IT-Rose-Shade-2 */
    --is4it-superblack: #303030; /* IS4IT-SuperBlack — DEPRECATED, value = White/Black (deprecated) */
    --is4it-superblack-overlay-56: rgba(48, 48, 48, 0.56); /* IS4IT-SuperBlack-Overlay-56 */
    --is4it-white: #f9f9f9; /* IS4IT-White */
    --is4it-white-100: #e6e6e6; /* IS4IT-White-Shade-1 */
    --is4it-white-200: #f0f0f0; /* IS4IT-White-Shade-2 */
    --is4it-white-300: #d4d4d4; /* IS4IT-White-Shade-3 */
    --care-light-gray: #e8e8e3; /* CARE-Light-Gray */
    --care-off-white: #f5f5f0; /* CARE-Off-White */
    --care-user-chip: #e7d8ff; /* CARE-User-Chip */
    --cyan-300: #67e8f9; /* Cyan-300 */
    --cyan-50: #ecfeff; /* Cyan-50 */
    --cyan-700: #0e7490; /* Cyan-700 */
    --gray-100: #f2f4f7; /* Gray-100 */
    --gray-200: #eaecf0; /* Gray-200 */
    --gray-300: #d0d5dd; /* Gray-300 */
    --gray-50: #f9fafb; /* Gray-50 */
    --gray-500: #667085; /* Gray-500 */
    --gray-600: #475467; /* Gray-600 */
    --green-300: #6ce9a6; /* Green-300 */
    --green-50: #ecfdf3; /* Green-50 */
    --green-700: #067647; /* Green-700 */
    --orange-700: #b54708; /* Orange-700 */
    --red-300: #fda29b; /* Red-300 */
    --red-50: #fef3f2; /* Red-50 */
    --red-700: #b42318; /* Red-700 */
    --red-800: #912018; /* Red-800 */
    --yellow-400: #fec84b; /* Yellow-400 */
    --yellow-50: #fffaeb; /* Yellow-50 */

    /* ===== Semantic (Light) ===== */
    --action-destructive-background: #b42318; /* action/destructive/background → Red-700 */
    --action-destructive-background-disabled: #e6e6e6; /* action/destructive/background-disabled → IS4IT-White-Shade-1 */
    --action-destructive-background-hover: #912018; /* action/destructive/background-hover → Red-800 */
    --action-destructive-focus-ring: #a178f2; /* action/destructive/focus-ring → IS4IT-Purple-Strong */
    --action-destructive-foreground: #b42318; /* action/destructive/foreground → Red-700 */
    --action-destructive-foreground-disabled: #4d4d4d; /* action/destructive/foreground-disabled → IS4IT-Black-Shade-1 */
    --action-destructive-on-background: #f9f9f9; /* action/destructive/on-background → IS4IT-White */
    --action-ghost-background-hover: #e6e6e6; /* action/ghost/background-hover → surface/muted */
    --action-ghost-focus-ring: #a178f2; /* action/ghost/focus-ring → IS4IT-Purple-Strong */
    --action-ghost-foreground: #303030; /* action/ghost/foreground → IS4IT-Black */
    --action-ghost-foreground-disabled: #667085; /* action/ghost/foreground-disabled → Gray-500 */
    --action-ghost-foreground-hover: #303030; /* action/ghost/foreground-hover → IS4IT-Black */
    --action-primary-background: #ff665a; /* action/primary/background → IS4IT-Red */
    --action-primary-background-disabled: #f4dfdf; /* action/primary/background-disabled → IS4IT-Rose-Shade-2 */
    --action-primary-background-hover: #f3cfcf; /* action/primary/background-hover → IS4IT-Rose-Shade-1 */
    --action-primary-focus-ring: #303030; /* action/primary/focus-ring → IS4IT-Black */
    --action-primary-foreground: #ff5547; /* Outline/Link only — NOT text on primary fill; use --action-primary-on-background */
    --action-primary-on-background: #303030; /* action/primary/on-background → IS4IT-Black */
    --action-primary-on-background-disabled: #4d4d4d; /* action/primary/on-background-disabled → IS4IT-Black-Shade-1 */
    --action-secondary-background: #0360f0; /* action/secondary/background → IS4IT-Blue */
    --action-secondary-background-disabled: #e6e6e6; /* action/secondary/background-disabled → IS4IT-White-Shade-1 */
    --action-secondary-background-hover: #7eaff5; /* action/secondary/background-hover → IS4IT-Blue-Shade-1 */
    --action-secondary-border: #0360f0; /* action/secondary/border → IS4IT-Blue */
    --action-secondary-border-disabled: #e6e6e6; /* action/secondary/border-disabled → IS4IT-White-Shade-1 */
    --action-secondary-border-hover: #0360f0; /* action/secondary/border-hover → IS4IT-Blue */
    --action-secondary-focus-ring: #c6adf7; /* action/secondary/focus-ring → IS4IT-Purple */
    --action-secondary-foreground: #f9f9f9; /* action/secondary/foreground → IS4IT-White */
    --action-secondary-foreground-disabled: #4d4d4d; /* action/secondary/foreground-disabled → IS4IT-Black-Shade-1 */
    --action-tertiary-background: #f9f9f9; /* action/tertiary/background → IS4IT-White */
    --action-tertiary-background-disabled: #e6e6e6; /* action/tertiary/background-disabled → IS4IT-White-Shade-1 */
    --action-tertiary-background-hover: #e6e6e6; /* action/tertiary/background-hover → IS4IT-White-Shade-1 */
    --action-tertiary-border: #e6e6e6; /* action/tertiary/border → IS4IT-White-Shade-1 */
    --action-tertiary-border-disabled: #e6e6e6; /* action/tertiary/border-disabled → IS4IT-White-Shade-1 */
    --action-tertiary-focus-ring: #c6adf7; /* action/tertiary/focus-ring → IS4IT-Purple */
    --action-tertiary-foreground: #303030; /* action/tertiary/foreground → IS4IT-Black */
    --action-tertiary-foreground-disabled: #4d4d4d; /* action/tertiary/foreground-disabled → IS4IT-Black-Shade-1 */
    --border-default: #d4d4d4; /* border/default → IS4IT-White-Shade-3 */
    --border-focus: #0360f0; /* border/focus → IS4IT-Blue */
    --border-strong: #4d4d4d; /* border/strong → IS4IT-Black-Shade-1 */
    --brand-accent: #c6adf7; /* brand/accent → IS4IT-Purple */
    --brand-highlight: #c3f481; /* brand/highlight → IS4IT-Lime */
    --brand-primary: #ff665a; /* brand/primary → IS4IT-Red */
    --brand-secondary: #0360f0; /* brand/secondary → IS4IT-Blue */
    --chat-avatar-assistant-background: #a178f2; /* chat/avatar/assistant/background → IS4IT-Purple-Strong */
    --chat-avatar-user-background: #4d4d4d; /* chat/avatar/user/background → IS4IT-Black-Shade-1 */
    --chat-history-selected-background: #7eaff5; /* chat/history/selected/background → IS4IT-Blue-Shade-1 */
    --chat-message-assistant-background: #e6e6e6; /* chat/message/assistant/background → IS4IT-White-Shade-1 */
    --chat-message-user-background: #7eaff5; /* chat/message/user/background → IS4IT-Blue-Shade-1 */
    --chat-message-user-foreground: #f9f9f9; /* chat/message/user/foreground → IS4IT-White */
    --chat-thread-background: #f8f6fd; /* chat/thread/background */
    --data-viz-emphasis-highlight: #c6adf7; /* data-viz/emphasis/highlight → IS4IT-Purple */
    --data-viz-evaluation-attention: #b54708; /* data-viz/evaluation/attention → Orange-700 */
    --data-viz-evaluation-negative: #b42318; /* data-viz/evaluation/negative → Red-700 */
    --data-viz-evaluation-neutral: #475467; /* data-viz/evaluation/neutral → Gray-600 */
    --data-viz-evaluation-positive: #067647; /* data-viz/evaluation/positive → Green-700 */
    --data-viz-series-01: #ff665a; /* data-viz/series/01 → IS4IT-Red */
    --data-viz-series-02: #7eaff5; /* data-viz/series/02 → IS4IT-Blue-Shade-1 */
    --data-viz-series-03: #c6adf7; /* data-viz/series/03 → IS4IT-Purple */
    --data-viz-series-04: #c3f481; /* data-viz/series/04 → IS4IT-Lime */
    --data-viz-series-05: #fe8b82; /* data-viz/series/05 → IS4IT-Red-Shade-1 */
    --data-viz-series-06: #e6e6e6; /* data-viz/series/06 → IS4IT-White-Shade-1 */
    --data-viz-severity-critical: #b42318; /* data-viz/severity/critical → Red-700 */
    --data-viz-severity-high: #b54708; /* data-viz/severity/high → Orange-700 */
    --data-viz-severity-info: #0e7490; /* data-viz/severity/info → Cyan-700 */
    --data-viz-severity-low: #d0d5dd; /* data-viz/severity/low → Gray-300 */
    --data-viz-severity-medium: #fec84b; /* data-viz/severity/medium → Yellow-400 */
    --filter-pill-background: #7eaff5; /* filter/pill/background → IS4IT-Blue-Shade-1 */
    --filter-pill-border: #0360f0; /* filter/pill/border → IS4IT-Blue */
    --filter-pill-close: #4d4d4d; /* filter/pill/close → IS4IT-Black-Shade-1 */
    --filter-pill-foreground: #303030; /* filter/pill/foreground → IS4IT-Black */
    --focus-default: #0360f0; /* focus/default → IS4IT-Blue */
    --input-background-default: #f0f0f0; /* input/background/default → surface/default */
    --input-background-disabled: #e6e6e6; /* input/background/disabled → surface/muted */
    --input-background-hover: #f0f0f0; /* input/background/hover → surface/default */
    --input-background-read-only: #e6e6e6; /* input/background/read-only → surface/muted */
    --input-border-default: #4d4d4d; /* input/border/default → border/strong */
    --input-border-focus: #0360f0; /* input/border/focus → border/focus */
    --input-border-hover: #303030; /* input/border/hover → text/primary */
    --input-disabled-foreground: #4d4d4d; /* input/disabled/foreground → text/secondary */
    --input-error-background: #fef3f2; /* input/error/background → Red-50 */
    --input-error-border: #b42318; /* input/error/border → Red-700 */
    --input-error-foreground: #b42318; /* input/error/foreground → Red-700 */
    --input-focus-ring: #0360f0; /* input/focus-ring → focus/default */
    --input-foreground: #303030; /* input/foreground → text/primary */
    --input-helper: #4d4d4d; /* input/helper → text/secondary */
    --input-placeholder: #4d4d4d; /* input/placeholder → text/secondary */
    --input-required-foreground: #b42318; /* input/required/foreground → status/critical/foreground */
    --input-selected-background: #0360f0; /* input/selected/background → IS4IT-Blue */
    --input-selected-background-2: #c6adf7; /* input/selected/background 2 → brand/accent */
    --input-selected-border: #0360f0; /* input/selected/border → IS4IT-Blue */
    --input-selected-foreground: #f9f9f9; /* input/selected/foreground → text/inverse */
    --input-success-background: #ecfdf3; /* input/success/background → status/success/background */
    --input-success-border: #6ce9a6; /* input/success/border → status/success/border */
    --input-success-foreground: #067647; /* input/success/foreground → status/success/foreground */
    --navigation-active-background: #c3f481; /* navigation/active/background → IS4IT-Lime */
    --navigation-active-foreground: #303030; /* navigation/active/foreground → IS4IT-Black */
    --navigation-background: #f9f9f9; /* navigation/background → surface/sidebar */
    --navigation-disabled-foreground: #667085; /* navigation/disabled/foreground → Gray-500 */
    --navigation-divider: #d4d4d4; /* navigation/divider → border/default */
    --navigation-focus-ring: #0360f0; /* navigation/focus-ring → IS4IT-Blue */
    --navigation-foreground-default: #4d4d4d; /* navigation/foreground/default → text/secondary */
    --navigation-foreground-muted: #667085; /* navigation/foreground/muted → Gray-500 */
    --navigation-hover-background: #dcd3f4; /* navigation/hover/background → IS4IT-Purple-Shade-2 */
    --navigation-hover-foreground: #303030; /* navigation/hover/foreground → IS4IT-Black */
    --portal-border-default: #e8e8e3; /* portal/border/default → CARE-Light-Gray */
    --portal-surface-content: #f5f5f0; /* portal/surface/content → CARE-Off-White */
    --portal-surface-footer: #4d4d4d; /* portal/surface/footer → IS4IT-Black-Shade-1 */
    --portal-surface-user: #e7d8ff; /* portal/surface/user → CARE-User-Chip */
    --selection-background: #ffada9; /* selection/background → IS4IT-Red-Shade-2 */
    --selection-border: #ff665a; /* selection/border → IS4IT-Red */
    --selection-foreground: #303030; /* selection/foreground → IS4IT-Black */
    --status-attention-background: #fffaeb; /* status/attention/background → Yellow-50 */
    --status-attention-border: #fec84b; /* status/attention/border → Yellow-400 */
    --status-attention-foreground: #b54708; /* status/attention/foreground → Orange-700 */
    --status-critical-background: #fef3f2; /* status/critical/background → Red-50 */
    --status-critical-border: #fda29b; /* status/critical/border → Red-300 */
    --status-critical-foreground: #b42318; /* status/critical/foreground → Red-700 */
    --status-info-background: #ecfeff; /* status/info/background → Cyan-50 */
    --status-info-border: #67e8f9; /* status/info/border → Cyan-300 */
    --status-info-foreground: #0e7490; /* status/info/foreground → Cyan-700 */
    --status-neutral-background: #f2f4f7; /* status/neutral/background → Gray-100 */
    --status-neutral-border: #d0d5dd; /* status/neutral/border → Gray-300 */
    --status-neutral-foreground: #475467; /* status/neutral/foreground → Gray-600 */
    --status-success-background: #ecfdf3; /* status/success/background → Green-50 */
    --status-success-border: #6ce9a6; /* status/success/border → Green-300 */
    --status-success-foreground: #067647; /* status/success/foreground → Green-700 */
    --status-unknown-background: #f9fafb; /* status/unknown/background → Gray-50 */
    --status-unknown-border: #eaecf0; /* status/unknown/border → Gray-200 */
    --status-unknown-foreground: #667085; /* status/unknown/foreground → Gray-500 */
    --surface-card: #f9f9f9; /* surface/card → IS4IT-White */
    --surface-default: #f0f0f0; /* surface/default → IS4IT-White-Shade-2 */
    --surface-muted: #e6e6e6; /* surface/muted → IS4IT-White-Shade-1 */
    --surface-sidebar: #f9f9f9; /* surface/sidebar → IS4IT-White */
    --surface-topbar: #f9f9f9; /* surface/topbar → IS4IT-White */
    --text-inverse: #f9f9f9; /* text/inverse → IS4IT-White */
    --text-primary: #303030; /* text/primary → IS4IT-Black */
    --text-secondary: #4d4d4d; /* text/secondary → IS4IT-Black-Shade-1 */
    --text-terminal-muted: #e6e6e6; /* text/terminal-muted → IS4IT-White-Shade-1 */

    /* ===== Scale ===== */
    --radius-card: 16px;
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-none: 0px;
    --radius-pill: 999px;
    --radius-sm: 4px;
    --radius-user-chip: 16px;
    --space-1: 4px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-16: 64px;
    --space-2: 8px;
    --space-24: 96px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;

    /* ===== Layout ===== */
    --layout-content-max-width-narrow: 800px;
    --layout-content-max-width-standard: 1280px;
    --layout-content-max-width-wide: 1440px;
    --layout-content-padding-x: 16px;
    --layout-content-padding-y: 24px;
    --layout-footer-min-height: 36px;
    --layout-grid-columns: 12;
    --layout-grid-gap: 24px;
    --layout-page-head-max-width: 760px;
    --layout-sidebar-brand-height: 50px;
    --layout-sidebar-collapsed: 56px;
    --layout-sidebar-width: 220px;
    --layout-table-column-optional-width: 192px;
    --layout-topbar-height: 50px;

    /* ===== Typography primitives (Eurostile mode) ===== */
    --type-size-9: 9px;
    --type-size-10: 10px;
    --type-size-11: 11px;
    --type-size-12: 12px;
    --type-size-13: 13px;
    --type-size-14: 14px;
    --type-size-16: 16px;
    --type-size-20: 20px;
    --type-size-24: 24px;
    --type-size-28: 28px;
    --type-size-32: 32px;
    --type-size-40: 40px;
    --type-size-56: 56px;
    --type-size-80: 80px;
    --type-family-body: 'Eurostile LT Pro';
    --type-family-display: 'Eurostile LT Pro';
    --type-family-statement: 'Eurostile LT Pro Bold Extended 2';
    --type-style-body: 'Medium';
    --type-style-display: 'Demi';
    --type-style-statement: 'Bold Extended 2';
    /* Cap-height vertical trim — CSS equivalent of Figma leadingTrim CAP_HEIGHT.
     * The em-box is already cap→alphabetic via baked woff2 hhea/OS/2 metrics
     * (WebKit: Safari, iOS Chrome/Edge) and ascent/descent-override in
     * eurostile.css (desktop Chromium/Firefox).
     * These properties then drop half-leading on auto-sized stacks. They do
     * not re-align glyphs inside fixed-height flex controls. */
    --type-text-box-trim: trim-both;
    --type-text-box-edge: cap alphabetic;

    /* Text-stack gaps after Cap Height trim (metrics/gap/* · Eurostile mode). */
    --metrics-gap-label-value: var(--space-2); /* 8px */
    --metrics-gap-title-meta: var(--space-2); /* 8px */
    --metrics-gap-title-body: var(--space-2); /* 8px */
    --metrics-gap-block: var(--space-4); /* 16px */
    --metrics-gap-field-label-control: var(--space-2); /* 8px */
    --metrics-gap-field-control-helper: var(--space-2); /* 8px */
    --metrics-inset-ink-safety: 1px;

    /* ===== Product UI type roles (T5) ===== */
    --type-page-title-size: var(--type-size-28);
    --type-page-title-weight: 600; /* Demi */
    --type-page-title-line-height: 1.3;
    --type-page-title-letter-spacing: 0;
    --type-section-title-size: var(--type-size-20);
    --type-section-title-weight: 600;
    --type-section-title-line-height: 1.3;
    --type-section-title-letter-spacing: 0;
    --type-card-title-size: var(--type-size-16);
    --type-card-title-weight: 600;
    --type-card-title-line-height: 1.4;
    --type-card-title-letter-spacing: 0;
    --type-metric-large-size: var(--type-size-32);
    --type-metric-large-weight: 600;
    --type-metric-large-line-height: 1.2;
    --type-metric-large-letter-spacing: 0;
    --type-body-size: var(--type-size-14);
    --type-body-weight: 400; /* Medium cut (OS/2 usWeightClass 400) */
    --type-body-line-height: 1.5;
    --type-body-letter-spacing: 0.02em; /* 2% */
    --type-body-strong-weight: 600; /* Body/Strong · Demi */
    --type-body-sm-size: var(--type-size-13);
    --type-body-sm-weight: 400;
    --type-body-sm-line-height: 1.5;
    --type-body-sm-letter-spacing: 0.02em;
    --type-body-sm-strong-weight: 600;
    --type-caption-size: var(--type-size-12);
    --type-caption-weight: 400; /* Medium */
    --type-caption-line-height: 1.4;
    --type-caption-letter-spacing: 0.02em;
    --type-caption-strong-weight: 600;
    --type-label-size: var(--type-size-12);
    --type-label-weight: 600;
    --type-label-line-height: 1.2;
    --type-label-letter-spacing: 0.05em; /* 5% */
    --type-label-button-size: var(--type-size-14);
    --type-label-button-weight: 600;
    --type-label-button-line-height: 20px;
    --type-label-button-letter-spacing: 0;
    --type-label-meta-size: var(--type-size-11);
    --type-label-meta-weight: 400;
    --type-label-meta-line-height: 1.4;
    --type-label-meta-letter-spacing: 0.02em;
    --type-label-badge-size: var(--type-size-12);
    --type-label-badge-weight: 600;
    --type-label-badge-line-height: 1.4;
    --type-label-badge-letter-spacing: 0.02em;
    --type-label-tag-xs-size: var(--type-size-9);
    --type-label-tag-sm-size: var(--type-size-11);
    --type-label-tag-lg-size: var(--type-size-13);
    --type-label-tag-weight: 600;
    --type-label-tag-line-height: 1.2;
    --type-label-tag-letter-spacing: 0.05em;
    --type-statement-size: var(--type-size-24);
    --type-statement-weight: 700;
    --type-statement-line-height: 1.2;
    --type-statement-letter-spacing: 0;

    /* ===== Shell chrome (mapped from semantic / navigation) ===== */
    --sidebar-bg: var(--surface-sidebar);
    --sidebar-text: var(--is4it-black);
    --sidebar-muted: var(--text-secondary);
    --sidebar-border: var(--portal-border-default);
    --sidebar-hover-bg: var(--navigation-hover-background); /* #dcd3f4 Purple-Shade-2 */
    --sidebar-active-bg: var(--navigation-active-background);
    --sidebar-active-border: var(--is4it-black);
    --sidebar-active-text: var(--is4it-black);
    --topbar-bg: var(--surface-topbar);
    --topbar-border: var(--portal-border-default);
    --content-bg: var(--portal-surface-content);
    --footer-bg: var(--portal-surface-footer);
    --chrome-hover: rgba(48, 48, 48, 0.06);
    --oc-user-toggle-bg: var(--portal-surface-user);
    --oc-user-chip-radius: var(--radius-user-chip);

    /* ===== Legacy aliases (deprecated — prefer layout/semantic names) ===== */
    --sidebar-width: var(--layout-sidebar-width); /* deprecated */
    --topbar-height: var(--layout-topbar-height); /* deprecated */
    --sidebar-hover: var(--sidebar-hover-bg); /* deprecated */
    --sidebar-active: var(--is4it-lime); /* deprecated */
    --section-header-color: var(--text-secondary); /* deprecated */
    --off-white: var(--portal-surface-content); /* deprecated → portal content */
    --light-gray: var(--portal-border-default); /* deprecated → portal border */
    --oc-font-sans: var(--type-family-body), Helvetica, Arial, sans-serif;
    --oc-font-statement: var(--type-family-statement), var(--type-family-display), Helvetica, Arial, sans-serif;

    /* ===== Bootstrap-Bridge (migrations aid — not a Figma pendant) ===== */
    --bs-primary: var(--action-primary-background);
    --bs-primary-rgb: 255, 102, 90;
    --bs-secondary: var(--action-secondary-background);
    --bs-secondary-rgb: 3, 96, 240;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--content-bg);
    --bs-border-color: var(--border-default);
    --bs-link-color: var(--action-primary-foreground);
    --bs-link-hover-color: var(--action-primary-background);
    --bs-focus-ring-color: rgba(3, 96, 240, 0.25);
    --bs-font-sans-serif: var(--oc-font-sans);
}

/* Product UI typography utilities (T5) — Marketing H1–H5 / C1–C4 intentionally omitted.
 * Cap-height trim mirrors Figma leadingTrim CAP_HEIGHT (text-box-* ; progressive enhancement). */
.type-page-title {
    font-family: var(--oc-font-sans);
    font-size: var(--type-page-title-size);
    font-weight: var(--type-page-title-weight);
    line-height: var(--type-page-title-line-height);
    letter-spacing: var(--type-page-title-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-section-title {
    font-family: var(--oc-font-sans);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    letter-spacing: var(--type-section-title-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-card-title {
    font-family: var(--oc-font-sans);
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: var(--type-card-title-line-height);
    letter-spacing: var(--type-card-title-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-metric-large {
    font-family: var(--oc-font-sans);
    font-size: var(--type-metric-large-size);
    font-weight: var(--type-metric-large-weight);
    line-height: var(--type-metric-large-line-height);
    letter-spacing: var(--type-metric-large-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-body {
    font-family: var(--oc-font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line-height);
    letter-spacing: var(--type-body-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-body-strong {
    font-family: var(--oc-font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-strong-weight);
    line-height: var(--type-body-line-height);
    letter-spacing: var(--type-body-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-body-sm {
    font-family: var(--oc-font-sans);
    font-size: var(--type-body-sm-size);
    font-weight: var(--type-body-sm-weight);
    line-height: var(--type-body-sm-line-height);
    letter-spacing: var(--type-body-sm-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-body-sm-strong {
    font-family: var(--oc-font-sans);
    font-size: var(--type-body-sm-size);
    font-weight: var(--type-body-sm-strong-weight);
    line-height: var(--type-body-sm-line-height);
    letter-spacing: var(--type-body-sm-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-caption {
    font-family: var(--oc-font-sans);
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-line-height);
    letter-spacing: var(--type-caption-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-caption-strong {
    font-family: var(--oc-font-sans);
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-strong-weight);
    line-height: var(--type-caption-line-height);
    letter-spacing: var(--type-caption-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-label {
    font-family: var(--oc-font-sans);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-line-height);
    letter-spacing: var(--type-label-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-label-button {
    font-family: var(--oc-font-sans);
    font-size: var(--type-label-button-size);
    font-weight: var(--type-label-button-weight);
    line-height: var(--type-label-button-line-height);
    letter-spacing: var(--type-label-button-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-label-meta {
    font-family: var(--oc-font-sans);
    font-size: var(--type-label-meta-size);
    font-weight: var(--type-label-meta-weight);
    line-height: var(--type-label-meta-line-height);
    letter-spacing: var(--type-label-meta-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-label-badge {
    font-family: var(--oc-font-sans);
    font-size: var(--type-label-badge-size);
    font-weight: var(--type-label-badge-weight);
    line-height: var(--type-label-badge-line-height);
    letter-spacing: var(--type-label-badge-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-label-tag-xs,
.type-label-tag-sm,
.type-label-tag-lg {
    font-family: var(--oc-font-sans);
    font-weight: var(--type-label-tag-weight);
    line-height: var(--type-label-tag-line-height);
    letter-spacing: var(--type-label-tag-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

.type-label-tag-xs { font-size: var(--type-label-tag-xs-size); }
.type-label-tag-sm { font-size: var(--type-label-tag-sm-size); }
.type-label-tag-lg { font-size: var(--type-label-tag-lg-size); }

/* Marketing / brand statement — outside Product UI by default; utility kept for rare use. */
.type-statement {
    font-family: var(--oc-font-statement);
    font-size: var(--type-statement-size);
    font-weight: var(--type-statement-weight);
    line-height: var(--type-statement-line-height);
    letter-spacing: var(--type-statement-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

/* Default body copy inherits Cap Height trim + Medium tracking. */
body {
    font-weight: var(--type-body-weight);
    letter-spacing: var(--type-body-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
}

/* Text-stack helpers (metrics/gap/* after Cap Height trim). */
.stack-label-value,
.stack-title-meta,
.stack-title-body,
.stack-field {
    display: flex;
    flex-direction: column;
}

.stack-label-value { gap: var(--metrics-gap-label-value); }
.stack-title-meta { gap: var(--metrics-gap-title-meta); }
.stack-title-body { gap: var(--metrics-gap-title-body); }
.stack-field { gap: var(--metrics-gap-field-label-control); }

/* Bootstrap form stacks — gap only; casing stays per screen (not all labels are Label/UPPER). */
.main-content .form-label {
    margin-bottom: var(--metrics-gap-field-label-control);
}

.main-content .form-text,
.main-content .invalid-feedback,
.main-content .valid-feedback {
    margin-top: var(--metrics-gap-field-control-helper);
}

/* Dark remaps — legacy --pd-* palette (no Figma Semantic Dark). Behind feature flag. */
html[data-theme="dark"] {
    color-scheme: dark;
    --pd-bg-app: #1a2332;
    --pd-bg-main: #152030;
    --pd-bg-elevated: #1e2a3a;
    --pd-bg-card: #243447;
    --pd-table-row-alt: #172333;
    --pd-table-hover: #243447;
    --pd-text: #e2e8f0;
    --pd-text-muted: #94a3b8;
    --pd-border: #2d3f55;
    --pd-danger-soft: #c0392b;
    --pd-danger-soft-bg: #2d1f1f;
    --pd-badge-pending-bg: #92610a;
    --pd-badge-pending-text: #fde68a;
    --sidebar-bg: var(--pd-bg-app);
    --sidebar-hover: #243044;
    --sidebar-active: #38bdf8;
    --section-header-color: #94a3b8;
    --bs-body-color: #e2e8f0;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-bg: #1e2a3a;
    --bs-border-color: #2d3f55;
    --bs-border-color-translucent: rgba(45, 63, 85, 0.75);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --pd-chart-surface: #1e2a3a;
    --pd-chart-grid: #2d3f55;
    --pd-chart-axis: #94a3b8;
    --pd-chart-line: #60a5fa;
    /* New shell chrome tokens re-mapped to the dark palette */
    --surface-default: var(--pd-bg-app);
    --surface-sidebar: var(--pd-bg-app);
    --surface-topbar: #1e293b;
    --off-white: var(--pd-bg-app);
    --light-gray: var(--pd-border);
    --text-primary: var(--pd-text);
    --text-secondary: var(--pd-text-muted);
    --content-bg: var(--pd-bg-app);
    --footer-bg: #0f172a;
    --sidebar-text: var(--pd-text);
    --sidebar-muted: var(--pd-text-muted);
    --sidebar-border: var(--pd-border);
    --sidebar-hover-bg: #243044;
    --sidebar-active-bg: rgba(56, 189, 248, 0.12);
    --sidebar-active-border: #38bdf8;
    --sidebar-active-text: var(--pd-text);
    --topbar-bg: #1e293b;
    --topbar-border: #334155;
    --chrome-hover: rgba(255, 255, 255, 0.08);
    --surface-card: var(--pd-bg-elevated);
    --surface-muted: var(--pd-bg-card);
    --border-default: var(--pd-border);
    --brand-highlight: #38bdf8;
    --status-neutral-background: #1f2b3b;
    --status-neutral-border: #33475f;
    --status-neutral-foreground: #cbd5e1;
    --status-attention-background: #33260c;
    --status-attention-border: #a16207;
    --status-attention-foreground: #fcd34d;
    --status-info-background: #0d2f3a;
    --status-info-border: #0e7490;
    --status-info-foreground: #67e8f9;
    --status-success-background: #10301f;
    --status-success-border: #15803d;
    --status-success-foreground: #6ee7b7;
    --status-critical-background: #3a1a1a;
    --status-critical-border: #b42318;
    --status-critical-foreground: #fca5a5;
    --action-tertiary-background: var(--pd-bg-card);
    --action-tertiary-border: var(--pd-border);
    --action-tertiary-foreground: var(--pd-text);
    --action-secondary-background: #2563eb;
    --action-secondary-border: #2563eb;
    --action-secondary-foreground: #f8fafc;
}