:root {
  color-scheme: dark;

  /* RGB channels */
  --asuite-rgb-black: 0 0 0;
  --asuite-rgb-white: 255 255 255;
  --asuite-rgb-body-bg: 50 69 106;
  --asuite-rgb-text: 244 246 251;
  --asuite-rgb-muted: 156 163 175;
  --asuite-rgb-surface-base: 15 23 42;
  --asuite-rgb-accent: 125 211 252;
  --asuite-rgb-accent-hover: 227 255 168;
  --asuite-rgb-info: 56 189 248;
  --asuite-rgb-info-soft: 224 242 254;
  --asuite-rgb-accent-strong: 2 132 199;
  --asuite-rgb-success: 34 197 94;
  --asuite-rgb-danger: 248 113 113;
  --asuite-rgb-warning: 245 158 11;
  --asuite-rgb-panel-border: 37 50 81;
  --asuite-rgb-field-border: 42 58 90;
  --asuite-rgb-field-focus: 20 30 53;

  /* Color tokens */
  --asuite-color-bg: rgb(var(--asuite-rgb-body-bg));
  --asuite-color-surface: rgb(var(--asuite-rgb-surface-base));
  --asuite-color-text: rgb(var(--asuite-rgb-text));
  --asuite-color-text-muted: rgb(var(--asuite-rgb-muted));
  --asuite-color-accent: rgb(var(--asuite-rgb-accent));
  --asuite-color-accent-hover: rgb(var(--asuite-rgb-accent-hover));
  --asuite-color-accent-strong: rgb(var(--asuite-rgb-accent-strong));
  --asuite-color-success: rgb(var(--asuite-rgb-success));
  --asuite-color-warning: rgb(var(--asuite-rgb-warning));
  --asuite-color-danger: rgb(var(--asuite-rgb-danger));

  /* Typography */
  --asuite-font-family-ui: "Fira Code", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace;
  --asuite-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --asuite-font-stack: var(--asuite-font-family-ui);
  --asuite-font-size-base: 16;
  --asuite-font-scale: calc(var(--asuite-font-size-base) / 16);
  --asuite-font-size-caption-xs: calc(0.75rem * var(--asuite-font-scale));
  --asuite-font-size-caption: calc(0.8rem * var(--asuite-font-scale));
  --asuite-font-size-label-sm: calc(0.85rem * var(--asuite-font-scale));
  --asuite-font-size-body-xs: calc(0.9rem * var(--asuite-font-scale));
  --asuite-font-size-body-sm: calc(0.95rem * var(--asuite-font-scale));
  --asuite-font-size-body: calc(1rem * var(--asuite-font-scale));
  --asuite-font-size-body-lg: calc(1.1rem * var(--asuite-font-scale));
  --asuite-font-size-title-sm: calc(1.35rem * var(--asuite-font-scale));
  --asuite-font-size-title-md: calc(1.5rem * var(--asuite-font-scale));
  --asuite-font-size-title-lg: calc(1.6rem * var(--asuite-font-scale));
  --asuite-font-size-display: calc(2.25rem * var(--asuite-font-scale));
  --asuite-font-size-fluid-display: clamp(calc(2rem * var(--asuite-font-scale)), calc(3.6vw * var(--asuite-font-scale)), calc(2.55rem * var(--asuite-font-scale)));
  --asuite-font-size-fluid-heading-lg: clamp(calc(1.25rem * var(--asuite-font-scale)), calc(3vw * var(--asuite-font-scale)), calc(1.5rem * var(--asuite-font-scale)));

  /* Spacing */
  --asuite-space-2xs: 0.2rem;
  --asuite-space-xs: 0.35rem;
  --asuite-space-sm: 0.5rem;
  --asuite-space-md: 0.75rem;
  --asuite-space-lg: 1rem;
  --asuite-space-xl: 1.5rem;
  --asuite-space-2xl: 2rem;

  /* Shape */
  --asuite-radius-sm: 10px;
  --asuite-radius-md: 12px;
  --asuite-radius-lg: 14px;
  --asuite-radius-xl: 16px;
  --asuite-radius-card: 18px;
  --asuite-radius-large: 24px;
  --asuite-radius-pill: 999px;

  /* Motion */
  --asuite-motion-duration-fast: 0.12s;
  --asuite-motion-duration-mid: 0.15s;
  --asuite-motion-duration-base: 0.2s;
  --asuite-motion-duration-slow: 0.3s;
  --asuite-motion-ease-standard: ease;
  --asuite-transition-control:
    transform var(--asuite-motion-duration-base) var(--asuite-motion-ease-standard),
    border-color var(--asuite-motion-duration-base) var(--asuite-motion-ease-standard),
    color var(--asuite-motion-duration-base) var(--asuite-motion-ease-standard),
    background var(--asuite-motion-duration-base) var(--asuite-motion-ease-standard);

  /* Surfaces */
  --asuite-surface-page: radial-gradient(circle at top, rgb(var(--asuite-rgb-accent) / 0.08), transparent 45%), var(--asuite-color-bg);
  --asuite-surface-card: linear-gradient(130deg, rgb(var(--asuite-rgb-accent) / 0.14), rgb(var(--asuite-rgb-surface-base) / 0.2)), var(--asuite-color-surface);
  --asuite-surface-card-soft: linear-gradient(100deg, rgb(var(--asuite-rgb-panel-border) / 0.92), rgb(var(--asuite-rgb-surface-base) / 0.98) 70%);
  --asuite-field-bg: linear-gradient(130deg, rgb(var(--asuite-rgb-accent) / 0.14), rgb(var(--asuite-rgb-surface-base) / 0.2)), var(--asuite-color-surface);
  --asuite-field-bg-focus: linear-gradient(130deg, rgb(var(--asuite-rgb-accent) / 0.14), rgb(var(--asuite-rgb-field-focus) / 0.2)), rgb(var(--asuite-rgb-field-focus));
  --asuite-field-border: rgb(var(--asuite-rgb-field-border));
  --asuite-field-border-focus: rgb(var(--asuite-rgb-accent));
  --asuite-field-placeholder: rgb(var(--asuite-rgb-white) / 0.6);

  /* Shadows */
  --asuite-shadow-card: 0 35px 65px -55px rgb(var(--asuite-rgb-surface-base));
  --asuite-shadow-card-strong: 0 45px 85px -65px rgb(var(--asuite-rgb-surface-base));
  --asuite-shadow-frame: inset 0 0 0 1px rgb(var(--asuite-rgb-accent) / 0.08), var(--asuite-shadow-card);
  --asuite-shadow-frame-strong: inset 0 0 0 1px rgb(var(--asuite-rgb-accent) / 0.12), 0 45px 90px -60px rgb(var(--asuite-rgb-surface-base));

  /* Controls */
  --asuite-button-padding: 0.8rem 1.5rem;
  --asuite-button-radius: var(--asuite-radius-md);
  --asuite-button-border: 1px solid rgb(var(--asuite-rgb-accent) / 0.6);
  --asuite-button-bg: rgb(var(--asuite-rgb-accent));
  --asuite-button-bg-hover: rgb(var(--asuite-rgb-accent-hover));
  --asuite-button-text: rgb(var(--asuite-rgb-surface-base));
  --asuite-button-secondary-bg: transparent;
  --asuite-button-secondary-text: rgb(var(--asuite-rgb-accent));
  --asuite-button-danger-bg: rgb(var(--asuite-rgb-danger) / 0.12);
  --asuite-button-danger-border: 1px solid rgb(var(--asuite-rgb-danger) / 0.6);
  --asuite-button-danger-text: rgb(var(--asuite-rgb-danger));
  --asuite-button-test-bg: rgb(var(--asuite-rgb-surface-base));
  --asuite-button-test-border: 1px solid rgb(var(--asuite-rgb-panel-border));
  --asuite-button-test-text: rgb(var(--asuite-rgb-accent));

  /* Legal */
  --asuite-legal-section-bg: rgb(var(--asuite-rgb-surface-base));
  --asuite-legal-section-border: 1px solid rgb(var(--asuite-rgb-panel-border));
}
