:root {
  --bg: #000000;
  --bg-1: #171717;
  --bg-2: #0f0f0f;
  --bg-3: #151515;
  --bg-4: #1a1a1a;
  --border: rgba(255, 255, 255, 0.07);
  --border-md: rgba(255, 255, 255, 0.11);
  --border-hi: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.58);
  --text-3: rgba(255, 255, 255, 0.32);
  --text-4: rgba(255, 255, 255, 0.18);
  --accent: #ffffff;
  --blue: #0070f3;
  --blue-dim: rgba(0, 112, 243, 0.12);
  --blue-glow: rgba(0, 112, 243, 0.25);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "SF Mono", "Cascadia Code", monospace;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --section-pad: clamp(80px, 10vw, 140px);
  --theme-transition:
    background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}


[data-theme="light"] {
  --bg: #bec4d0;
  --bg-1: #ffffff;
  --bg-2: #f8fafc;
  --bg-3: #eef2f7;
  --bg-4: #e2e8f0;
  --border: rgba(15, 23, 42, 0.08);
  --border-md: rgba(15, 23, 42, 0.12);
  --border-hi: rgba(15, 23, 42, 0.18);
  --text: #0f172a;
  --text-2: rgba(15, 23, 42, 0.72);
  --text-3: rgba(15, 23, 42, 0.52);
  --text-4: rgba(15, 23, 42, 0.28);
  --accent: #0f172a;
  --blue: #2563eb;
  --blue-dim: rgba(37, 99, 235, 0.08);
  --blue-glow: rgba(37, 99, 235, 0.18);
}