:root {
    --clr-slate800:#0F172A;
    --clr-ntrl400:#A3A3A3;
    --clr-stn300:#D6D3D1;
    --clr-org:#f97316;
    --clr-amb:#f59e0b;
    --clr-dtrq:#00ced1;
    --clr-trq:#40e0d0;
    --clr-rd800: #991b1b;
    --clr-drkrse: #4c0519;
    --clr-lrs: #fb7185;
    --clr-fsa: #c026d3;
    --clr-rse: #e11d48;
    --clr-drk: #030712;
    --clr-lgt: #e5e7eb;
    --clr-dre: #e11d48;
     --clr-dre-900: #8f102d;  /* deep crimson – headers, overlays */
  --clr-dre-700: #b3133a;  /* strong accent – buttons, emphasis */
  --clr-dre-500: #e11d48;  /* base – primary brand red */
  --clr-dre-300: #f25574;  /* hover / highlight */
  --clr-dre-100: #f9a3b4;  /* soft background / subtle UI */
    --clr-blood-900: #5f0a1a; /* almost blackened blood */
  --clr-blood-800: #7a0d22;
  --clr-blood-700: #94102a;
  --clr-blood-600: #b31235;
--clr-blood-500: #cc1a3f; /* usable primary blood accent */
--clr-dre-500-rgb: 225, 29, 72;
  --clr-dre-700-rgb: 179, 19, 58;
    --clr-blood-700-rgb: 148, 16, 42;
  --clr-blood-600-rgb: 179, 18, 53;
 --clr-brick-900: #6b2a1a; /* fired brick shadow */
  --clr-brick-800: #82311f;
  --clr-brick-700: #9a3a25;
  --clr-brick-600: #b4452f;
  --clr-brick-500: #cc513a; /* classic brick red */
  
    --clr-ind: #6366f1; 
    --clr-purp: #4a044e;
    --clr-ylw: #f4f802;
    --clr-gn: #bbf7d0;
--size-xxs: 0.5rem;
--size-xs:  0.75rem;
--size-s:   0.875rem; 
--size-base: 1rem;
--size-lg: 1.125rem;
--size-xl: 1.25rem;
--size-2xl: 1.5rem;
--size-3xl: 1.875rem;
--size-4xl: 2.25rem;
--size-5xl: 3rem;
--size-6xl: 3.75rem;
--size-7xl: 4.5rem;
--size-8xl: 6rem;
--size-9xl: 8rem;
--size-10xl: 10rem;
    
}


/* Make sure everything respects container width */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent images from forcing overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Let flex items shrink if needed */
.container > * {
  min-width: 0;
}

* {
    margin: 0;
    line-height: calc(1em + 0.5rem); 
}

html {
    scroll-behavior: smooth;
}

.light-mode {
    --clr-drk: #e5e7eb;
    --clr-lgt: #030712;
    --clr-slate800:#0F172A;
    --clr-ntrl400:#0F172A;
    --clr-stn300:#0F172A;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(
      circle at center,
      rgba(179, 18, 53, 0.18), /* stronger red glow */
      transparent 88%
    ),
    var(--clr-drk);
}


img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    user-select: none;
}

button {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

a {
    color: var(--clr-rd800);
}
 
strong {
    color: var(--clr-dre);
}