/* Generated from brand/tokens.json. Do not edit. */
:root {
  --loop-color-palette-ink-950: #0a1020;
  --loop-color-palette-ink-900: #0f1628;
  --loop-color-palette-ink-850: #151d30;
  --loop-color-palette-ink-750: #242b40;
  --loop-color-palette-ink-800: #1a2035;
  --loop-color-palette-slate-600: #525a70;
  --loop-color-palette-slate-400: #8f96a8;
  --loop-color-palette-paper-100: #eef1f7;
  --loop-color-palette-paper-050: #f5f6fb;
  --loop-color-palette-paper-150: #e8ebf4;
  --loop-color-palette-white: #ffffff;
  --loop-color-palette-blue-500: #0077ff;
  --loop-color-palette-blue-400: #3392ff;
  --loop-color-palette-blue-600: #0055cc;
  --loop-color-palette-blue-700: #003f99;
  --loop-color-palette-blue-800: #002f73;
  --loop-color-palette-blue-950: #112b4e;
  --loop-color-palette-blue-050: #edf5ff;
  --loop-color-palette-cyan-400: #32d5e6;
  --loop-color-palette-cyan-700: #00788a;
  --loop-color-palette-amber-400: #ffc247;
  --loop-color-palette-amber-700: #8a5a00;
  --loop-color-palette-acid-400: #c7ff3a;
  --loop-color-palette-acid-650: #6b8f1f;
  --loop-color-palette-crimson-500: #ff2d5d;
  --loop-color-palette-crimson-600: #d6205a;
  --loop-color-palette-line-light: #d6dae5;
  --loop-color-palette-line-light-soft: #e8ebf2;
  --loop-space-2: 2px;
  --loop-space-4: 4px;
  --loop-space-8: 8px;
  --loop-space-12: 12px;
  --loop-space-16: 16px;
  --loop-space-24: 24px;
  --loop-space-32: 32px;
  --loop-space-48: 48px;
  --loop-space-64: 64px;
  --loop-space-96: 96px;
  --loop-layout-inline-tight: var(--loop-space-4);
  --loop-layout-inline: var(--loop-space-8);
  --loop-layout-stack: var(--loop-space-12);
  --loop-layout-control-inset: var(--loop-space-12);
  --loop-layout-panel-inset: var(--loop-space-16);
  --loop-layout-section-gap: var(--loop-space-32);
  --loop-layout-page-gutter: var(--loop-space-48);
  --loop-size-target-minimum: 24px;
  --loop-size-control-compact: 28px;
  --loop-size-control-default: 32px;
  --loop-size-control-comfortable: 40px;
  --loop-stroke-border: 1px;
  --loop-stroke-focus: 2px;
  --loop-radius-none: 0px;
  --loop-radius-small: 4px;
  --loop-radius-control: 6px;
  --loop-radius-panel: 9px;
  --loop-radius-overlay: 12px;
  --loop-radius-full: 999px;
  --loop-focus-width: var(--loop-stroke-focus);
  --loop-focus-offset: 2px;
  --loop-elevation-geometry-zero: 0px;
  --loop-elevation-geometry-raised-y: 1px;
  --loop-elevation-geometry-raised-blur: 2px;
  --loop-elevation-geometry-overlay-y: 16px;
  --loop-elevation-geometry-overlay-blur: 44px;
  --loop-elevation-geometry-inset-y: 1px;
  --loop-elevation-geometry-inset-blur: 3px;
  --loop-elevation-geometry-keyline-spread: 1px;
  --loop-duration-quick: 120ms;
  --loop-duration-normal: 180ms;
  --loop-duration-deliberate: 320ms;
}

:root, [data-brand-theme="dark"] {
  --loop-color-background: #0a1020;
  --loop-color-surface: #0f1628;
  --loop-color-surface-raised: #151d30;
  --loop-color-surface-overlay: #1a2035;
  --loop-color-text: #eef1f7;
  --loop-color-text-muted: #8f96a8;
  --loop-color-text-faint: #525a70;
  --loop-color-interactive-default: #0077ff;
  --loop-color-interactive-hover: #3392ff;
  --loop-color-interactive-pressed: #0055cc;
  --loop-color-interactive-focus: #c7ff3a;
  --loop-color-interactive-surface: #112b4e;
  --loop-color-status-info: #32d5e6;
  --loop-color-status-warning: #ffc247;
  --loop-color-status-error: #ff2d5d;
  --loop-color-live: #c7ff3a;
  --loop-color-destructive: #ff2d5d;
  --loop-color-border: #242b40;
  --loop-color-border-soft: #1a2035;
  --loop-color-border-strong: #525a70;
  --loop-elevation-raised: var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-raised-blur) var(--loop-elevation-geometry-zero) rgb(4 6 12 / 0.7), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) rgb(255 255 255 / 0.09);
  --loop-elevation-overlay: var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-overlay-y) var(--loop-elevation-geometry-overlay-blur) var(--loop-elevation-geometry-zero) rgb(4 6 12 / 0.78), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) rgb(255 255 255 / 0.1);
  --loop-elevation-inset: inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-inset-y) var(--loop-elevation-geometry-inset-blur) var(--loop-elevation-geometry-zero) rgb(4 6 12 / 0.5), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-keyline-spread) rgb(4 6 12 / 0.12);
}

[data-brand-theme="light"] {
  --loop-color-background: #f5f6fb;
  --loop-color-surface: #e8ebf4;
  --loop-color-surface-raised: #ffffff;
  --loop-color-surface-overlay: #ffffff;
  --loop-color-text: #0a1020;
  --loop-color-text-muted: #525a70;
  --loop-color-text-faint: #8f96a8;
  --loop-color-interactive-default: #0055cc;
  --loop-color-interactive-hover: #003f99;
  --loop-color-interactive-pressed: #002f73;
  --loop-color-interactive-focus: #6b8f1f;
  --loop-color-interactive-surface: #edf5ff;
  --loop-color-status-info: #00788a;
  --loop-color-status-warning: #8a5a00;
  --loop-color-status-error: #d6205a;
  --loop-color-live: #6b8f1f;
  --loop-color-destructive: #d6205a;
  --loop-color-border: #d6dae5;
  --loop-color-border-soft: #e8ebf2;
  --loop-color-border-strong: #8f96a8;
  --loop-elevation-raised: var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-raised-blur) var(--loop-elevation-geometry-zero) rgb(10 16 32 / 0.16), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) rgb(255 255 255 / 0.65);
  --loop-elevation-overlay: var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-overlay-y) var(--loop-elevation-geometry-overlay-blur) var(--loop-elevation-geometry-zero) rgb(10 16 32 / 0.18), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) rgb(255 255 255 / 0.75);
  --loop-elevation-inset: inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-inset-y) var(--loop-elevation-geometry-inset-blur) var(--loop-elevation-geometry-zero) rgb(10 16 32 / 0.18), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-keyline-spread) rgb(10 16 32 / 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-brand-theme="dark"]) {
    --loop-color-background: #f5f6fb;
    --loop-color-surface: #e8ebf4;
    --loop-color-surface-raised: #ffffff;
    --loop-color-surface-overlay: #ffffff;
    --loop-color-text: #0a1020;
    --loop-color-text-muted: #525a70;
    --loop-color-text-faint: #8f96a8;
    --loop-color-interactive-default: #0055cc;
    --loop-color-interactive-hover: #003f99;
    --loop-color-interactive-pressed: #002f73;
    --loop-color-interactive-focus: #6b8f1f;
    --loop-color-interactive-surface: #edf5ff;
    --loop-color-status-info: #00788a;
    --loop-color-status-warning: #8a5a00;
    --loop-color-status-error: #d6205a;
    --loop-color-live: #6b8f1f;
    --loop-color-destructive: #d6205a;
    --loop-color-border: #d6dae5;
    --loop-color-border-soft: #e8ebf2;
    --loop-color-border-strong: #8f96a8;
    --loop-elevation-raised: var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-raised-blur) var(--loop-elevation-geometry-zero) rgb(10 16 32 / 0.16), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) rgb(255 255 255 / 0.65);
    --loop-elevation-overlay: var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-overlay-y) var(--loop-elevation-geometry-overlay-blur) var(--loop-elevation-geometry-zero) rgb(10 16 32 / 0.18), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-raised-y) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) rgb(255 255 255 / 0.75);
    --loop-elevation-inset: inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-inset-y) var(--loop-elevation-geometry-inset-blur) var(--loop-elevation-geometry-zero) rgb(10 16 32 / 0.18), inset var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-zero) var(--loop-elevation-geometry-keyline-spread) rgb(10 16 32 / 0.08);
  }
}