html {
  font-size: 20px;
}

/* ===================================================== */
/* =============== SCRAVITY LIGHT THEME ================= */
/* ===================================================== */

:root:has(input.theme-controller[value=scravity]:checked),
[data-theme="scravity"] {
  color-scheme: light;

  /* ---------- BRAND ---------- */
  --color-primary: oklch(55% 0.22 250);
  --color-primary-content: oklch(100% 0 0);

  /* ---------- MONOCHROME ---------- */
  --color-secondary: oklch(12% 0 0);
  --color-secondary-content: oklch(100% 0 0);

  --color-accent: oklch(12% 0 0);
  --color-accent-content: oklch(100% 0 0);

  --color-neutral: oklch(0% 0 0);
  --color-neutral-content: oklch(100% 0 0);

  /* ---------- BASE SCALE (PicoCSS style) ---------- */
  --color-base-100: oklch(97% 0.01 255); /* #f6f7f9 page background */
  --color-base-200: oklch(94% 0.01 255); /* cards */
  --color-base-300: oklch(88% 0.01 255); /* borders */
  --color-base-content: oklch(12% 0 0);

  /* ---------- STATUS ---------- */
  /* Harder, high-saturation colors for light mode */
  --color-info: oklch(50% 0.25 250);     /* Vivid, deep blue */
  --color-success: oklch(55% 0.25 145);  /* Vivid, solid green */
  --color-warning: oklch(65% 0.25 65);   /* Vivid, hard orange/amber */
  --color-error: oklch(55% 0.25 25);     /* Stark, vivid red */

  --color-info-content: oklch(100% 0 0);
  --color-success-content: oklch(100% 0 0);
  --color-warning-content: oklch(0% 0 0);
  --color-error-content: oklch(100% 0 0);

  /* ---------- SHAPE ---------- */
  --radius-selector: 0rem;
  --radius-field: 0rem;
  --radius-box: 0rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* ===================================================== */
/* ================= SCRAVITY DARK THEME =============== */
/* ===================================================== */

:root:has(input.theme-controller[value=scravity-dark]:checked),
[data-theme="scravity-dark"] {
  color-scheme: dark;

  /* ---------- BRAND ---------- */
  --color-primary: oklch(65% 0.22 250);
  --color-primary-content: oklch(10% 0 0);

  /* ---------- MONOCHROME ---------- */
  --color-secondary: oklch(90% 0 0);
  --color-secondary-content: oklch(10% 0 0);

  --color-accent: oklch(90% 0 0);
  --color-accent-content: oklch(10% 0 0);

  --color-neutral: oklch(100% 0 0);
  --color-neutral-content: oklch(10% 0 0);

  /* ---------- BASE SCALE (PicoCSS dark background) ---------- */
  --color-base-100: oklch(18% 0.02 255); /* #11191f page background */
  --color-base-200: oklch(22% 0.02 255); /* cards */
  --color-base-300: oklch(30% 0.02 255); /* borders */
  --color-base-content: oklch(95% 0 0);

  /* ---------- STATUS ---------- */
  /* Harder, bright neon-like colors for dark mode */
  --color-info: oklch(70% 0.22 250);     /* Bright, vivid blue */
  --color-success: oklch(75% 0.25 145);  /* Bright, vivid green */
  --color-warning: oklch(80% 0.25 65);   /* Bright, stark yellow-orange */
  --color-error: oklch(60% 0.25 25);     /* Stark, vivid red */

  --color-info-content: oklch(10% 0 0);
  --color-success-content: oklch(10% 0 0);
  --color-warning-content: oklch(10% 0 0);
  --color-error-content: oklch(100% 0 0);

  /* ---------- SHAPE ---------- */
  --radius-selector: 0rem;
  --radius-field: 0rem;
  --radius-box: 0rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* ===================================================== */
/* ================= TYPOGRAPHY ======================== */
/* ===================================================== */

* {
  font-family: 'IBM Plex Sans', sans-serif;
}

code {
  font-family: 'IBM Plex Mono', monospace;
}

#hero-sec{
  background-image: radial-gradient(#00a0ff 1px, transparent 1px), radial-gradient(#00a0ff 1px, transparent 1px);
background-size: 118px 118px;
background-position: 0 0, calc(118px / 2) calc(118px / 2);
}