/* @affinda/wc@0.8.0 @affinda/tokens@0.4.0 @affinda/css@0.2.0: tokens and css combined by scripts/vendor-brand.sh */
:root {
  --colour-brand-mist-green: #C6D5D1;
  --colour-brand-inkwell: #14343B;
  --colour-brand-soft-clay: #B09670;
  --colour-brand-white: #FFFFFF;
  --colour-brand-ivory-paper: #FFF9EE;
  --colour-brand-azure: #7FE2D4;
  --colour-brand-ice: #A6FFF8;
  --colour-tints-mist-green-50: #f9fbfa;
  --colour-mistgreen-50: #f9fbfa;
  --colour-tints-mist-green-100: #f4f7f6;
  --colour-mistgreen-100: #f4f7f6;
  --colour-tints-mist-green-200: #e8eeed;
  --colour-mistgreen-200: #e8eeed;
  --colour-tints-mist-green-300: #dde6e3;
  --colour-mistgreen-300: #dde6e3;
  --colour-tints-mist-green-400: #d1ddda;
  --colour-mistgreen-400: #d1ddda;
  --colour-tints-mist-green-500: #c6d5d1;
  --colour-mistgreen-500: #c6d5d1;
  --colour-tints-mist-green-600: #b2c0bc;
  --colour-mistgreen-600: #b2c0bc;
  --colour-tints-mist-green-700: #9eaaa7;
  --colour-mistgreen-700: #9eaaa7;
  --colour-tints-inkwell-20: #f9fafa;
  --colour-inkwell-20: #f9fafa;
  --colour-tints-inkwell-30: #f3f5f5;
  --colour-inkwell-30: #f3f5f5;
  --colour-tints-inkwell-40: #edf0f0;
  --colour-inkwell-40: #edf0f0;
  --colour-tints-inkwell-50: #e8ebeb;
  --colour-inkwell-50: #e8ebeb;
  --colour-tints-inkwell-100: #d0d6d8;
  --colour-inkwell-100: #d0d6d8;
  --colour-tints-inkwell-200: #a1aeb1;
  --colour-inkwell-200: #a1aeb1;
  --colour-tints-inkwell-300: #728589;
  --colour-inkwell-300: #728589;
  --colour-tints-inkwell-350: #60767b;
  --colour-inkwell-350: #60767b;
  --colour-tints-inkwell-400: #2b484f;
  --colour-inkwell-400: #2b484f;
  --colour-tints-inkwell-450: #203e45;
  --colour-inkwell-450: #203e45;
  --colour-tints-inkwell-500: #14343b;
  --colour-inkwell-500: #14343b;
  --colour-tints-inkwell-600: #102a2f;
  --colour-inkwell-600: #102a2f;
  --colour-tints-inkwell-700: #102a2f;
  --colour-inkwell-700: #102a2f;
  --colour-tints-soft-clay-50: #f7f5f1;
  --colour-softclay-50: #f7f5f1;
  --colour-tints-soft-clay-100: #efeae2;
  --colour-softclay-100: #efeae2;
  --colour-tints-soft-clay-200: #dfd5c6;
  --colour-softclay-200: #dfd5c6;
  --colour-tints-soft-clay-300: #d0c0a9;
  --colour-softclay-300: #d0c0a9;
  --colour-tints-soft-clay-400: #c0ab8d;
  --colour-softclay-400: #c0ab8d;
  --colour-tints-soft-clay-500: #b09670;
  --colour-softclay-500: #b09670;
  --colour-tints-soft-clay-600: #9e8765;
  --colour-softclay-600: #9e8765;
  --colour-tints-soft-clay-700: #8d785a;
  --colour-softclay-700: #8d785a;
  --colour-tints-soft-clay-800: #8a7049;
  --colour-softclay-800: #8a7049;
  --colour-tints-ice-50: #f6ffff;
  --colour-ice-50: #f6ffff;
  --colour-tints-ice-100: #edfffe;
  --colour-ice-100: #edfffe;
  --colour-tints-ice-200: #dbfffd;
  --colour-ice-200: #dbfffd;
  --colour-tints-ice-300: #cafffd;
  --colour-ice-300: #cafffd;
  --colour-tints-ice-400: #b8fffc;
  --colour-ice-400: #b8fffc;
  --colour-tints-ice-500: #a6fffb;
  --colour-ice-500: #a6fffb;
  --colour-tints-ice-600: #95e6e2;
  --colour-ice-600: #95e6e2;
  --colour-tints-ice-700: #85ccc9;
  --colour-ice-700: #85ccc9;
  --colour-typography-heading-primary: #14343B;
  --colour-typography-heading-secondary: #B09670;
  --colour-typography-body-dark: #14343B;
  --colour-typography-body-default: #14343B;
  --colour-typography-body-subtle: #708380;
  --colour-background-mist-green: #C6D5D1;
  --colour-background-inkwell: #14343B;
  --colour-background-soft-clay: #B09670;
  --colour-background-white: #FFFFFF;
  --colour-background-ivory-paper: #FFF9EE;
  --colour-background-level1: #E8EEED;
  --colour-ui-mist-green: #C6D5D1;
  --colour-ui-inkwell: #14343B;
  --colour-ui-soft-clay: #B09670;
  --colour-ui-white: #FFFFFF;
  --colour-ui-ivory-paper: #FFF9EE;
  --colour-ui-azure: #7FE2D4;
  --colour-ui-ice: #A6FFF8;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --border-radius-card-level-1: var(--radius-2xl);
  --shadow-sm: 0 1px 2px rgba(20, 52, 59, 0.08);
  --shadow-md: 1px 2px 4px rgba(20, 52, 59, 0.2);
  --shadow-lift: 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08);
  --shadow-navbar: 0 4px 24px rgba(20, 52, 59, 0.12);
  --status-ok: #3E8F6E;
  --status-issue: #B94A3B;
  --status-warning: #9e8765;
  --status-info: #7FE2D4;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --typography-headingfont: 'Neusans-Optimized', 'NeuSans', Arial, sans-serif;
  --typography-bodyfont: 'Neusans-Optimized', 'NeuSans', Arial, sans-serif;
  --typography-sansfont: 'Neusans-Optimized', 'NeuSans', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-book: 500;
  --font-weight-semibold: 600;
  --font-size-heading-1-desktop: 56px;
  --font-size-heading-1-mobile: 38px;
  --font-size-heading-2-desktop: 44px;
  --font-size-heading-2-mobile: 32px;
  --font-size-heading-3-desktop: 34px;
  --font-size-heading-3-mobile: 25px;
  --font-size-heading-4-desktop: 24px;
  --font-size-heading-4-mobile: 20px;
  --font-size-heading-5-desktop: 20px;
  --font-size-heading-5-mobile: 18px;
  --font-size-heading-xl-desktop: 80px;
  --font-size-heading-xl-mobile: 50px;
  --font-size-heading-card-desktop: 22px;
  --font-size-heading-card-mobile: 20px;
  --font-size-body-xlarge: 22px;
  --font-size-body-large: 18px;
  --font-size-body-medium: 16px;
  --font-size-body-small: 14px;
  --font-size-label-button: 17px;
  --font-size-label-tag: 14px;
  --line-height-heading-3: 38px;
  --line-height-heading-4: 30px;
  --line-height-heading-5: 24px;
  --line-height-heading-tight: 1;
  --line-height-heading-normal: 1.1;
  --line-height-heading-relaxed: 1.2;
  --line-height-heading-card: 28px;
  --line-height-body-xlarge: 28px;
  --line-height-body-large: 26px;
  --line-height-body-medium: 24px;
  --line-height-body-small: 20px;
  --line-height-label-button: 20px;
  --line-height-label-tag: 1;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-body: 0;
  --grid-xlarge-breakpoint: 1440px;
  --grid-xlarge-columns: 12;
  --grid-xlarge-margin: 80px;
  --grid-xlarge-gutter: 24px;
  --grid-xlarge-max-width: 1440px;
  --grid-large-breakpoint: 1024px;
  --grid-large-columns: 12;
  --grid-large-margin: 64px;
  --grid-large-gutter: 16px;
  --grid-large-max-width: 1024px;
  --grid-medium-breakpoint: 768px;
  --grid-medium-columns: 6;
  --grid-medium-margin: 32px;
  --grid-medium-gutter: 16px;
  --grid-medium-max-width: 768px;
  --grid-small-breakpoint: 375px;
  --grid-small-columns: 4;
  --grid-small-margin: 20px;
  --grid-small-gutter: 16px;
  --grid-small-max-width: 100%;
  --grid-xsmall-breakpoint: 320px;
  --grid-xsmall-columns: 4;
  --grid-xsmall-margin: 16px;
  --grid-xsmall-gutter: 16px;
  --grid-xsmall-max-width: 100%;
  --icon-size-small: 16px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
  --icon-badge-size: 48px;
  --illustration-size: 432px;
  --typography-primaryfont: var(--typography-bodyfont);
  --af-font-family-sans: var(--typography-bodyfont);
  --af-font-weight-regular: var(--font-weight-regular);
  --af-size-font-md: var(--font-size-body-small);
  --af-line-height-font-md: var(--line-height-body-small);
  --af-color-fg-default: var(--colour-typography-body-default);
  --af-color-bg-surface: var(--colour-background-white);
  --af-color-brand-primary-500: var(--colour-brand-inkwell);
}
/**
 * Affinda Theme Token Definitions
 *
 * Each theme defines scoped CSS custom properties that components inherit.
 * Themes: white, inkwell, mist-green, soft-clay
 *
 * Based on Figma token export.
 *
 * NOTE: The canonical Figma tint ladders (`--colour-mistgreen-*`,
 * `--colour-inkwell-*`, `--colour-softclay-*`, `--colour-ice-*`) are now
 * emitted by `tokens.css` directly from `src/tokens.json`. Consumers get
 * correct colours from `@affinda/tokens/tokens.css` alone — importing this
 * file is only necessary if you want the theme-scoped (`.theme-*`) rules
 * below.
 */

/* ==========================================================================
   WHITE THEME
   ========================================================================== */

.theme-white,
.top-theme-white {
  /* Background */
  --af-background-base: var(--colour-brand-white);
  --af-background-base-hover: var(--colour-mistgreen-100);
  --af-background-contrast: var(--colour-brand-mist-green);
  --af-background-level-1: var(--colour-mistgreen-200);
  --af-background-level-1-hover: var(--colour-mistgreen-300);
  --af-background-soft-clay: var(--colour-brand-soft-clay);
  --af-background-ivory-paper: var(--colour-brand-ivory-paper);
  --af-background-mist-green: var(--colour-brand-mist-green);
  
  /* Borders */
  --af-background-border-subtle: var(--colour-mistgreen-200);
  --af-background-border-default: var(--colour-mistgreen-400);
  --af-background-border-heavy: var(--colour-mistgreen-500);
  --af-background-border-active: var(--colour-softclay-800);
  
  /* Scrollbar: no track, a faint thumb in the surface's own text colour */
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
  
  /* Icons */
  --af-background-icon-default: var(--colour-brand-inkwell);
  --af-background-icon-accent: var(--colour-brand-soft-clay);
  --af-background-client-logo: var(--colour-brand-inkwell);
  
  /* Misc */
  --af-background-watermark: rgba(20, 52, 59, 0.04);
  --af-background-toggle: rgba(255, 255, 255, 0.6);
  
  /* Typography */
  --af-typography-heading-primary: var(--colour-brand-inkwell);
  --af-typography-heading-secondary: var(--colour-brand-soft-clay);
  --af-typography-body-dark: var(--colour-brand-inkwell);
  --af-typography-body-default: var(--colour-inkwell-400);
  --af-typography-body-subtle: var(--colour-inkwell-350);
  --af-typography-nav-item-primary: var(--colour-brand-inkwell);
  --af-typography-nav-item-secondary: var(--colour-inkwell-400);
  --af-typography-footer-item-primary: var(--colour-inkwell-350);
  --af-typography-footer-item-hover: var(--colour-brand-inkwell);
  
  /* Button - Primary (same across all themes) */
  --af-button-primary-text: var(--colour-brand-inkwell);
  --af-button-primary-icon: var(--colour-brand-inkwell);
  --af-button-primary-bg: var(--colour-brand-ice);
  --af-button-primary-bg-hover: var(--colour-ice-600);
  --af-button-primary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Secondary */
  --af-button-secondary-text: var(--colour-brand-inkwell);
  --af-button-secondary-icon: var(--colour-brand-inkwell);
  --af-button-secondary-bg: transparent;
  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);
  --af-button-secondary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Tertiary */
  --af-button-tertiary-text: var(--colour-brand-inkwell);
  --af-button-tertiary-icon: var(--colour-brand-inkwell);
  --af-button-tertiary-stroke: var(--colour-brand-soft-clay);
}

/* ==========================================================================
   INKWELL THEME (Dark)
   ========================================================================== */

.theme-inkwell,
.top-theme-inkwell {
  /* Background */
  --af-background-base: var(--colour-brand-inkwell);
  --af-background-base-hover: var(--colour-inkwell-600);
  --af-background-contrast: var(--colour-inkwell-700);
  --af-background-level-1: var(--colour-inkwell-450);
  --af-background-level-1-hover: var(--colour-inkwell-400);
  --af-background-soft-clay: var(--colour-brand-soft-clay);
  --af-background-ivory-paper: var(--colour-brand-ivory-paper);
  --af-background-mist-green: var(--colour-brand-mist-green);
  
  /* Borders */
  --af-background-border-subtle: var(--colour-inkwell-450);
  --af-background-border-default: var(--colour-inkwell-400);
  --af-background-border-heavy: var(--colour-inkwell-700);
  --af-background-border-active: var(--colour-brand-ice);
  
  /* Scrollbar: no track, a faint thumb in the surface's own text colour */
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
  
  /* Icons */
  --af-background-icon-default: var(--colour-brand-white);
  --af-background-icon-accent: var(--colour-brand-ice);
  --af-background-client-logo: var(--colour-brand-white);
  
  /* Misc */
  --af-background-watermark: rgba(255, 255, 255, 0.06);
  --af-background-toggle: #14343b;
  
  /* Typography */
  --af-typography-heading-primary: var(--colour-brand-mist-green);
  --af-typography-heading-secondary: var(--colour-brand-white);
  --af-typography-body-dark: var(--colour-brand-white);
  --af-typography-body-default: var(--colour-inkwell-100);
  --af-typography-body-subtle: var(--colour-inkwell-200);
  --af-typography-nav-item-primary: var(--colour-brand-white);
  --af-typography-nav-item-secondary: var(--colour-inkwell-100);
  --af-typography-footer-item-primary: var(--colour-inkwell-200);
  --af-typography-footer-item-hover: var(--colour-brand-white);
  
  /* Button - Primary (same across all themes) */
  --af-button-primary-text: var(--colour-brand-inkwell);
  --af-button-primary-icon: var(--colour-brand-inkwell);
  --af-button-primary-bg: var(--colour-brand-ice);
  --af-button-primary-bg-hover: var(--colour-ice-600);
  --af-button-primary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Secondary */
  --af-button-secondary-text: var(--colour-brand-white);
  --af-button-secondary-icon: var(--colour-brand-white);
  --af-button-secondary-bg: transparent;
  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
  --af-button-secondary-stroke: var(--colour-brand-white);
  
  /* Button - Tertiary */
  --af-button-tertiary-text: var(--colour-brand-white);
  --af-button-tertiary-icon: var(--colour-brand-white);
  --af-button-tertiary-stroke: var(--colour-brand-ice);
}

/* ==========================================================================
   MIST-GREEN THEME
   ========================================================================== */

.theme-mist-green,
.top-theme-mist-green {
  /* Background */
  --af-background-base: var(--colour-brand-mist-green);
  --af-background-base-hover: var(--colour-mistgreen-600);
  --af-background-contrast: var(--colour-brand-soft-clay);
  --af-background-level-1: var(--colour-mistgreen-300);
  --af-background-level-1-hover: var(--colour-mistgreen-400);
  --af-background-soft-clay: var(--colour-brand-soft-clay);
  --af-background-ivory-paper: var(--colour-brand-ivory-paper);
  --af-background-mist-green: var(--colour-brand-mist-green);
  
  /* Borders */
  --af-background-border-subtle: var(--colour-mistgreen-600);
  --af-background-border-default: var(--colour-mistgreen-700);
  --af-background-border-heavy: var(--colour-mistgreen-700);
  --af-background-border-active: var(--colour-softclay-800);
  
  /* Scrollbar: no track, a faint thumb in the surface's own text colour */
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
  
  /* Icons */
  --af-background-icon-default: var(--colour-brand-inkwell);
  --af-background-icon-accent: var(--colour-brand-soft-clay);
  --af-background-client-logo: var(--colour-brand-inkwell);
  
  /* Misc */
  --af-background-watermark: var(--colour-mistgreen-400);
  --af-background-toggle: rgba(255, 255, 255, 0.6);
  
  /* Typography */
  --af-typography-heading-primary: var(--colour-brand-inkwell);
  --af-typography-heading-secondary: var(--colour-brand-soft-clay);
  --af-typography-body-dark: var(--colour-brand-inkwell);
  --af-typography-body-default: var(--colour-inkwell-400);
  --af-typography-body-subtle: var(--colour-inkwell-350);
  --af-typography-nav-item-primary: var(--colour-brand-inkwell);
  --af-typography-nav-item-secondary: var(--colour-inkwell-400);
  --af-typography-footer-item-primary: var(--colour-inkwell-350);
  --af-typography-footer-item-hover: var(--colour-brand-inkwell);
  
  /* Button - Primary (same across all themes) */
  --af-button-primary-text: var(--colour-brand-inkwell);
  --af-button-primary-icon: var(--colour-brand-inkwell);
  --af-button-primary-bg: var(--colour-brand-ice);
  --af-button-primary-bg-hover: var(--colour-ice-600);
  --af-button-primary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Secondary */
  --af-button-secondary-text: var(--colour-brand-inkwell);
  --af-button-secondary-icon: var(--colour-brand-inkwell);
  --af-button-secondary-bg: transparent;
  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
  --af-button-secondary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Tertiary */
  --af-button-tertiary-text: var(--colour-brand-inkwell);
  --af-button-tertiary-icon: var(--colour-brand-inkwell);
  --af-button-tertiary-stroke: var(--colour-brand-soft-clay);
}

/* ==========================================================================
   SOFT-CLAY THEME
   ========================================================================== */

.theme-soft-clay,
.top-theme-soft-clay {
  /* Background */
  --af-background-base: var(--colour-softclay-400);
  --af-background-base-hover: var(--colour-softclay-500);
  --af-background-contrast: var(--colour-brand-mist-green);
  --af-background-level-1: var(--colour-softclay-500);
  --af-background-level-1-hover: var(--colour-softclay-600);
  --af-background-soft-clay: var(--colour-brand-soft-clay);
  --af-background-ivory-paper: var(--colour-brand-ivory-paper);
  --af-background-mist-green: var(--colour-brand-mist-green);
  
  /* Borders */
  --af-background-border-subtle: var(--colour-softclay-600);
  --af-background-border-default: var(--colour-softclay-700);
  --af-background-border-heavy: var(--colour-brand-inkwell);
  --af-background-border-active: var(--colour-brand-ice);
  
  /* Scrollbar: no track, a faint thumb in the surface's own text colour */
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
  
  /* Icons */
  --af-background-icon-default: var(--colour-brand-inkwell);
  --af-background-icon-accent: var(--colour-brand-ivory-paper);
  --af-background-client-logo: var(--colour-brand-inkwell);
  
  /* Misc */
  --af-background-watermark: rgba(20, 52, 59, 0.06);
  --af-background-toggle: rgba(255, 255, 255, 0.6);
  
  /* Typography */
  --af-typography-heading-primary: var(--colour-brand-inkwell);
  --af-typography-heading-secondary: var(--colour-brand-ivory-paper);
  --af-typography-body-dark: var(--colour-brand-inkwell);
  --af-typography-body-default: var(--colour-inkwell-400);
  --af-typography-body-subtle: var(--colour-inkwell-350);
  --af-typography-nav-item-primary: var(--colour-brand-inkwell);
  --af-typography-nav-item-secondary: var(--colour-inkwell-400);
  --af-typography-footer-item-primary: var(--colour-inkwell-350);
  --af-typography-footer-item-hover: var(--colour-brand-inkwell);
  
  /* Button - Primary (same across all themes) */
  --af-button-primary-text: var(--colour-brand-inkwell);
  --af-button-primary-icon: var(--colour-brand-inkwell);
  --af-button-primary-bg: var(--colour-brand-ice);
  --af-button-primary-bg-hover: var(--colour-ice-600);
  --af-button-primary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Secondary */
  --af-button-secondary-text: var(--colour-brand-inkwell);
  --af-button-secondary-icon: var(--colour-brand-inkwell);
  --af-button-secondary-bg: transparent;
  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
  --af-button-secondary-stroke: var(--colour-brand-inkwell);
  
  /* Button - Tertiary */
  --af-button-tertiary-text: var(--colour-brand-inkwell);
  --af-button-tertiary-icon: var(--colour-brand-inkwell);
  --af-button-tertiary-stroke: var(--colour-brand-inkwell);
}

/* ==========================================================================
   WHITE-IVORY THEME
   ========================================================================== */

.theme-white-ivory,
.top-theme-white-ivory {
  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);
  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);
  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
  --af-background-level-1: var(--colour-ivory-200, #ffefcc);
  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);
  --af-background-soft-clay: var(--colour-brand-soft-clay, #b09670);
  --af-background-ivory-paper: var(--colour-brand-ivory-paper, #fff9ee);
  --af-background-mist-green: var(--colour-brand-mist-green, #c6d5d1);
  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);
  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);
  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);
  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);
  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
  --af-background-client-logo: var(--colour-brand-inkwell, #14343b);
  --af-background-watermark: rgba(20, 52, 59, 0.04);
  --af-background-toggle: rgba(255, 255, 255, 0.6);
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
  --af-typography-nav-item-primary: var(--colour-brand-inkwell, #14343b);
  --af-typography-nav-item-secondary: var(--colour-inkwell-400, #2b484f);
  --af-typography-footer-item-primary: var(--colour-inkwell-350, #60767b);
  --af-typography-footer-item-hover: var(--colour-brand-inkwell, #14343b);
  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
  --af-button-secondary-bg: transparent;
  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);
}

/* ==========================================================================
   CHART TOKENS — per-theme palette using monotone color families
   
   WARNING: Never use the tint that matches the theme background!
   - white: avoid white/near-white
   - inkwell: avoid inkwell-500 (#14343B)
   - mist-green: avoid mist-green-500 (#C6D5D1)
   - soft-clay: avoid soft-clay-400 (#c0ab8d)
   - white-ivory: avoid ivory-paper (#FFF9EE)
   ========================================================================== */

.theme-white,
.top-theme-white {
  /* Mist-green palette (dark to light) - avoid white/near-white */
  --af-chart-1: var(--colour-tints-mist-green-700);
  --af-chart-2: var(--colour-tints-mist-green-600);
  --af-chart-3: var(--colour-brand-mist-green);
  --af-chart-4: var(--colour-tints-mist-green-300);
  --af-chart-5: var(--colour-tints-mist-green-200);
  --af-chart-grid: var(--colour-inkwell-50);
  --af-chart-line: var(--af-background-border-default);
  --af-chart-text: var(--af-typography-body-default);
  --af-chart-text-muted: var(--af-typography-body-subtle);
}

.theme-inkwell,
.top-theme-inkwell {
  /* Mist-green palette (visible on dark bg) - avoid near-white (100) and dark tones */
  --af-chart-1: var(--colour-tints-mist-green-300);
  --af-chart-2: var(--colour-tints-mist-green-400);
  --af-chart-3: var(--colour-brand-mist-green);
  --af-chart-4: var(--colour-tints-mist-green-600);
  --af-chart-5: var(--colour-tints-mist-green-700);
  --af-chart-grid: var(--colour-inkwell-400);
  --af-chart-line: var(--af-background-border-default);
  --af-chart-text: var(--af-typography-body-default);
  --af-chart-text-muted: var(--af-typography-body-subtle);
}

.theme-mist-green,
.top-theme-mist-green {
  /* Mist-green palette - skip mist-green-500 (same as bg #C6D5D1) */
  --af-chart-1: var(--colour-tints-mist-green-700);
  --af-chart-2: var(--colour-tints-mist-green-600);
  --af-chart-3: var(--colour-tints-mist-green-400);
  --af-chart-4: var(--colour-tints-mist-green-300);
  --af-chart-5: var(--colour-tints-mist-green-200);
  --af-chart-grid: var(--colour-tints-mist-green-600);
  --af-chart-line: var(--af-background-border-default);
  --af-chart-text: var(--af-typography-body-default);
  --af-chart-text-muted: var(--af-typography-body-subtle);
}

.theme-soft-clay,
.top-theme-soft-clay {
  /* Soft-clay palette - skip soft-clay-400 (same as bg #c0ab8d) */
  --af-chart-1: var(--colour-tints-soft-clay-800);
  --af-chart-2: var(--colour-tints-soft-clay-700);
  --af-chart-3: var(--colour-tints-soft-clay-600);
  --af-chart-4: var(--colour-brand-soft-clay);
  --af-chart-5: var(--colour-tints-soft-clay-300);
  --af-chart-grid: var(--colour-tints-soft-clay-300);
  --af-chart-line: var(--af-background-border-default);
  --af-chart-text: var(--af-typography-body-default);
  --af-chart-text-muted: var(--af-typography-body-subtle);
}

.theme-white-ivory,
.top-theme-white-ivory {
  /* Soft-clay palette (dark to mid) - avoid ivory-paper and soft-clay-50 */
  --af-chart-1: var(--colour-tints-soft-clay-800);
  --af-chart-2: var(--colour-tints-soft-clay-700);
  --af-chart-3: var(--colour-tints-soft-clay-600);
  --af-chart-4: var(--colour-brand-soft-clay);
  --af-chart-5: var(--colour-tints-soft-clay-400);
  --af-chart-grid: var(--colour-tints-soft-clay-100);
  --af-chart-line: var(--af-background-border-default);
  --af-chart-text: var(--af-typography-body-default);
  --af-chart-text-muted: var(--af-typography-body-subtle);
}

/* ==========================================================================
   TIMELINE TOKENS — per-theme Gantt bar/marker colors
   ========================================================================== */

.theme-white,
.top-theme-white {
  --af-timeline-planned: var(--colour-inkwell-100);
  --af-timeline-active: var(--colour-brand-mist-green);
  --af-timeline-complete: var(--colour-tints-mist-green-600);
  --af-timeline-axis: var(--colour-inkwell-200);
  --af-timeline-today: var(--colour-brand-inkwell);
  --af-timeline-target: var(--colour-brand-ice);
  --af-timeline-label: var(--colour-brand-inkwell);
}

.theme-inkwell,
.top-theme-inkwell {
  --af-timeline-planned: var(--colour-inkwell-300);
  --af-timeline-active: var(--colour-tints-mist-green-300);
  --af-timeline-complete: var(--colour-tints-mist-green-500);
  --af-timeline-axis: var(--colour-inkwell-300);
  --af-timeline-today: var(--colour-brand-white);
  --af-timeline-target: var(--colour-brand-ice);
  --af-timeline-label: var(--colour-brand-inkwell);
}

.theme-mist-green,
.top-theme-mist-green {
  --af-timeline-planned: var(--colour-tints-mist-green-400);
  --af-timeline-active: var(--colour-brand-inkwell);
  --af-timeline-complete: var(--colour-inkwell-400);
  --af-timeline-axis: var(--colour-tints-mist-green-600);
  --af-timeline-today: var(--colour-brand-inkwell);
  --af-timeline-target: var(--colour-brand-ice);
  --af-timeline-label: var(--colour-brand-white);
}

.theme-soft-clay,
.top-theme-soft-clay {
  --af-timeline-planned: var(--colour-tints-soft-clay-200);
  --af-timeline-active: var(--colour-brand-inkwell);
  --af-timeline-complete: var(--colour-inkwell-400);
  --af-timeline-axis: var(--colour-tints-soft-clay-300);
  --af-timeline-today: var(--colour-brand-inkwell);
  --af-timeline-target: var(--colour-brand-ice);
  --af-timeline-label: var(--colour-brand-white);
}

.theme-white-ivory,
.top-theme-white-ivory {
  --af-timeline-planned: var(--colour-tints-soft-clay-100);
  --af-timeline-active: var(--colour-brand-mist-green);
  --af-timeline-complete: var(--colour-tints-mist-green-600);
  --af-timeline-axis: var(--colour-tints-soft-clay-200);
  --af-timeline-today: var(--colour-brand-inkwell);
  --af-timeline-target: var(--colour-brand-ice);
  --af-timeline-label: var(--colour-brand-inkwell);
}

/* ==========================================================================
   TABLE TOKENS — header colors that pop, subtle row alternation
   ========================================================================== */

.theme-white,
.top-theme-white {
  --af-table-header-bg: var(--colour-tints-mist-green-600);
  --af-table-header-text: var(--colour-brand-inkwell);
  --af-table-row-alt: var(--colour-mistgreen-100);
}

.theme-inkwell,
.top-theme-inkwell {
  --af-table-header-bg: var(--colour-inkwell-700);
  --af-table-header-text: var(--colour-inkwell-100);
  --af-table-row-alt: var(--colour-inkwell-450);
}

.theme-mist-green,
.top-theme-mist-green {
  --af-table-header-bg: var(--colour-tints-mist-green-700);
  --af-table-header-text: var(--af-typography-heading-primary);
  --af-table-row-alt: var(--colour-mistgreen-400);
  --af-table-border: var(--colour-mistgreen-300);
}

.theme-soft-clay,
.top-theme-soft-clay {
  --af-table-header-bg: var(--colour-tints-soft-clay-700);
  --af-table-header-text: var(--af-typography-heading-primary);
  --af-table-row-alt: var(--colour-softclay-300);
  --af-table-border: var(--colour-softclay-500);
}

/* ==========================================================================
   CALLOUT SEMANTIC VARIANTS — use status and brand tokens
   ========================================================================== */

:root {
  /* Success */
  --af-callout-success-bg: #E6F4ED;
  --af-callout-success-accent: var(--status-ok);
  
  /* Error */
  --af-callout-error-bg: #FBEAE8;
  --af-callout-error-accent: var(--status-issue);
  
  /* Warning — uses soft-clay brand color */
  --af-callout-warning-bg: var(--colour-tints-soft-clay-100);
  --af-callout-warning-accent: var(--colour-brand-soft-clay);
  
  /* Info — uses ice/azure brand colors */
  --af-callout-info-bg: var(--colour-tints-ice-100);
  --af-callout-info-accent: var(--colour-brand-azure);
}

/* ==========================================================================
   CALLOUT THEMED VARIANTS — use brand tints
   ========================================================================== */

:root {
  /* Inkwell */
  --af-callout-inkwell-bg: var(--colour-inkwell-50);
  --af-callout-inkwell-accent: var(--colour-brand-inkwell);
  
  /* Mist Green */
  --af-callout-mist-green-bg: var(--colour-tints-mist-green-100);
  --af-callout-mist-green-accent: var(--colour-brand-mist-green);
  
  /* Soft Clay */
  --af-callout-soft-clay-bg: var(--colour-tints-soft-clay-100);
  --af-callout-soft-clay-accent: var(--colour-brand-soft-clay);
  
  /* Ice */
  --af-callout-ice-bg: var(--colour-tints-ice-100);
  --af-callout-ice-accent: var(--colour-brand-ice);
}

/* ==========================================================================
   ACTION LIST STATUS TOKENS
   ========================================================================== */

:root {
  --af-status-pending: var(--colour-inkwell-100);
  --af-status-in-progress: var(--colour-brand-mist-green);
  --af-status-done: var(--status-ok);
  --af-status-blocked: var(--status-issue);
}

/* ==========================================================================
   DEFAULT THEME (applied to :root for fallback)
   ========================================================================== */

:root {
  /* Default to white theme variables */
  --af-background-base: var(--colour-brand-white);
  --af-background-base-hover: var(--colour-mistgreen-100);
  --af-background-contrast: var(--colour-brand-mist-green);
  --af-background-level-1: var(--colour-mistgreen-200);
  --af-background-level-1-hover: var(--colour-mistgreen-300);
  --af-background-border-subtle: var(--colour-mistgreen-200);
  --af-background-border-default: var(--colour-mistgreen-400);
  --af-background-border-heavy: var(--colour-mistgreen-500);
  --af-background-border-active: var(--colour-softclay-800);
  --af-background-icon-default: var(--colour-brand-inkwell);
  --af-background-icon-accent: var(--colour-brand-soft-clay);
  
  --af-typography-heading-primary: var(--colour-brand-inkwell);
  --af-typography-heading-secondary: var(--colour-brand-soft-clay);
  --af-typography-body-dark: var(--colour-brand-inkwell);
  --af-typography-body-default: var(--colour-inkwell-400);
  --af-typography-body-subtle: var(--colour-inkwell-350);
  
  --af-button-primary-text: var(--colour-brand-inkwell);
  --af-button-primary-icon: var(--colour-brand-inkwell);
  --af-button-primary-bg: var(--colour-brand-ice);
  --af-button-primary-bg-hover: var(--colour-ice-600);
  --af-button-primary-stroke: var(--colour-brand-inkwell);
  
  --af-button-secondary-text: var(--colour-brand-inkwell);
  --af-button-secondary-icon: var(--colour-brand-inkwell);
  --af-button-secondary-bg: transparent;
  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);
  --af-button-secondary-stroke: var(--colour-brand-inkwell);
  
  --af-button-tertiary-text: var(--colour-brand-inkwell);
  --af-button-tertiary-icon: var(--colour-brand-inkwell);
  --af-button-tertiary-stroke: var(--colour-brand-soft-clay);
  
  /* Scrollbar (defaults to white theme) */
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
  
  /* Table tokens (default to white theme) */
  --af-table-header-bg: var(--colour-tints-mist-green-300);
  --af-table-header-text: var(--colour-brand-inkwell);
  
  /* Chart tokens (default to white theme - monotone mist-green) */
  --af-chart-1: var(--colour-tints-mist-green-700);
  --af-chart-2: var(--colour-tints-mist-green-600);
  --af-chart-3: var(--colour-brand-mist-green);
  --af-chart-4: var(--colour-tints-mist-green-300);
  --af-chart-5: var(--colour-tints-mist-green-200);
  --af-chart-grid: var(--colour-inkwell-50);
  --af-chart-line: var(--af-background-border-default);
  --af-chart-text: var(--af-typography-body-default);
  --af-chart-text-muted: var(--af-typography-body-subtle);
  
  /* Timeline tokens (default to white theme) */
  --af-timeline-planned: var(--colour-inkwell-100);
  --af-timeline-active: var(--colour-brand-mist-green);
  --af-timeline-complete: var(--colour-tints-mist-green-600);
  --af-timeline-axis: var(--colour-inkwell-200);
  --af-timeline-today: var(--colour-brand-inkwell);
  --af-timeline-target: var(--colour-brand-ice);
}

/* A minimal modern CSS reset tuned for Affinda UI */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  background-color: var(--af-color-bg-surface);
  color: var(--af-color-fg-default);
}
/*
  Note: we deliberately don't set `-webkit-font-smoothing: antialiased`
  here. On Linux+Chrome (and some Windows configs) it forces grayscale
  rasterization that renders NeuSans visibly heavier than its native
  weight; on macOS it renders thinner. The live affinda.com site
  doesn't set it either, so leaving it unset is what matches the
  reference rendering across platforms. Verified 2026-04-27 — preview
  vs live "Platform" headings became visually identical once this
  declaration was removed.
*/

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

:root {
  color-scheme: light dark;
}
/**
 * Affinda Typography - NeuSans Font Family
 *
 * Shipped as Latin-1 + General Punctuation subset WOFF2 (see
 * `packages/css/scripts/subset-fonts.mjs`). Masters live in
 * `packages/css/fonts-src/` (OTF, not published to npm). Re-run the
 * subset script if copy ever needs glyphs outside Latin-1.
 *
 * Core NeuSans family weights: 300 (Light), 400 (Regular), 400 italic,
 * 600 (Medium). Weight 500 remains deliberately omitted from the core family
 * so existing 500-weight headings continue matching live affinda.com. A
 * separate `NeuSans Book` family is shipped for explicitly art-directed labels
 * that call for the slightly heavier Book cut.
 *
 * Metric overrides: every face carries `size-adjust: 105%`,
 * `ascent-override: 90%`, `descent-override: 20%`. These match the
 * live affinda.com Webflow `@font-face` rules — without them
 * NeuSans renders ~5 % smaller and with a slightly different
 * baseline than designers calibrated against.
 *
 * Why no weight 500: live affinda.com headings declare
 * `font-family: Neusans-Optimized; font-weight: 500`, but the
 * Optimized family on Webflow only ships {400 Regular, 700 Bold}.
 * Per CSS Fonts L4 weight-matching, 500 then falls to 400 (Regular).
 * We previously shipped a NeuSans-Book.woff2 master at weight 500,
 * which produced visibly heavier glyphs than live (Book is a
 * separate cut, slightly bolder than Regular). Dropping the 500
 * face here makes our family fall through 500 → 400 = Regular,
 * exactly mirroring live's effective rendering. Verified
 * 2026-04-27 via Playwright pixel-diff on /au's "Platform" heading.
 */

/* NeuSans Light (Weight 300) — FAQ decorative +/× glyph and the rare
   ultra-thin display usage. */
@font-face {
  font-family: 'NeuSans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/NeuSans-Light.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

/* NeuSans Regular (Weight 400) */
@font-face {
  font-family: 'NeuSans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/NeuSans-Regular.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

@font-face {
  font-family: 'NeuSans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/NeuSans-RegularItalic.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

/* NeuSans Book — separate family so this face is opt-in and does not change
   the site-wide 500 → Regular fallback used by existing headings. */
@font-face {
  font-family: 'NeuSans Book';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/NeuSans-Book.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

/* NeuSans Medium (Weight 600) */
@font-face {
  font-family: 'NeuSans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/NeuSans-Medium.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

/*
 * Webflow live uses font-family: Neusans-Optimized with the same metrics.
 * Duplicate @font-face blocks so computed styles match www.affinda.com.
 */
@font-face {
  font-family: 'Neusans-Optimized';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/NeuSans-Light.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

@font-face {
  font-family: 'Neusans-Optimized';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/NeuSans-Regular.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

@font-face {
  font-family: 'Neusans-Optimized';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/NeuSans-RegularItalic.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

@font-face {
  font-family: 'Neusans-Optimized';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/NeuSans-Medium.woff2') format('woff2');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

/* Global font family setup (tokens loaded before this file — see index.css) */
:root {
  --font-family-heading: var(--typography-headingfont);
  --font-family-body: var(--typography-bodyfont);
  --font-family-button: var(--typography-sansfont);
}

/* Body typography lives in base.css (`--af-font-family-sans`, etc.) */

/* Headings use theme stack */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}

:root {
  font-family: var(--af-font-family-sans);
  font-weight: var(--af-font-weight-regular);
  background-color: var(--af-color-bg-surface);
  color: var(--af-color-fg-default);
}

body {
  font-family: var(--af-font-family-sans);
  font-size: var(--af-size-font-md);
  font-weight: var(--af-font-weight-regular);
  line-height: var(--af-line-height-font-md);
  /* Webflow uses block layout on body; avoid flex-driven descendant diffs */
  display: block;
  min-height: 100%;
}

/*
 * Normalize slotted semantic heading tags inside typography-producing
 * components. Consumers should use <h1>-<h6> for SEO/a11y, but the
 * visual sizing is owned by the component (e.g. af-typography-lockup,
 * af-illustrated-card, af-heading). Without this reset, the browser
 * default h1 size (2em) doubles up with the component's font-size.
 */
af-typography-lockup :where(h1, h2, h3, h4, h5, h6),
af-illustrated-card :where(h1, h2, h3, h4, h5, h6),
af-card :where(h1, h2, h3, h4, h5, h6),
af-testimonial :where(h1, h2, h3, h4, h5, h6),
af-in-page-banner :where(h1, h2, h3, h4, h5, h6),
af-hero :where(h1, h2, h3, h4, h5, h6),
af-text-image :where(h1, h2, h3, h4, h5, h6),
af-text-image-nest :where(h1, h2, h3, h4, h5, h6),
af-feature-card :where(h1, h2, h3, h4, h5, h6),
af-feature-accordion :where(h1, h2, h3, h4, h5, h6),
af-grid-callout :where(h1, h2, h3, h4, h5, h6),
af-nav-card :where(h1, h2, h3, h4, h5, h6) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

.af-focus-ring {
  outline: 2px solid var(--af-color-brand-primary-500);
  outline-offset: 2px;
}

.af-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--af-color-brand-primary-500) 70%, white 30%);
  outline-offset: 3px;
}

[data-density="compact"] {
  --af-space-2: 6px;
  --af-space-3: 10px;
  --af-space-4: 14px;
}

/* ==========================================================================
   af-hero: float-navbar behaviour

   <af-hero float-navbar> sets `data-af-hero-float-navbar="true"` on <body>
   in its connectedCallback. The rules below layer the site header over
   the hero section, zero-out <main>'s default top padding, and paint
   af-navbar's 100px `.navbar-spacer` transparent so the hero background
   extends to the top of the viewport — interrupted only by the floating
   pill itself.

   Shipped in the shared base stylesheet so every hero-consuming app gets
   the behaviour with zero additional imports. The attribute is removed
   when the last af-hero in the DOM disconnects.
   ========================================================================== */

body[data-af-hero-float-navbar="true"] > header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

body[data-af-hero-float-navbar="true"] > main,
body[data-af-hero-float-navbar="true"] main {
  padding-top: 0;
}

body[data-af-hero-float-navbar="true"] > header af-navbar .navbar-spacer {
  background-color: transparent !important;
}

/* ==========================================================================
   Scrollbar Styles

   Quiet scrollbar: no visible track (the gutter reads as page), and a thin,
   low-contrast thumb in the scrolling element's own text colour, so it suits
   light and dark surfaces alike and firms up a little on hover. Components
   with a designed scrollbar (e.g. the news rail) override these.
   ========================================================================== */

/* Scrollbar tokens */
:root {
  /* WebKit box size; the visible thumb is inset within it (see below). */
  --af-scrollbar-size: 10px;
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb: color-mix(in srgb, currentColor 20%, transparent);
  --af-scrollbar-thumb-hover: color-mix(in srgb, currentColor 38%, transparent);
}

/* Firefox: only colour and width are stylable. Gated to browsers without
   ::-webkit-scrollbar, because Chromium gives scrollbar-color precedence and
   would drop the inset thumb and hover state below. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--af-scrollbar-thumb) var(--af-scrollbar-track);
  }
}

/* WebKit/Blink (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: var(--af-scrollbar-size);
  height: var(--af-scrollbar-size);
  background: var(--af-scrollbar-track);
}

::-webkit-scrollbar-track {
  background: var(--af-scrollbar-track);
}

/* A 4px pill: a 3px transparent border inside the 10px box keeps the whole
   10px as the grab area while only 4px is drawn. On hover or drag the pill
   widens to 6px (the box, and so the layout, never changes). */
::-webkit-scrollbar-thumb {
  background: var(--af-scrollbar-thumb);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--radius-pill, 999px);
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: var(--af-scrollbar-thumb-hover);
  border-width: 2px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Hidden scrollbar (still scrollable) */
.af-scrollbar-none {
  scrollbar-width: none;
}

.af-scrollbar-none::-webkit-scrollbar {
  display: none;
}
/**
 * Theme-scoped custom properties — canonical definitions live in
 * `@affinda/tokens/themes.css` (single source). This file re-exports them
 * for `@affinda/css` consumers.
 */
/* ==========================================================================
   Repeating pattern backgrounds (utility classes)

   Apply an `af-pattern-*` class to any element to paint a decorative pattern
   as that element's background (behind its content). Works on a card, a
   section's inner surface, a plain div — anything you control the background
   of. The declarations can also be pasted straight into a `style`/cssOverride.

   Customise with custom properties on the element:
     --af-pattern-colour  ink colour        (default: the theme line colour)
     --af-pattern-size    tile size         (default: 24px)
     --af-pattern-angle   stripe angle      (default: 45deg, stripes only)
   ========================================================================== */

[class*='af-pattern-'] {
  --_af-pat-colour: var(--af-pattern-colour, var(--af-background-border-default, #14343b));
  --_af-pat-size: var(--af-pattern-size, 24px);
  --_af-pat-angle: var(--af-pattern-angle, 45deg);
  background-repeat: repeat;
}

/* Checkerboard (conic) --------------------------------------------------- */
.af-pattern-checkerboard {
  background-image: conic-gradient(
    var(--_af-pat-colour) 0 25%,
    transparent 0 50%,
    var(--_af-pat-colour) 0 75%,
    transparent 0
  );
  background-size: var(--_af-pat-size) var(--_af-pat-size);
}

/* Polka dots (radial, staggered) ----------------------------------------- */
.af-pattern-polka-dots {
  background-image:
    radial-gradient(var(--_af-pat-colour) 22%, transparent 24%),
    radial-gradient(var(--_af-pat-colour) 22%, transparent 24%);
  background-size: var(--_af-pat-size) var(--_af-pat-size);
  background-position: 0 0, calc(var(--_af-pat-size) / 2) calc(var(--_af-pat-size) / 2);
}

/* Stripes (linear) ------------------------------------------------------- */
.af-pattern-stripes {
  background-image: repeating-linear-gradient(
    var(--_af-pat-angle),
    var(--_af-pat-colour) 0 calc(var(--_af-pat-size) / 2),
    transparent 0 var(--_af-pat-size)
  );
}

/* Graph paper (major + minor grid) --------------------------------------- */
.af-pattern-graph-paper {
  background-image:
    repeating-linear-gradient(0deg, var(--_af-pat-colour) 0 1px, transparent 1px calc(var(--_af-pat-size) * 5)),
    repeating-linear-gradient(90deg, var(--_af-pat-colour) 0 1px, transparent 1px calc(var(--_af-pat-size) * 5)),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--_af-pat-colour) 45%, transparent) 0 1px,
      transparent 1px var(--_af-pat-size)
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--_af-pat-colour) 45%, transparent) 0 1px,
      transparent 1px var(--_af-pat-size)
    );
}

/* Isometric grid (three line sets) --------------------------------------- */
.af-pattern-isometric-grid {
  background-image:
    repeating-linear-gradient(30deg, var(--_af-pat-colour) 0 1px, transparent 1px var(--_af-pat-size)),
    repeating-linear-gradient(150deg, var(--_af-pat-colour) 0 1px, transparent 1px var(--_af-pat-size)),
    repeating-linear-gradient(90deg, var(--_af-pat-colour) 0 1px, transparent 1px calc(var(--_af-pat-size) * 1.732));
}