body {
  --main-100-rgb: 13, 14, 20;
  --main-100: #0d0e14; 
  --main-200-rgb: 33, 37, 48;
  --main-200: #22262f;
  --main-220: #2a2e3a;
  --main-300: #73859c;
  --main-300-rgb: 115, 133, 156;
  --main-400: #aec0d6;
  --main-500: #ebedf0;
  --main-500-rgb: 235, 237, 240;

  /* System accent colors */
  --accent-100: #5b2b24;
  --accent-200: #b8873e;
  --accent-300: #FBBF65;
  --accent-400: #FFFB70;
  --accent-500: #fff5e7;
  --accent-500-rgb: 255, 245, 231;

  --accent-gradient-200: linear-gradient(70deg, var(--accent-300), var(--accent-200));
  --accent-gradient-300: linear-gradient(70deg, var(--accent-400), var(--accent-300));
  --accent-gradient-400: linear-gradient(70deg, var(--accent-500), var(--accent-400));

  --red-200: #461620;
  --red-300: #c51754;
  --red-400: #e3224f;
  --red-500: #FF567F;

  --lime-100: #0f3427;
  --lime-300: #7cee3f;
  --lime-400: #b6f950;

  --header-height: 50px;
  --nav-height: calc(60px + 2*var(--padding-m));
  --side-padding: 10px;

  --padding-s: 5px;
  --padding-m: 10px;
  --padding-l: 30px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  --font-size-s: 15px;

  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media (prefers-color-scheme: light) {
  body {
    /* Apple-style "light mode" color scheme */

    /* background */
    --main-100: #f3f3f3;          /* Soft, neutral canvas */
    --main-100-rgb: 246, 246, 246;
    --main-200: #f2f2f7;          /* iOS grouped bg (systemGroupedBackground) */
    --main-200-rgb: 242, 242, 247;
    --main-220: #ffffff;          /* Pure white for cards/surfaces */
    --main-300: #9b9ba9;          /* Subtle borders (separator color) */
    --main-300-rgb: 155, 155, 169;

    /* foreground */
    --main-400: #616e72;          /* Primary text, 60% opacity (iOS label color) */
    --main-500: #1c1c1e;          /* Hard black, title text (iOS/Apple default) */
    --main-500-rgb: 28, 28, 30;



    --accent-gradient-200: linear-gradient(70deg, var(--accent-200), var(--accent-300));
    --accent-gradient-300: linear-gradient(70deg, var(--accent-300), var(--accent-400));
    --accent-gradient-400: linear-gradient(70deg, var(--accent-400), var(--accent-500));
  }
}

html, body {
  overscroll-behavior-y: none;
  -webkit-touch-callout: none;
}

body {
  height: 100vh;
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--main-100);
  
  color: var(--main-500);
  transition: background-color 170ms linear;
  position: relative; /* Needed for z-index stacking */
  z-index: 0; /* Needed for z-index stacking */
  overflow-x: hidden;
  /* Hide scrollbar for iOS */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ADD this new rule */
body::before {
  content: '';
  position: fixed; /* Fixes to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* Place it behind the body content */
  
  /* Move the background properties here */
  background-image: 
    linear-gradient(to bottom, var(--main-100) 0%, transparent 50%);
  /* background-image: 
    linear-gradient(to bottom, var(--main-100) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20L0 0h40L20 20zm0 0l20 20H0l20-20z' fill='rgba(33, 37, 48, 0.5)' fill-rule='evenodd'/%3E%3C/svg%3E"); */
  background-size: 100% 100%, 40px 40px;
}

::-webkit-scrollbar {
  width: 2px;
  background-color: inherit;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-300);
  border-radius: 4px;
}

@supports (height: 100dvh) {
  body { height: 100dvh; }
}