:root {
  /* Constant Colors (Don't change between themes) */
  --c-white: #FAFAFA;
  --c-black: #0A0A0A;
  --cyan: #00C8D4;
  --cyan-light: #7EEEF4;
  --cyan-dark: #009BA5;
  --red: #FF2D2D;
  --red-light: #FFECEC;
  --gray: #888;

  /* Standard Utility Colors (For legacy fallback or specific uses) */
  --white: var(--c-white);
  --black: var(--c-black);

  /* Functional Tokens - LIGHT */
  --bg-body: var(--c-white);
  --text-main: var(--c-black);
  --text-dim: #555555;
  --text-gray: #888888;
  --header-bg: rgba(250, 250, 250, 0.93);
  --border: rgba(0, 200, 212, 0.15);
  --card-bg: var(--c-white);
  --footer-bg: var(--c-white);
  --input-bg: rgba(0, 0, 0, 0.03);
  --bg-gradient: radial-gradient(circle at 50% 50%, rgba(0, 212, 212, 0.06) 0%, transparent 80%);
  --blob-opacity: 0.18;
  --invert-logo: 0;
  --marquee-bg: var(--c-black);
  --marquee-text: var(--c-white);
  --bg-glass: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] {
  /* Functional Tokens - DARK */
  --bg-body: #050505;
  --text-main: #FFFFFF;
  --text-dim: #A0A0A0;
  --text-gray: #707070;
  --header-bg: #050505;
  /* Pitch black instead of transparent to avoid gray appearance */
  --border: rgba(0, 200, 212, 0.25);
  --card-bg: #0C0C0C;
  --footer-bg: #050505;
  --input-bg: rgba(255, 255, 255, 0.05);
  --bg-gradient: radial-gradient(circle at 50% 50%, rgba(0, 212, 212, 0.14) 0%, transparent 80%);
  --blob-opacity: 0.24;
  --invert-logo: 100%;
  --marquee-bg: #000000;
  --marquee-text: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.05);
}

body {
  font-family: 'Onest', sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  overflow-x: hidden;
  cursor: none;
  transition: background 1.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  min-height: 100vh;
}

/* Adaptive States - Red accents only for Agencies */
body.body-red {
  background: var(--bg-body) !important;
}

body.body-red .sec-label,
body.body-red .hero-tag {
  color: var(--red);
}

body.body-red .sec-label::before,
body.body-red .hero-tag::before {
  background: var(--red);
}

body.body-red .big-title span[style*="color:var(--red)"] {
  color: var(--red) !important;
}

.modal-body {
  padding: 32px 36px 40px;
}


/* Smooth theme transitions for all elements */
*,
*::before,
*::after {
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              fill 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              stroke 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Exclude specific animations from theme transition */
.cursor,
.cursor-ring,
.blob {
  transition: background 1.5s ease, transform 0.5s ease !important;
}