/* Suite design tokens. docs/DESIGN-SYSTEM-SUITE.md section 2 is the specification; every page reads
   colour, type, space, radius, size and motion from here and never from a literal.
   Each colour is written once as light-dark(light, dark); [data-theme] sets only color-scheme. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-opsz-v20.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-opsz-v20.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  --suite-gray-0: light-dark(#ffffff, #0a0a0a);
  --suite-gray-1: light-dark(#fafafa, #111111);
  --suite-gray-2: light-dark(#f4f4f4, #1a1a1a);
  --suite-gray-3: light-dark(#ededed, #222222);
  --suite-gray-4: light-dark(#e5e5e5, #2e2e2e);
  --suite-gray-5: light-dark(#d4d4d4, #404040);
  --suite-gray-6: light-dark(#a3a3a3, #525252);
  --suite-gray-7: light-dark(#808080, #737373);
  --suite-gray-8: light-dark(#6b6b6b, #8f8f8f);
  --suite-gray-9: light-dark(#525252, #a3a3a3);
  --suite-gray-10: light-dark(#333333, #d4d4d4);
  --suite-gray-11: light-dark(#0a0a0a, #fafafa);
  --suite-gray-12: light-dark(#000000, #ffffff);

  --suite-bg: var(--suite-gray-0);
  --suite-surface: var(--suite-gray-0);
  --suite-surface-subtle: var(--suite-gray-1);
  --suite-surface-overlay: light-dark(#ffffff, #171717);
  --suite-surface-dialog: light-dark(#ffffff, #1c1c1c);
  --suite-surface-inverse: var(--suite-gray-11);
  --suite-fill-hover: var(--suite-gray-2);
  --suite-fill-selected: var(--suite-gray-3);
  --suite-border: var(--suite-gray-4);
  --suite-border-strong: var(--suite-gray-5);
  --suite-border-control: var(--suite-gray-7);
  --suite-text: var(--suite-gray-11);
  --suite-text-secondary: var(--suite-gray-9);
  --suite-text-tertiary: var(--suite-gray-8);
  --suite-text-disabled: var(--suite-gray-6);
  --suite-text-inverse: var(--suite-gray-0);
  --suite-text-inverse-secondary: light-dark(#a3a3a3, #525252);
  --suite-primary: var(--suite-gray-11);
  --suite-primary-hover: var(--suite-gray-10);
  --suite-primary-pressed: var(--suite-gray-12);
  --suite-on-primary: var(--suite-gray-0);
  --suite-focus: light-dark(#1d5fc4, #7cb2ff);
  --suite-focus-on-inverse: light-dark(#7cb2ff, #1d5fc4);
  --suite-selection: light-dark(#cfe0fb, #1a2f50);
  --suite-scrim: light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.6));
  --suite-inverse-hover: light-dark(rgb(255 255 255 / 0.12), rgb(0 0 0 / 0.08));

  --suite-success-fg: light-dark(#137a3a, #4ade80);
  --suite-success-bg: light-dark(#effaf2, #0b2014);
  --suite-success-border: light-dark(#b5dfc2, #1d4d30);
  --suite-warning-fg: light-dark(#a15c07, #fbbf24);
  --suite-warning-bg: light-dark(#fdf6e6, #2e2208);
  --suite-warning-border: light-dark(#ecd09a, #7a5c12);
  --suite-danger-fg: light-dark(#c62828, #f87171);
  --suite-danger-bg: light-dark(#fdf1f1, #341414);
  --suite-danger-border: light-dark(#f1c0c0, #a83c3c);
  --suite-info-fg: light-dark(#1d5fc4, #7cb2ff);
  --suite-info-bg: light-dark(#eff4fd, #0d1b31);
  --suite-info-border: light-dark(#bcd0f2, #25426e);
  --suite-danger-solid: #c62828;
  --suite-danger-solid-hover: light-dark(#a61f1f, #b42323);
  --suite-on-danger-solid: #ffffff;
  --suite-success-on-inverse: light-dark(#4ade80, #166534);
  --suite-warning-on-inverse: light-dark(#fbbf24, #92400e);
  --suite-danger-on-inverse: light-dark(#f87171, #b91c1c);
  --suite-info-on-inverse: light-dark(#7cb2ff, #1d4ed8);
  --suite-idle: var(--suite-gray-7);
  --suite-diff-insert-bg: light-dark(#dcf3e3, #12351f);
  --suite-diff-delete-bg: light-dark(#fbe3e3, #3d1515);

  --suite-brand-ring: light-dark(rgb(0 0 0 / 0.10), rgb(255 255 255 / 0.12));
  --suite-image-ring: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08));

  /* The entry panel's circle at an approval: it sits on the inverse ground, so each product takes the opposite theme's base. */
  --suite-entry-approve-outreach: light-dark(#818cf8, #4338ca);
  --suite-entry-approve-social: light-dark(#f472b6, #be185d);
  --suite-entry-approve-studio: light-dark(#2dd4bf, #0f766e);

  --suite-identity-indigo: light-dark(#4338ca, #818cf8);
  --suite-identity-indigo-soft: light-dark(#eef0ff, #1c1a45);
  --suite-identity-pink: light-dark(#be185d, #f472b6);
  --suite-identity-pink-soft: light-dark(#fdf0f6, #3a0f24);
  --suite-identity-teal: light-dark(#0f766e, #2dd4bf);
  --suite-identity-teal-soft: light-dark(#ebf8f6, #0a2b28);
  --suite-identity-violet: light-dark(#6d28d9, #a78bfa);
  --suite-identity-violet-soft: light-dark(#f4f0fe, #25174a);
  --suite-identity-cyan: light-dark(#0e7490, #22d3ee);
  --suite-identity-cyan-soft: light-dark(#ebf7fa, #0a2830);
  --suite-identity-orange: light-dark(#b9400b, #fb923c);
  --suite-identity-orange-soft: light-dark(#fdf3ec, #35190a);
  --suite-identity-lime: light-dark(#4d7c0f, #a3e635);
  --suite-identity-lime-soft: light-dark(#f2f8e8, #1c2a0a);
  --suite-identity-fuchsia: light-dark(#a21caf, #e879f9);
  --suite-identity-fuchsia-soft: light-dark(#fbf0fc, #331038);
  --suite-identity-graphite: light-dark(#525252, #a3a3a3);
  --suite-identity-graphite-soft: light-dark(#f4f4f4, #1a1a1a);
  --suite-identity-on: light-dark(#ffffff, #0a0a0a);

  --suite-product-outreach: var(--suite-identity-indigo);
  --suite-product-outreach-soft: var(--suite-identity-indigo-soft);
  --suite-product-outreach-on: var(--suite-identity-on);
  --suite-product-social: var(--suite-identity-pink);
  --suite-product-social-soft: var(--suite-identity-pink-soft);
  --suite-product-social-on: var(--suite-identity-on);
  --suite-product-studio: var(--suite-identity-teal);
  --suite-product-studio-soft: var(--suite-identity-teal-soft);
  --suite-product-studio-on: var(--suite-identity-on);
  --suite-product-operator: var(--suite-identity-graphite);
  --suite-product-operator-soft: var(--suite-identity-graphite-soft);
  --suite-product-operator-on: var(--suite-identity-on);

  --suite-chart-comparison: var(--suite-gray-7);
  --suite-chart-grid: var(--suite-border);
  --suite-chart-axis: var(--suite-border-control);
  --suite-chart-1: light-dark(#2a78d6, #3987e5);
  --suite-chart-2: light-dark(#eb6834, #d95926);
  --suite-chart-3: light-dark(#05a873, #199e70);
  --suite-chart-4: light-dark(#cd8300, #c98500);
  --suite-chart-5: light-dark(#dc709a, #d55181);
  --suite-chart-6: light-dark(#008300, #009a00);

  --suite-shadow-raised: 0 1px 2px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.5)), 0 2px 8px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
  --suite-shadow-overlay: 0 1px 2px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4)), 0 8px 24px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.5));
}
/* The station: [data-product] picks the product's identity. Roles that read it are declared in the same rules so they resolve per product. */
:root, [data-product] {
  --suite-product: var(--suite-text);
  --suite-product-soft: var(--suite-fill-hover);
  --suite-product-on: var(--suite-on-primary);
  --suite-chart-primary: var(--suite-product);
}
[data-product="outreach"] { --suite-product: var(--suite-product-outreach); --suite-product-soft: var(--suite-product-outreach-soft); --suite-product-on: var(--suite-product-outreach-on); }
[data-product="social"] { --suite-product: var(--suite-product-social); --suite-product-soft: var(--suite-product-social-soft); --suite-product-on: var(--suite-product-social-on); }
[data-product="studio"] { --suite-product: var(--suite-product-studio); --suite-product-soft: var(--suite-product-studio-soft); --suite-product-on: var(--suite-product-studio-on); }
[data-product="operator"] { --suite-product: var(--suite-product-operator); --suite-product-soft: var(--suite-product-operator-soft); --suite-product-on: var(--suite-product-operator-on); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
::selection { background: var(--suite-selection); }
/* Room: gutters, gaps, padding, rows and widths (section 4). Values step down under 1280 and under 768; density rebinds the rows. */
:root {
  --suite-gutter: 32px;
  --suite-page-top: 32px;
  --suite-page-bottom: 64px;
  --suite-section-gap: 40px;
  --suite-card-gap: 24px;
  --suite-card-pad: 24px;
  --suite-card-head-gap: 16px;
  --suite-form-gap: 24px;
  --suite-overview-gap: 32px;
  --suite-row: 3rem;
  --suite-row-dense: 2.75rem;
  --suite-row-2: 4rem;
  --suite-control-hero: 3rem;
  --suite-post-chip-h: 1.5rem;
  --suite-overview-w: 1120px;
  --suite-aside: clamp(320px, 25vw, 336px);
  --suite-focus-w: 560px;
  --suite-split-w: 1040px;
  --suite-split-aside: 400px;
  --suite-brand-card-min: 320px;
  --suite-drawer-lg: 560px;
  --suite-cal-day-h: 128px;
}
@media (max-width: 1279px) {
  :root { --suite-gutter: 24px; --suite-section-gap: 32px; }
}
@media (max-width: 767px) {
  :root { --suite-gutter: 16px; --suite-page-top: 16px; --suite-page-bottom: 40px; --suite-section-gap: 24px; --suite-card-gap: 16px; --suite-card-pad: 16px; --suite-form-gap: 16px; }
}

/* Type, space, size, elevation and motion roles (docs/DESIGN-SYSTEM-SUITE.md sections 3 and 4). Sizes that scale with the browser default are in rem. */
:root {
  --suite-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif;
  --suite-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --suite-type-12: 0.75rem; --suite-leading-16: 1rem;
  --suite-type-13: 0.8125rem; --suite-leading-20: 1.25rem;
  --suite-type-14: 0.875rem; --suite-leading-22: 1.375rem;
  --suite-type-16: 1rem; --suite-leading-24: 1.5rem;
  --suite-type-20: 1.25rem; --suite-leading-28: 1.75rem;
  --suite-type-24: 1.5rem; --suite-leading-32: 2rem;
  --suite-type-28: 1.75rem; --suite-leading-36: 2.25rem;
  --suite-weight-regular: 400; --suite-weight-medium: 500; --suite-weight-semibold: 600;
  --suite-measure: 68ch;

  --suite-space-half: 2px; --suite-space-1: 4px; --suite-space-2: 8px; --suite-space-3: 12px; --suite-space-4: 16px; --suite-space-5: 20px;
  --suite-space-6: 24px; --suite-space-8: 32px; --suite-space-10: 40px; --suite-space-12: 48px; --suite-space-16: 64px;
  --suite-border-width: 1px; --suite-ring-width: 2px;

  --suite-radius-sm: 4px; --suite-radius-md: 6px; --suite-radius-lg: 8px; --suite-radius-xl: 12px; --suite-radius-full: 999px;

  --suite-control-xs: 1.25rem; --suite-control-sm: 1.75rem; --suite-control-md: 2rem; --suite-control-lg: 2.25rem; --suite-control-xl: 2.5rem; --suite-touch: 2.75rem;
  --suite-row-inbox: 4rem;
  --suite-icon-12: 0.75rem; --suite-icon-16: 1rem; --suite-icon-20: 1.25rem; --suite-icon-24: 1.5rem;
  --suite-chip-h: 1.25rem; --suite-switch-w: 2rem;

  --suite-rail: 15rem; --suite-rail-collapsed: 3.5rem; --suite-topbar: 3rem;
  --suite-tabbar: 3.5rem; --suite-tabbar-total: calc(var(--suite-tabbar) + env(safe-area-inset-bottom));
  --suite-panel: 400px; --suite-settings-nav: 200px; --suite-list-pane: 360px;
  --suite-content-w: 1440px; --suite-reading-w: 720px; --suite-form-w: 640px; --suite-field-w: 480px; --suite-search-w: 240px;
  --suite-menu-w: 220px; --suite-toast-w: 360px; --suite-gate-w: 400px;
  --suite-dialog-sm: 400px; --suite-dialog-md: 560px; --suite-dialog-lg: 720px; --suite-drawer-w: 480px; --suite-drawer-sm: 280px; --suite-guide-w: 320px;
  --suite-palette-w: 560px; --suite-tooltip-w: 280px;
  --suite-logo-lg: 48px; --suite-tile-lg: 56px;
  --suite-card-min: 280px; --suite-pane-min: 560px; --suite-details-w: 280px; --suite-switcher-menu-w: 320px;
  --suite-sparkline-w: 96px; --suite-sparkline-h: 32px;
  --suite-textarea-min: 96px; --suite-embed-min: 480px; --suite-cal-cell: 64px; --suite-cal-label: 56px;

  /* A toast sits --suite-toast-inset from the content edge; on a phone it clears the tab bar and the device safe area. */
  --suite-toast-inset: var(--suite-space-4);
  --suite-banner-h: 0px;
  --suite-banner-clearance: 0px;
  --suite-toast-bottom: calc(var(--suite-toast-inset) + env(safe-area-inset-bottom));
  --suite-toast-bottom-phone: calc(var(--suite-tabbar-total) + var(--suite-toast-inset));
  --suite-cue-clear: calc(var(--suite-control-sm) + var(--suite-space-2));

  --suite-z-sticky: 10; --suite-z-actionbar: 20; --suite-z-menu: 30; --suite-z-tray: 35; --suite-z-scrim: 40;
  --suite-z-drawer: 50; --suite-z-modal: 60; --suite-z-toast: 70; --suite-z-skip: 80;

  --suite-duration-fast: 120ms; --suite-duration-base: 200ms; --suite-duration-slow: 300ms;
  --suite-ease-out: cubic-bezier(.2, .7, .2, 1); --suite-ease-in: cubic-bezier(.4, 0, 1, 1);
  /* How long a transient message stays. Not motion: reduced motion does not change them. */
  --suite-toast-ms: 5000ms; --suite-toast-action-ms: 8000ms; --suite-confirm-ms: 2200ms;
}

/* Existing names, each an alias of the role that replaces it (docs/DESIGN-SYSTEM-SUITE.md section 2.10). Component lanes rename their
   references to the --suite-* names; the aliases are removed once no file reads them. */
:root {
  --canvas: var(--suite-bg);
  --surface: var(--suite-surface);
  --surface-2: var(--suite-surface-subtle);
  --surface-3: var(--suite-fill-selected);
  --surface-overlay: var(--suite-surface-overlay);
  --text: var(--suite-text);
  --text-2: var(--suite-text-secondary);
  --text-3: var(--suite-text-tertiary);
  --line: var(--suite-border);
  --line-control: var(--suite-border-control);
  --accent: var(--suite-primary);
  --accent-hover: var(--suite-primary-hover);
  --accent-text: var(--suite-on-primary);
  --accent-subtle: var(--suite-fill-selected);
  --accent-subtle-hover: var(--suite-fill-hover);
  --accent-ink: var(--suite-text);
  --tint-accent: var(--suite-fill-selected);
  --focus-ring: var(--suite-focus);
  --ok: var(--suite-success-fg);
  --warn: var(--suite-warning-fg);
  --danger: var(--suite-danger-fg);
  --info: var(--suite-info-fg);
  --tint-ok: var(--suite-success-bg);
  --tint-warn: var(--suite-warning-bg);
  --tint-danger: var(--suite-danger-bg);
  --tint-info: var(--suite-info-bg);
  --idle: var(--suite-idle);
  --tint-idle: var(--suite-fill-hover);
  --tint-agent: var(--suite-fill-hover);
  --tint-model: var(--suite-fill-hover);
  --agent: var(--suite-text-secondary);
  --model: var(--suite-text-secondary);
  --outreach: var(--suite-product-outreach);
  --social: var(--suite-product-social);
  --studio: var(--suite-product-studio);
  --product: var(--suite-product);
  --tint-product: var(--suite-product-soft);
  --ok-on-inverse: var(--suite-success-on-inverse);
  --warn-on-inverse: var(--suite-warning-on-inverse);
  --danger-on-inverse: var(--suite-danger-on-inverse);
  --info-on-inverse: var(--suite-info-on-inverse);
  --chart-1: var(--suite-chart-1); --chart-2: var(--suite-chart-2); --chart-3: var(--suite-chart-3);
  --chart-4: var(--suite-chart-4); --chart-5: var(--suite-chart-5); --chart-6: var(--suite-chart-6);
  --scrim: var(--suite-scrim);
  --shadow-raised: var(--suite-shadow-raised);
  --shadow-overlay: var(--suite-shadow-overlay);
  --shadow-pop: var(--suite-shadow-overlay);
  --toggle-knob-shadow: none;

  --font: var(--suite-font);
  --mono: var(--suite-font-mono);
  --t-sm: var(--suite-type-12); --lh-sm: var(--suite-leading-16);
  --t-lg: var(--suite-type-14); --lh-lg: var(--suite-leading-22);
  --t-xl: var(--suite-type-16); --lh-xl: var(--suite-leading-24);
  --t-2xl: var(--suite-type-20); --lh-2xl: var(--suite-leading-28);
  --measure: var(--suite-measure);
  --w-regular: var(--suite-weight-regular); --w-medium: var(--suite-weight-medium); --w-semibold: var(--suite-weight-semibold);
  --px-1: var(--suite-border-width); --px-2: var(--suite-ring-width);
  --i-xs: var(--suite-icon-12); --i-md: var(--suite-icon-16);
  --s-1: var(--suite-space-1); --s-2: var(--suite-space-2); --s-3: var(--suite-space-3); --s-4: var(--suite-space-4); --s-5: var(--suite-space-5);
  --s-6: var(--suite-space-6); --s-8: var(--suite-space-8); --s-10: var(--suite-space-10); --s-12: var(--suite-space-12); --s-16: var(--suite-space-16);
  --r-full: var(--suite-radius-full);
  --w-reading: var(--suite-reading-w); --w-content: var(--suite-content-w);
  --w-drawer: var(--suite-drawer-sm);
  --h-field-area: var(--suite-textarea-min); --h-embed-min: var(--suite-embed-min); --h-cal-cell: var(--suite-cal-cell);
  --w-cal-label: var(--suite-cal-label); --mark-lg: var(--suite-logo-lg); --kind-lg: var(--suite-tile-lg);
  --z-sticky: var(--suite-z-sticky); --z-actionbar: var(--suite-z-actionbar); --z-menu: var(--suite-z-menu); --z-tray: var(--suite-z-tray);
  --z-scrim: var(--suite-z-scrim); --z-drawer: var(--suite-z-drawer); --z-modal: var(--suite-z-modal); --z-toast: var(--suite-z-toast); --z-skip: var(--suite-z-skip);
  --m-fast: var(--suite-duration-fast); --m-base: var(--suite-duration-base); --ease: var(--suite-ease-out);

  /* Names whose value the spec changes, and whose consumers still expect today's size, keep it until the lane that owns the consumer
     renames the reference: type and control sizes in rem that layout tests pin, the radius family, panel and toast widths, and the layout bands. */
  --t-xs: 0.6875rem; --lh-xs: 1rem;
  --t-md: 0.8125rem; --lh-md: 1.25rem;
  --t-3xl: 1.75rem; --lh-3xl: 2.25rem;
  --px-3: 3px; --px-6: 6px; --px-18: 18px; --px-22: 22px;
  --i-sm: 0.875rem; --i-lg: 1.25rem;
  --radius: 8px;
  --r-sm: calc(var(--radius) / 2); --r-md: var(--radius); --r-lg: calc(var(--radius) * 1.5);
  --h-sm: 1.75rem; --h-md: 2rem; --h-lg: 2.5rem; --h-touch: 2.75rem;
  --row: 2.25rem;
  --sidebar: 14.5rem; --rail: 64px; --topbar: 3.25rem; --panel: 420px; --tabbar: 4rem; --tabbar-total: calc(var(--tabbar) + env(safe-area-inset-bottom));
  --w-tray: var(--panel); --w-toast: 480px;
  --toast-inset: var(--s-4);
  --notify-banner-h: 0px;
  --toast-bottom: calc(var(--toast-inset) + env(safe-area-inset-bottom));
  --toast-bottom-phone: calc(var(--tabbar-total) + var(--toast-inset));
  --cue-clear: calc(var(--h-sm) + var(--s-2));
  --w-gate: 420px; --w-form: 520px; --w-sheet: 560px; --w-menu: 16.25rem; --w-field: 220px;
  --h-wash: 160px; --blur: 8px;
  --toggle-w: 34px;
  --m-slow: 360ms;
  /* The notification defaults in src/notify/toast.ts equal these, and a test ties them. */
  --dur-toast: 6000ms; --dur-toast-action: 10000ms; --dur-confirm: 2200ms;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The legacy product names resolve where the station is declared, so they follow [data-product] on the page, the body or a module host. */
:root, [data-product] { --product: var(--suite-product); --tint-product: var(--suite-product-soft); }

/* Platform logos in their owners' colours, the same in both themes, as Social's --g-* tokens. A black logo (X, Threads, TikTok)
   takes --suite-text, so it turns white in dark. */
:root {
  --suite-glyph-linkedin: #0a66c2; --suite-glyph-facebook: #0866ff; --suite-glyph-instagram: #e4405f; --suite-glyph-youtube: #ff0000;
  --suite-glyph-bluesky: #1185fe; --suite-glyph-pinterest: #e60023; --suite-glyph-gbp: #4285f4;
}

/* The module container re-exports the Suite's tokens under the host names, resolved at the container so they follow the theme.
   --suite-* inherits into a module's shadow root; the --host-* names remain for one release so the external Studio keeps rendering. */
.module-host {
  --host-canvas: var(--suite-bg); --host-surface: var(--suite-surface); --host-surface-2: var(--suite-surface-subtle);
  --host-text: var(--suite-text); --host-text-2: var(--suite-text-secondary); --host-text-3: var(--suite-text-tertiary);
  --host-line: var(--suite-border); --host-line-control: var(--suite-border-control); --host-surface-3: var(--suite-fill-selected); --host-surface-overlay: var(--suite-surface-overlay);
  --host-accent: var(--suite-primary); --host-accent-hover: var(--suite-primary-hover); --host-accent-subtle: var(--suite-fill-selected); --host-accent-ink: var(--suite-text);
  --host-accent-text: var(--suite-on-primary); --host-focus-ring: var(--suite-focus);
  --host-ok: var(--suite-success-fg); --host-warn: var(--suite-warning-fg); --host-danger: var(--suite-danger-fg); --host-agent: var(--suite-text-secondary); --host-info: var(--suite-info-fg);
  --host-tint-ok: var(--suite-success-bg); --host-tint-warn: var(--suite-warning-bg); --host-tint-danger: var(--suite-danger-bg); --host-tint-agent: var(--suite-fill-hover); --host-tint-info: var(--suite-info-bg);
  --host-m-fast: var(--suite-duration-fast); --host-m-base: var(--suite-duration-base); --host-ease: var(--suite-ease-out); --host-dur-confirm: var(--suite-confirm-ms);
  --host-font: var(--suite-font); --host-mono: var(--suite-font-mono);
  --host-t-md: var(--suite-type-13); --host-lh-md: var(--suite-leading-20); --host-t-sm: var(--suite-type-12); --host-t-lg: var(--suite-type-14);
  --host-r-sm: var(--suite-radius-sm); --host-r-md: var(--suite-radius-md); --host-r-lg: var(--suite-radius-xl);
  --host-h-md: var(--suite-control-md); --host-row: var(--suite-row); --host-shadow-pop: var(--suite-shadow-overlay); --host-shadow-raised: var(--suite-shadow-raised); --host-shadow-overlay: var(--suite-shadow-overlay); --host-scrim: var(--suite-scrim);
}

/* Density is chosen per person and set on the shell. It rebinds the row and medium control heights and nothing else; the existing names
   are rebound with them because an alias resolves where it is declared. */
[data-density="compact"] { --suite-row: 2.5rem; --suite-row-dense: 2.25rem; --suite-control-md: 1.75rem; --row: 2.5rem; --h-md: 1.75rem; }
[data-density="comfortable"] { --suite-row: 3.5rem; --suite-row-dense: 3.25rem; --suite-control-md: 2.25rem; --row: 3.5rem; --h-md: 2.25rem; }

/* A phone forces touch sizes whatever the density. */
@media (max-width: 767px) {
  :root, [data-density] {
    --suite-row: 3.25rem; --suite-row-dense: 3.25rem; --suite-row-2: 4rem; --suite-row-inbox: 4.5rem; --suite-control-md: var(--suite-touch);
    --row: 3.25rem; --h-md: var(--h-touch);
  }
}

/* Higher contrast raises the secondary and tertiary text, the control edge and the hairline one notch. */
@media (prefers-contrast: more) {
  :root {
    --suite-text-secondary: light-dark(#404040, #c4c4c4);
    --suite-text-tertiary: light-dark(#525252, #b0b0b0);
    --suite-border-control: light-dark(#666666, #8f8f8f);
    --suite-border: var(--suite-gray-5);
  }
}

/* Reduced motion zeroes every duration; the pending spinner keeps turning because it is the only cue that work is in progress. */
@media (prefers-reduced-motion: reduce) {
  :root { --suite-duration-fast: 0ms; --suite-duration-base: 0ms; --suite-duration-slow: 0ms; --m-slow: 0ms; }
}