@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --accent-rgb: 255, 205, 46;
  --text-main-rgb: 18, 17, 19;
  --bg-base: #f2f4fa;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #e9ebf3;
  --bg-surface-3: #dfe2ec;
  --bg-input: #eceef5;
  --bg-surface-glass-soft: rgba(255, 255, 255, 0.76);
  --bg-surface-glass: rgba(255, 255, 255, 0.86);
  --bg-surface-glass-strong: rgba(255, 255, 255, 0.92);
  --bg-surface-glass-xl: rgba(255, 255, 255, 0.96);
  --bg-surface-hover: rgba(18, 17, 19, 0.04);
  --bg-surface-active: rgba(18, 17, 19, 0.07);
  --bg-surface-accent-soft: rgba(var(--accent-rgb), 0.14);
  --bg-surface-accent-selected: #fff9df;
  --border-subtle: #d9dde8;
  --border-soft: #e4e7f0;
  --border-strong: #c8cedb;
  --accent-main: #ffcd2e;
  --accent-main-hover: #f6c116;
  --accent-dim: rgba(var(--accent-rgb), 0.18);
  --accent-text: #121113;
  --accent-text-dim: rgba(18, 17, 19, 0.78);
  --text-main: #121113;
  --text-dim: #3a3940;
  --text-muted: #6f6e78;
  --error: #e5484d;
  --error-bg: rgba(229, 72, 77, 0.12);
  --success: #12a150;
  --success-hover: #0f8a44;
  --success-bg: rgba(18, 161, 80, 0.12);
  --warning: #f76b15;
  --warning-bg: rgba(247, 107, 21, 0.12);
  --critical: #bd5b00;
  --critical-bg: rgba(189, 91, 0, 0.12);
  --info: #5b67ca;
  --info-bg: rgba(91, 103, 202, 0.12);
  --complete: #7c3aed;
  --complete-bg: rgba(124, 58, 237, 0.06);
  --complete-border: rgba(124, 58, 237, 0.14);
  --state-neutral: #64748b;
  --state-neutral-dim: #6d7d92;
  --state-neutral-bg: rgba(114, 140, 176, 0.1);
  --state-neutral-border: rgba(114, 140, 176, 0.18);
  --state-orange: #ff8a1f;
  --state-orange-bg: rgba(255, 138, 31, 0.12);
  --state-orange-border: rgba(255, 138, 31, 0.22);
  --state-accent-border: rgba(var(--accent-rgb), 0.34);
  --state-accent-border-strong: rgba(var(--accent-rgb), 0.48);
  --state-success-border: rgba(18, 161, 80, 0.18);
  --state-success-bg-strong: rgba(18, 161, 80, 0.08);
  --state-warning-border: rgba(247, 107, 21, 0.14);
  --state-warning-bg-soft: rgba(247, 107, 21, 0.05);
  --state-info-border-soft: rgba(91, 103, 202, 0.14);
  --state-info-border: rgba(91, 103, 202, 0.18);
  --state-info-bg-strong: rgba(91, 103, 202, 0.08);
  --pico-primary-focus: rgba(var(--accent-rgb), 0.28);
  --pico-secondary-focus: rgba(var(--text-main-rgb), 0.12);
  --status-cancel-bg: var(--state-neutral-bg);
  --status-cancel-border: var(--state-neutral-border);
  --status-cancel-title: var(--text-main);
  --status-cancel-text: var(--text-dim);
  --status-interrupted-bg: var(--state-warning-bg-soft);
  --status-interrupted-border: var(--state-warning-border);
  --status-interrupted-title: var(--critical);
  --status-interrupted-text: var(--text-dim);
  --status-error-bg: var(--error-bg);
  --status-error-border: var(--state-accent-border-strong);
  --status-error-title: var(--error);
  --status-error-text: var(--text-dim);
  --thread-entry-loading-bg: var(--state-orange-bg);
  --thread-entry-loading-bg-hover: rgba(255, 138, 31, 0.18);
  --thread-entry-done-bg: var(--bg-surface-accent-soft);
  --thread-entry-done-bg-hover: var(--bg-surface-accent-selected);
  --thread-entry-active-border: var(--state-accent-border-strong);
  --thread-entry-active-ring: rgba(var(--accent-rgb), 0.14);
}