/* generated from src/styles/phase70-tokens.css */
:root {
  color-scheme: dark;
  --font-ui:
    "HarmonyOS Sans SC",
    "MiSans",
    "PingFang SC",
    "Microsoft YaHei UI",
    "Noto Sans SC",
    "Noto Sans CJK SC",
    "Noto Sans",
    "Segoe UI",
    "SF Pro Text",
    "Helvetica Neue",
    sans-serif;
  --font-numeric:
    "JetBrains Mono",
    "SF Mono",
    "Roboto Mono",
    "DIN Alternate",
    monospace;
  --kf-bg: #070a0d;
  --kf-surface-0: #0b0f13;
  --kf-surface-1: #11161c;
  --kf-surface-2: #171e25;
  --kf-surface-3: #202832;
  --kf-surface-inset: #05080b;
  --kf-border-soft: #252d36;
  --kf-border: #303a45;
  --kf-border-strong: #42505e;
  --kf-text-strong: #eef3f8;
  --kf-text: #d9e0e8;
  --kf-text-muted: #9aa6b2;
  --kf-text-faint: #65717d;
  --kf-text-disabled: #4b5661;
  --kf-brand: #dce3ea;
  --kf-selection-mark: #9AA8B3;
  --kf-action: #2f8cff;
  --kf-action-hover: #5aa6ff;
  --kf-action-pressed: #1d6ed6;
  --kf-action-subtle: rgba(47, 140, 255, 0.14);
  --kf-success: #34c896;
  --kf-success-subtle: rgba(52, 200, 150, 0.14);
  --kf-warning: #d7a84a;
  --kf-warning-subtle: rgba(215, 168, 74, 0.15);
  --kf-danger: #e36b6b;
  --kf-danger-subtle: rgba(227, 107, 107, 0.14);
  --kf-info: #79b8ff;
  --kf-info-subtle: rgba(121, 184, 255, 0.14);
  --kf-client-bg: #08090A;
  --kf-client-surface-0: #0E1012;
  --kf-client-surface-1: #171A1D;
  --kf-client-surface-2: #202428;
  --kf-client-surface-3: #2A2F34;
  --kf-client-surface-inset: #0A0C0E;
  --kf-client-border-soft: #30363C;
  --kf-client-border: #3D464E;
  --kf-client-border-strong: #77848F;
  --kf-client-text-strong: #F1F3F5;
  --kf-client-text: #D8DCE0;
  --kf-client-text-muted: #A4ACB3;
  --kf-client-text-faint: #737D85;
  --kf-client-text-disabled: #515A61;
  --kf-client-action: #688AAB;
  --kf-client-action-hover: #7F9EBA;
  --kf-client-action-pressed: #5A7E9F;
  --kf-client-info: #8B969D;
  --phase70-font-family: var(--font-ui);
  --phase70-font-mono: var(--font-numeric);
  --phase70-font-size-page-title: 20px;
  --phase70-line-height-page-title: 28px;
  --phase70-font-size-section-title: 15px;
  --phase70-line-height-section-title: 22px;
  --phase70-font-size-card-title: 13px;
  --phase70-line-height-card-title: 20px;
  --phase70-font-size-body: 13px;
  --phase70-line-height-body: 20px;
  --phase70-font-size-meta: 12px;
  --phase70-line-height-meta: 18px;
  --phase70-font-size-micro: 11px;
  --phase70-line-height-micro: 16px;
  --phase70-font-size-metric: 18px;
  --phase70-line-height-metric: 22px;
  --phase70-font-size-kpi: 22px;
  --phase70-line-height-kpi: 24px;
  --phase70-font-weight-regular: 500;
  --phase70-font-weight-strong: 700;
  --phase70-space-1: 4px;
  --phase70-space-2: 8px;
  --phase70-space-3: 12px;
  --phase70-space-4: 16px;
  --phase70-space-5: 20px;
  --phase70-space-6: 24px;
  --phase70-space-7: 32px;
  --phase70-bg-canvas: var(--kf-bg);
  --phase70-bg-page: var(--kf-bg);
  --phase70-bg-surface: var(--kf-surface-0);
  --phase70-bg-surface-2: var(--kf-surface-1);
  --phase70-bg-surface-3: var(--kf-surface-2);
  --phase70-bg-elevated: var(--kf-surface-1);
  --phase70-border-subtle: var(--kf-border-soft);
  --phase70-border-default: var(--kf-border);
  --phase70-border-strong: var(--kf-border-strong);
  --phase70-divider: var(--kf-border-soft);
  --phase70-text-primary: var(--kf-text-strong);
  --phase70-text-body: var(--kf-text);
  --phase70-text-secondary: var(--kf-text-muted);
  --phase70-text-muted: var(--kf-text-faint);
  --phase70-text-disabled: var(--kf-text-disabled);
  --phase70-accent: var(--kf-action);
  --phase70-accent-strong: var(--kf-action-hover);
  --phase70-accent-ink: var(--kf-bg);
  --phase70-accent-ink-muted: color-mix(in srgb, var(--kf-bg) 72%, transparent);
  --phase70-accent-muted: var(--kf-action-subtle);
  --phase70-accent-border: color-mix(in srgb, var(--kf-action) 42%, transparent);
  --phase70-success: var(--kf-success);
  --phase70-success-bg: var(--kf-success-subtle);
  --phase70-warning: var(--kf-warning);
  --phase70-warning-bg: var(--kf-warning-subtle);
  --phase70-danger: var(--kf-danger);
  --phase70-danger-bg: var(--kf-danger-subtle);
  --phase70-info: var(--kf-info);
  --phase70-info-bg: var(--kf-info-subtle);
  --phase70-overlay-backdrop: color-mix(in srgb, var(--kf-bg) 76%, transparent);
  --phase70-surface-veil: color-mix(in srgb, var(--kf-bg) 96%, transparent);
  --phase70-modal-padding: var(--phase70-space-5);
  --phase70-modal-gap: var(--phase70-space-4);
  --phase70-modal-header-gap: var(--phase70-space-3);
  --phase70-modal-body-gap: var(--phase70-space-4);
  --phase70-shadow-float: 0 10px 28px color-mix(in srgb, var(--kf-bg) 58%, transparent);
  --phase70-shadow-overlay: 0 22px 56px color-mix(in srgb, var(--kf-bg) 72%, transparent);
  --phase70-shadow-selection: 0 0 0 1px var(--phase70-accent-muted);
  --phase70-radius-xs: 4px;
  --phase70-radius-sm: 6px;
  --phase70-radius-md: 8px;
  --phase70-radius-lg: 10px;
  --phase70-radius-pill: 999px;
  --phase70-shadow-none: none;
  --phase70-shadow-hairline: 0 0 0 1px color-mix(in srgb, var(--kf-text-strong) 4%, transparent);
  --phase70-danger-border: color-mix(in srgb, var(--kf-danger) 26%, transparent);
  --phase70-success-border: color-mix(in srgb, var(--kf-success) 28%, transparent);

  --phase70-kind-document-fg: var(--kf-info);
  --phase70-kind-document-bg: var(--kf-info-subtle);
  --phase70-kind-image-fg: var(--kf-warning);
  --phase70-kind-image-bg: var(--kf-warning-subtle);
  --phase70-kind-video-fg: var(--kf-action-hover);
  --phase70-kind-video-bg: var(--kf-action-subtle);
  --phase70-kind-audio-fg: var(--kf-success);
  --phase70-kind-audio-bg: var(--kf-success-subtle);

  --phase55-bg: var(--phase70-bg-page);
  --phase55-surface: color-mix(in srgb, var(--kf-surface-0) 96%, transparent);
  --phase55-surface-solid: var(--phase70-bg-surface);
  --phase55-elevated: color-mix(in srgb, var(--kf-surface-1) 98%, transparent);
  --phase55-subtle: var(--phase70-bg-surface-2);
  --phase55-emphasis: var(--phase70-bg-surface-3);
  --phase55-border: var(--phase70-border-subtle);
  --phase55-border-strong: var(--phase70-border-strong);
  --phase55-divider: var(--phase70-divider);
  --phase55-text: var(--phase70-text-primary);
  --phase55-body: var(--phase70-text-body);
  --phase55-muted: var(--phase70-text-secondary);
  --phase55-weak: var(--phase70-text-muted);
  --phase55-brand: var(--phase70-accent);
  --phase55-brand-strong: var(--phase70-accent-strong);
  --phase55-brand-soft: var(--phase70-accent-muted);
  --phase55-accent-border: var(--phase70-accent-border);
  --phase55-danger: var(--phase70-danger);
  --phase55-danger-bg: var(--phase70-danger-bg);
  --phase55-danger-border-subtle: color-mix(in srgb, var(--kf-danger) 24%, transparent);
  --phase55-overlay-shadow: var(--phase70-shadow-overlay);
  --phase55-float-shadow: var(--phase70-shadow-float);
  --phase55-overlay-inset-shadow: inset 0 0 0 1px var(--phase55-border), var(--phase55-overlay-shadow);
  --phase55-ghost-inset-shadow: inset 0 0 0 1px var(--phase55-ghost-border);
  --phase55-float-surface: color-mix(in srgb, var(--kf-surface-1) 96%, transparent);
  --phase55-overlay-surface: color-mix(in srgb, var(--kf-surface-1) 98%, transparent);
  --phase55-ghost-surface: color-mix(in srgb, var(--kf-text-strong) 4%, transparent);
  --phase55-ghost-surface-strong: color-mix(in srgb, var(--kf-text-strong) 8%, transparent);
  --phase55-ghost-border: color-mix(in srgb, var(--kf-text-strong) 8%, transparent);
  --phase55-ghost-border-strong: color-mix(in srgb, var(--kf-text-strong) 12%, transparent);
  --phase55-ghost-border-active: color-mix(in srgb, var(--kf-text-strong) 18%, transparent);
  --phase55-ghost-surface-active: color-mix(in srgb, var(--kf-text-strong) 10%, transparent);
  --phase55-ghost-surface-soft: color-mix(in srgb, var(--kf-text-strong) 5.5%, transparent);
  --phase55-ghost-surface-soft-2: color-mix(in srgb, var(--kf-text-strong) 4.5%, transparent);
  --phase55-ghost-surface-dim: color-mix(in srgb, var(--kf-text-strong) 6%, transparent);
  --phase55-ghost-surface-chip: color-mix(in srgb, var(--kf-text-strong) 7%, transparent);
  --phase55-text-strong: color-mix(in srgb, var(--kf-text-strong) 94%, transparent);
  --phase55-text-bright: color-mix(in srgb, var(--kf-text-strong) 92%, transparent);
  --phase55-text-soft: color-mix(in srgb, var(--kf-text-strong) 88%, transparent);
  --phase55-text-dim: color-mix(in srgb, var(--kf-text-strong) 80%, transparent);
  --phase55-text-faint: color-mix(in srgb, var(--kf-text-strong) 78%, transparent);
  --phase55-text-fainter: color-mix(in srgb, var(--kf-text-strong) 70%, transparent);
  --phase55-text-subtle: color-mix(in srgb, var(--kf-text-strong) 62%, transparent);
  --phase55-text-weaker: color-mix(in srgb, var(--kf-text-strong) 48%, transparent);
  --phase55-text-weakest: color-mix(in srgb, var(--kf-text-strong) 46%, transparent);
  --phase55-text-anchor: color-mix(in srgb, var(--kf-text-strong) 34%, transparent);
  --phase55-text-icon-muted: color-mix(in srgb, var(--kf-text-faint) 28%, transparent);
  --phase55-provider-image-active: color-mix(in srgb, var(--kf-info) 18%, transparent);
  --phase55-provider-audio-active: color-mix(in srgb, var(--kf-warning) 18%, transparent);
  --phase55-provider-video-active: color-mix(in srgb, var(--kf-success) 16%, transparent);
  --phase55-shell-veil: var(--phase70-surface-veil);
  --phase55-edge-default: color-mix(in srgb, var(--kf-text-muted) 46%, transparent);
  --phase55-edge-active: color-mix(in srgb, var(--kf-action) 64%, transparent);
  --phase55-selection-fill: color-mix(in srgb, var(--kf-action) 8%, transparent);
  --phase55-selection-stroke: color-mix(in srgb, var(--kf-action) 28%, transparent);
  --phase55-minimap-mask: color-mix(in srgb, var(--kf-text-faint) 18%, transparent);
  --phase55-minimap-stroke: color-mix(in srgb, var(--kf-action) 24%, transparent);
  --phase55-minimap-node: var(--kf-border);
  --phase55-group-radius: var(--phase70-radius-md);
  --phase55-pill-radius: var(--phase70-radius-pill);
  --phase55-selection-ring-size: 1px;
  --phase55-media-frame-ring-size: 2px;
  --phase55-handle-ring-size: 4px;
  --phase55-handle-ring-size-hover: 7px;
  --phase55-card-expanded-ring: 0 0 0 1px var(--phase55-brand-soft);
  --phase55-handle-color: color-mix(in srgb, var(--kf-action) 92%, transparent);
  --phase55-handle-border: color-mix(in srgb, var(--kf-action) 32%, transparent);
  --phase55-handle-ring: color-mix(in srgb, var(--kf-action) 14%, transparent);
  --phase55-group-surface: color-mix(in srgb, var(--kf-text-strong) 1%, transparent);
  --phase55-group-selected-surface: color-mix(in srgb, var(--kf-action) 4%, transparent);
  --phase55-group-color-red: var(--kf-danger);
  --phase55-group-color-orange: var(--kf-warning);
  --phase55-group-color-yellow: var(--kf-warning);
  --phase55-group-color-green: var(--kf-success);
  --phase55-group-color-cyan: var(--kf-info);
  --phase55-group-color-blue: var(--kf-action-hover);
  --phase55-group-color-purple: var(--kf-action);
}

body {
  font-family: var(--phase70-font-family);
  color: var(--phase70-text-primary);
  background: var(--phase70-bg-page);
}

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

button {
  border-radius: var(--phase70-radius-sm);
  background: var(--phase70-bg-surface-2);
  color: var(--phase70-text-primary);
  border: 1px solid var(--phase70-border-default);
}

button:hover {
  background: var(--phase70-bg-surface-3);
  border-color: var(--phase70-border-strong);
}

input,
textarea,
select {
  border: 1px solid var(--phase70-border-default);
  border-radius: var(--phase70-radius-sm);
  background: var(--phase70-bg-surface);
  color: var(--phase70-text-primary);
}

label {
  color: var(--phase70-text-secondary);
}