/*
 * Compact 2ip design foundation, informed by Material Design 3.
 *
 * Breakpoint values document the existing compiled CSS contract. CSS custom
 * properties cannot be used directly in @media conditions, so source media
 * queries intentionally keep their numeric values until a reviewed build step
 * owns breakpoint expansion.
 */
:root {
  /* Shared data-row density; table-cell height is an intrinsic minimum. */
  --twoip-icon-action-size: 44px;
  --twoip-table-row-height: 52px;
  --twoip-table-line-height: 24px;
  --twoip-table-divider-size: 1px;
  --twoip-table-cell-padding-block: calc((var(--twoip-table-row-height) - var(--twoip-icon-action-size) - var(--twoip-table-divider-size)) / 2);
  --twoip-table-cell-padding-inline: 10px;
  --twoip-color-text: var(--twoip-on-surface);
  --twoip-color-link: var(--twoip-link-text);
  --twoip-inline-hover: #A8430B;
  --twoip-link-hover: var(--twoip-inline-hover);
  --twoip-link-visited: var(--twoip-link-text);
  --twoip-link-pressed: #873408;
  --twoip-link-border: var(--twoip-link-text);
  --twoip-link-text: var(--twoip-on-surface);
  --twoip-link-action-border: var(--twoip-link-text);
  --twoip-link-action-hover: var(--twoip-inline-hover);
  --twoip-link-action-pressed: var(--twoip-link-pressed);
  --twoip-link-action-on-primary: var(--twoip-on-primary);
  --twoip-inline-hover-on-primary: #ffe5bf;
  --twoip-link-action-on-primary-hover: var(--twoip-inline-hover-on-primary);
  --twoip-link-action-on-primary-pressed: #fff1df;
  --twoip-link-focus: var(--twoip-primary);
  --twoip-color-accent: var(--twoip-accent);
  --twoip-color-success: var(--twoip-success);
  --twoip-color-warning: var(--twoip-warning);
  --twoip-color-danger: var(--twoip-error);
  --twoip-color-surface: var(--twoip-surface);
  --twoip-color-page: var(--twoip-surface-container);
  --twoip-color-border: var(--twoip-outline-variant);
  --twoip-brand-cyan: #007bb5;
  --twoip-brand-orange: #ff5722;
  --twoip-primary: #007bb5;
  --twoip-account-primary: var(--twoip-primary);
  --twoip-chart-download: var(--twoip-primary);
  --twoip-chart-upload: #008eae;
  --twoip-hero-start: #006a9c;
  --twoip-hero-end: #006e9e;
  --twoip-hero-data: #e9f7fd;
  --twoip-on-primary: #ffffff;
  --twoip-button-on-primary: var(--twoip-on-primary);
  --twoip-primary-container: #def3fc;
  --twoip-on-primary-container: #00344f;
  --twoip-copy-hover: var(--twoip-primary-container);
  --twoip-copy-success: var(--twoip-success);
  --twoip-accent: #bf4010;
  --twoip-on-accent: #ffffff;
  --twoip-accent-hover: #a6370d;
  --twoip-hero-divider: #bed6e3;
  --twoip-accent-container: #ffede4;
  --twoip-scrim: #000000;
  --twoip-surface: #ffffff;
  --twoip-surface-container: #f3f7fa;
  --twoip-surface-container-low: #edf3f7;
  --twoip-surface-container-high: #edf3f7;
  --twoip-service-surface: var(--twoip-surface);
  --twoip-service-hover: #f0f9fd;
  --twoip-service-art-surface: var(--twoip-primary-container);
  --twoip-art-security: #e2f3ea;
  --twoip-art-communication: #eee9fc;
  --twoip-art-infrastructure: #fcece3;
  --twoip-art-location: #fce6e8;
  --twoip-on-surface: #24343d;
  --twoip-on-surface-variant: #526570;
  --twoip-outline: #71838e;
  --twoip-outline-variant: #d5dfe5;
  --twoip-error: #b3261e;
  --twoip-on-error: #ffffff;
  --twoip-error-container: #fff0ee;
  --twoip-success: #226b3c;
  --twoip-on-success: var(--twoip-button-on-primary);
  --twoip-success-container: #e6f4e9;
  --twoip-rating-star-size: 20px;
  --twoip-rating-summary-font-size: 25.6px;
  --twoip-rating-summary-star-size: 33.28px;
  --twoip-rating-summary-star-spacing: 1px;
  --twoip-rating-star-gap: var(--twoip-space-1, 4px);
  --twoip-rating-filled: #ffc107;
  --twoip-rating-outline: color-mix(in srgb, var(--twoip-rating-filled) 65%, var(--twoip-warning));
  --twoip-warning: #805400;
  --twoip-on-warning: var(--twoip-button-on-primary);
  --twoip-warning-container: #fff3d9;
  /* Fixed dark terminal content; traffic lights are decorative macOS chrome. */
  --twoip-terminal-surface: #111a20;
  --twoip-terminal-ink: #e3edf3;
  --twoip-terminal-caret: #8cdda5;
  --twoip-terminal-close: #ff5f57;
  --twoip-terminal-minimize: #febc2e;
  --twoip-terminal-maximize: #28c840;
  --twoip-service-result-row-padding: 6px;
  --twoip-service-results-row-padding: 12px;
  --twoip-service-mobile-row-gap: 4px;
  --twoip-service-collection-control-gap: 8px;
  --twoip-contextual-icon-size: 12px;
  --twoip-service-form-control-gap: 16px;
  --twoip-service-form-section-gap: 24px;
  --twoip-service-field-gap: var(--twoip-service-form-control-gap);
  --twoip-service-option-row-gap: 8px;
  --twoip-service-action-group-gap: 64px;
  --twoip-service-result-gap: 24px;
  --twoip-service-heading-gap: 12px;
  --twoip-service-collection-gap: 8px 16px;
  --twoip-navigation-desktop-gap: 16px;
  --twoip-header-edge-inset: 0px;
  --twoip-header-logo-width: clamp(170px, 13vw, 184px);
  --twoip-radius-small: 6px;
  --twoip-radius-medium: 12px;
  --twoip-radius-category: 16px;
  --twoip-radius-large: 18px;
  --twoip-radius-full: 999px;
  --twoip-elevation-1: 0 1px 3px rgb(36 52 61 / 8%);
  --twoip-elevation-2: 0 4px 16px rgb(36 52 61 / 12%);
  --twoip-type-headline: clamp(24px, 2.5vw, 32px);
  --twoip-type-title: 20px;
  --twoip-type-body: 16px;
  --twoip-status-text: var(--twoip-on-surface);
  --twoip-status-muted: var(--twoip-on-surface-variant);
  --twoip-type-label: 14px;
  --twoip-sidebar-width: 244px;
  --twoip-navigation-group-height: 44px;
  --twoip-pagination-size: 40px;
  --twoip-pagination-gap: 2px;
  --twoip-pagination-radius: var(--twoip-radius-full);
  --twoip-pagination-foreground: var(--twoip-primary);
  --twoip-pagination-hover: var(--twoip-surface-container-high);
  --twoip-pagination-active: var(--twoip-primary-container);
  --twoip-pagination-active-foreground: var(--twoip-on-primary-container);
  --twoip-pagination-disabled: var(--twoip-on-surface-variant);

  --twoip-shell-gap: 18px;
  --twoip-grid-gutter: 18px;
  --twoip-container-large: 1258px;
  --twoip-breakpoint-xs: 480px;
  --twoip-breakpoint-sm: 768px;
  --twoip-breakpoint-md: 992px;
  --twoip-breakpoint-lg: 1275px;
}

/* Shared dark roles preserve branded blue hero and original service artwork. */
:root[data-theme="dark"] {
  --twoip-service-hover: #233b49;
  --twoip-art-security: #193f35;
  --twoip-art-communication: #35314e;
  --twoip-art-infrastructure: #483528;
  --twoip-art-location: #4c3039;
  color-scheme: dark;
  --twoip-inline-hover: #FFB68A;
  --twoip-link-hover: var(--twoip-inline-hover);
  --twoip-link-visited: var(--twoip-link-text);
  --twoip-link-pressed: #FFD2B8;
  --twoip-link-action-border: var(--twoip-link-text);
  --twoip-link-action-hover: var(--twoip-inline-hover);
  --twoip-link-action-pressed: var(--twoip-link-pressed);
  --twoip-primary: #6ccfff;
  --twoip-chart-upload: #8be3ee;
  --twoip-account-primary: var(--twoip-primary);
  --twoip-on-primary: #ffffff;
  --twoip-button-on-primary: #00344f;
  --twoip-primary-container: #173f53;
  --twoip-on-primary-container: #c3eaff;
  --twoip-hero-data: #1d3543;
  --twoip-hero-divider: #47616f;
  --twoip-accent: #ffad86;
  --twoip-accent-hover: #ffd3bb;
  --twoip-accent-container: #432d24;
  --twoip-surface: #1b2831;
  --twoip-surface-container: #111a20;
  --twoip-surface-container-low: #17242c;
  --twoip-surface-container-high: #263943;
  --twoip-on-surface: #e3edf3;
  --twoip-on-surface-variant: #b4c6d1;
  --twoip-outline: #8ba1af;
  --twoip-outline-variant: #40535f;
  --twoip-error: #ffb4ab;
  --twoip-on-error: #690005;
  --twoip-error-container: #4c2424;
  --twoip-success: #8cdda5;
  --twoip-success-container: #203c2a;
  --twoip-warning: #ffd083;
  --twoip-warning-container: #44351c;
}
:root[data-theme="light"] { color-scheme: light; }