@layer modes {
  /**
   * Do not edit directly, this file was auto-generated.
   */
  
  [data-mode~="dark"] {
    --color-feedback-error: #f87171;
    --color-feedback-success: #34d399;
    --color-feedback-warning: #fbbf24;
    --color-interactive-active: #e09508;
    --color-interactive-default: #fbad23;
    --color-interactive-hover: #ffc044;
    --color-on-surface-disabled: #7275a4;
    --color-on-surface-primary: #e8eaed;
    --color-on-surface-secondary: #8890b0;
    --color-surface-default: #0c0d22;
    --color-surface-raised: #161830;
    --color-surface-sunken: #09091a;
    --shadow-none: none;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.20);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.28);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.36);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.44);
    --shadow-modal: 0 4px 24px rgba(0,0,0,0.48);
    --shadow-dropdown: 0 2px 8px rgba(0,0,0,0.24);
    --shadow-card: 0 1px 4px rgba(0,0,0,0.24), 0 2px 12px rgba(0,0,0,0.28); /** Card elevation in dark (azure) mode. Deeper than light to maintain visual lift against dark surfaces. */
    --shadow-popover: 0 4px 20px rgba(0,0,0,0.44), 0 1px 4px rgba(0,0,0,0.28); /** Popover / floating panel in dark mode. */
    --shadow-focus-ring-indigo: 0 0 0 3px rgba(255,181,52,0.28); /** Dark mode focus ring uses amber (#FFB534) — indigo is too low-contrast on azure surfaces. */
  }

  /**
   * Do not edit directly, this file was auto-generated.
   */
  
  [data-mode~="compact"] {
    --spacing-xs: 3px;
    --spacing-sm: 6px;
    --spacing-md: 9px;
    --spacing-lg: 12px;
    --spacing-xl: 18px;
    --spacing-2xl: 24px;
    --spacing-3xl: 30px;
    --spacing-4xl: 40px;
    --font-size-xs: 9px;
    --font-size-sm: 10px;
    --font-size-base: 12px;
    --font-size-md: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-2xl: 20px;
    --font-line-height-tight: 1.05;
    --font-line-height-snug: 1.15;
    --font-line-height-normal: 1.35;
    --font-line-height-relaxed: 1.45;
    --font-line-height-loose: 1.6;
    --font-label-sm-size: 9px;
    --font-label-md-size: 10px;
    --font-label-lg-size: 12px;
  }

  /**
   * Do not edit directly, this file was auto-generated.
   */
  
  [data-mode~="document"] {
    --color-surface-default: #fafafa; /** Document canvas — near-white, zero chroma. Distinct from light-mode cream (#F5F2EB) to avoid brand color bleeding into reading context. */
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #f0f0f0;
    --color-on-surface-primary: #1a1a1a; /** Near-black body text. Zero chroma — document mode strips all brand color from reading text. */
    --color-on-surface-secondary: #5a5a5a;
    --color-on-surface-disabled: #9e9e9e;
    --color-border-default: #e0e0e0; /** Solid neutral border. Document mode does not use alpha borders — background is always known (#FAFAFA). */
    --color-border-muted: #efefef;
    --color-border-strong: #c8c8c8;
    --color-interactive-default: #1a1a1a; /** Document-mode interactive — zero chroma, maximum contrast. Links and inline interactive elements read as editorial, not UI. */
    --color-interactive-hover: #000000;
    --color-interactive-active: #333333;
    --color-mark: #1a1a1a; /** Brand mark colour in document mode — zero chroma. Sourced from mimeric-brand/project/assets/mark-doc.svg. */
    --type-body-font-family: 'IBM Plex Serif', Georgia, serif; /** Body paragraphs (p elements) in document mode use IBM Plex Serif. Applied via CSS rule scoped to [data-mode~="document"] p — headings and UI chrome remain on font.family.sans via inheritance. */
  }

  /**
   * Do not edit directly, this file was auto-generated.
   */
  
  [data-mode~="reduced-motion"] {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-x-slow: 0ms;
  }
}

@layer compliance {
  /**
   * Do not edit directly, this file was auto-generated.
   */
  
  [data-mode~="high-contrast"] {
    --color-feedback-error: #7b0000;
    --color-feedback-success: #003a0e;
    --color-feedback-warning: #4d3500;
    --color-interactive-active: #0000aa;
    --color-interactive-default: #0000ee;
    --color-interactive-hover: #0000cc;
    --color-on-surface-disabled: #595959;
    --color-on-surface-primary: #000000;
    --color-on-surface-secondary: #000000;
    --color-surface-default: #ffffff;
    --color-surface-raised: #f8f8f8;
    --color-surface-sunken: #e8e8e8;
    --shadow-none: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-modal: none;
    --shadow-dropdown: none;
  }
}