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

:root {

  --bg: #07060f;
  --surface-1: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --surface-solid: #161320;
  --field: rgba(255,255,255,.05);

  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);

  --line-brand: rgba(168,85,247,.22);

  --text: #F5F4FC;
  --text-2: #D6D4EE;
  --text-muted: #A5A2C4;

  --accent: #818CF8;
  --accent-soft: rgba(129,140,248,.18);
  --accent-grad: linear-gradient(135deg,#A855F7 0%,#6366F1 50%,#3B82F6 100%);

  --on-accent: #FFFFFF;

  --danger: #F87171;
  --danger-soft: rgba(239,68,68,.16);
  --success: #4ADE80;
  --success-soft: rgba(52,211,153,.16);
  --warning: #FBBF24;
  --warning-soft: rgba(245,158,11,.16);
  --info: #22D3EE;
  --info-soft: rgba(34,211,238,.16);

  --brand-1: #A855F7;
  --brand-2: #6366F1;
  --brand-3: #3B82F6;

  --brand-pink: #EC4899;
  --brand-teal: #14B8A6;

  --font: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero-lg: 80px;
  --fs-hero: 56px;
  --fs-display: 32px;
  --fs-title: 20px;
  --fs-heading: 16px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 50%;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.16);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --sidebar-w: 250px;
  --sidebar-w-rail: 64px;
  --sidebar-transition: 220ms var(--ease);
}

[data-theme="light"] {
  --bg: #F4F3FA;
  --surface-1: #FFFFFF;
  --surface-2: #F2F2F3;
  --surface-solid: #FFFFFF;
  --field: #FAFAFA;

  --line: #E5E5E5;
  --line-strong: #D4D4D4;
  --line-brand: rgba(124,58,237,.22);

  --text: #111111;
  --text-2: #3A3A3D;
  --text-muted: #6E6E73;

  --accent: #111111;
  --accent-soft: #F0F0F1;
  --accent-grad: #111111;

  --danger: #EA4335;
  --danger-soft: #FCE8E6;
  --success: #34A853;
  --success-soft: #E6F4EA;
  --warning: #9A5B12;
  --warning-soft: #FBF1E1;
  --info: #4285F4;
  --info-soft: #E8F0FE;

  --brand-1: #7C3AED;
  --brand-2: #4F46E5;
  --brand-3: #2563EB;
  --brand-pink: #DB2777;
  --brand-teal: #0F766E;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
}

:root {

  --panel: var(--surface-1);
  --panel2: var(--surface-2);
  --panel-solid: var(--surface-solid);
  --input-bg: var(--field);
  --stroke: var(--line);
  --stroke2: var(--line-strong);
  --txt: var(--text);
  --txt2: var(--text-2);
  --muted: var(--text-muted);
  --indigo: var(--accent);
  --indigod: var(--accent-soft);
  --grad: var(--accent-grad);
  --red: var(--danger);
  --redd: var(--danger-soft);
  --green: var(--success);
  --greend: var(--success-soft);
  --yellow: var(--warning);
  --yellowd: var(--warning-soft);
  --cyan: var(--info);
  --cyand: var(--info-soft);
  --blue: var(--brand-3);
  --blued: var(--info-soft);
  --gray: var(--text-muted);
  --grayd: var(--surface-2);
  --p1: var(--brand-1);
  --p2: var(--brand-2);
  --p3: var(--brand-3);
  --kalk-bg: var(--surface-solid);
  --tooltip-bg: var(--surface-2);
  --tooltip-border: var(--line);
  --select-bg: var(--field);
  --select-border: var(--line);
  --select-opt-bg: var(--surface-solid);
  --select-opt-fg: var(--text);

  --bg-main: var(--bg);
  --bg-card: var(--surface-1);
  --bg-elevated: var(--surface-1);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text-main: var(--text);
  --purple: var(--brand-1);
  --amber: var(--warning);
  --pink: var(--brand-pink);
  --teal: var(--brand-teal);

  --ink: var(--text);
  --ink-dim: var(--text-2);
  --ink-faint: var(--text-muted);
  --line-soft: var(--line);
  --bg-raise: var(--surface-1);
  --bg-raise-2: var(--surface-2);
  --raise: var(--surface-1);
  --sidebar-bg: var(--surface-solid);
  --violet: var(--brand-1);
  --indigo-soft: var(--accent-soft);
  --ok: var(--success);
}