@layer theme, base, components, states;

@layer theme {
  :root[data-theme="theme"] {
    --bg: #f3f6f7;
    --surface: #ffffff;
    --surface-soft: #edf3f4;
    --surface-muted: #e4ecee;
    --rail: #071d33;
    --rail-soft: #0d2a46;
    --rail-line: #31506d;
    --rail-text: #ffffff;
    --rail-text-soft: #b8c9d7;
    --line: #d7e0e3;
    --line-strong: #aebdc2;
    --text: #0c1f36;
    --text-soft: #596979;
    --accent: #078b89;
    --accent-strong: #006d6c;
    --accent-fill-hover: #006d6c;
    --accent-soft: #e1f3f2;
    --success: #18824b;
    --success-soft: #e6f5ec;
    --danger: #c72d2d;
    --danger-soft: #fff0f0;
    --warning: #9b6500;
    --warning-soft: #fff5dc;
    --status-icon: #ffffff;
    --disabled-opacity: 0.48;
    --radius: 10px;
    --radius-small: 6px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --fs-xs: 0.78rem;
    --fs-sm: 0.9rem;
    --fs-md: 1rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.65rem;
    --fs-2xl: 2.5rem;
    color-scheme: light;
  }

  :root[data-theme="theme"][data-color-scheme="dark"] {
    --bg: #07131f;
    --surface: #0e2132;
    --surface-soft: #132b3d;
    --surface-muted: #193448;
    --rail: #04101c;
    --rail-soft: #0c2a43;
    --rail-line: #49667d;
    --rail-text: #f6f9fb;
    --rail-text-soft: #b8c8d5;
    --line: #365064;
    --line-strong: #607a8f;
    --text: #f3f7fa;
    --text-soft: #b8c8d5;
    --accent: #087d7b;
    --accent-strong: #66d6d1;
    --accent-fill-hover: #066b69;
    --accent-soft: #123b3e;
    --success: #64c98c;
    --success-soft: #133528;
    --danger: #ff8a8a;
    --danger-soft: #3a1b23;
    --warning: #f2c66d;
    --warning-soft: #3a2d14;
    --status-icon: #07131f;
    --disabled-opacity: 0.62;
    color-scheme: dark;
  }
}