/*
 * Speedtest palette with the shared Material Design 3 geometry contract.
 * Brand roles preserve the original blue, green and orange; theme shades derive from them.
 *
 * 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 {
  /* Bounded Speedtest page geometry in CSS pixels; independent of DPR/zoom. */
  --st-page-width: 1600px;
  --st-page-inset: 24px;
  --st-dial-max: 720px;
  --st-column-gap: 36px;
  --st-heading-gap: 24px;
  --st-share-gap: 12px;
  --st-ad-gap: 40px;
  --st-chart-height: 120px;
  /* Ordinary UI glyphs share one palette role; chart series keep data colors. */
  --st-icon-color: var(--twoip-primary);
  --st-information-height: 52px;
  --st-information-radius: 6px;
  --st-information-border-width: 1px;
  --st-information-border-color: var(--twoip-outline);
  --st-gauge-marker: var(--twoip-primary);
  /* Header contrast is independent of page ink and dropdown surfaces. Deepen
     the palette's saturated base to reserve contrast for translucent states. */
  --st-header-background: color-mix(in srgb, var(--twoip-brand-cyan) 78%, var(--twoip-scrim));
  --st-header-foreground: #ffffff;
  --st-header-hover: rgb(255 255 255 / 8%);
  --st-header-active: rgb(255 255 255 / 12%);
  --st-header-pressed: rgb(255 255 255 / 18%);
  --st-header-focus: var(--st-header-foreground);
  --st-header-divider: rgb(255 255 255 / 20%);
  --st-header-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  --st-header-icon-size: 24px;
  --st-measure-icon-size: 24px;
  --st-field-icon-size: 20px;
  /* 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: #0277bd;
  --twoip-brand-orange: #ff5722;
  --twoip-primary: #0277bd;
  --twoip-account-primary: var(--twoip-primary);
  --twoip-chart-download: #388e3c;
  --twoip-chart-upload: #0277bd;
  --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);
  /* Approved service-art navigation pairs; status colors retain their own owner. */
  --twoip-icon-blue: #0277bd;
  --twoip-icon-blue-container: #def3fc;
  --twoip-icon-teal: #006b64;
  --twoip-icon-teal-container: #d7f3ec;
  --twoip-icon-green: #226b3c;
  --twoip-icon-green-container: #e6f4e9;
  --twoip-icon-orange: #bf4010;
  --twoip-icon-orange-container: #ffede4;
  --twoip-icon-purple: #6750a4;
  --twoip-icon-purple-container: #eee9fc;
  --twoip-icon-indigo: #435b9a;
  --twoip-icon-indigo-container: #e8edfc;
  --twoip-icon-rose: #914466;
  --twoip-icon-rose-container: #fce6e8;
  --twoip-art-security: #e2f3ea;
  --twoip-art-communication: #eee9fc;
  --twoip-art-infrastructure: #fcece3;
  --twoip-art-location: #fce6e8;
  --twoip-on-surface: #263238;
  --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-review-card-gap: 20px;
  --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;
  /* Primary cabinet/service actions: geometry is independent of viewport and intent. */
  --twoip-action-min-height: 48px;
  --twoip-action-min-width: 120px;
  --twoip-action-font-family: "2ip";
  --twoip-action-font-size: 15px;
  --twoip-action-font-weight: 400;
  --twoip-action-line-height: 22px;
  --twoip-action-padding-block: 8px;
  --twoip-action-padding-inline: 16px;
  --twoip-action-radius: var(--twoip-radius-medium);
  --twoip-action-icon-gap: 8px;
  --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"] {
  --st-header-background: color-mix(in srgb, var(--twoip-brand-cyan) 60%, var(--twoip-scrim));
  --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: #4fc3f7;
  --twoip-chart-download: #81c784;
  --twoip-icon-blue: #4fc3f7;
  --twoip-icon-blue-container: #173f53;
  --twoip-icon-teal: #84d8cd;
  --twoip-icon-teal-container: #163f3b;
  --twoip-icon-green: #8cdda5;
  --twoip-icon-green-container: #203c2a;
  --twoip-icon-orange: #ffad86;
  --twoip-icon-orange-container: #432d24;
  --twoip-icon-purple: #d0bcff;
  --twoip-icon-purple-container: #35314e;
  --twoip-icon-indigo: #b5c6ff;
  --twoip-icon-indigo-container: #263450;
  --twoip-icon-rose: #efb5d0;
  --twoip-icon-rose-container: #472d3e;
  --twoip-chart-upload: #4fc3f7;
  --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; }