@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Oxanium:wght@200..800&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import "tailwindcss";

/* Base design tokens that generate classes like bg-primary, text-text, etc. */
@theme {
  --color-bg: #0e1116; /* defaults = Theme A */
  --color-text: #e1e8ee;
  --color-primary: #3d8eff;
  --color-secondary: #1a1f26;
  --color-tertiary: #00c9a7;
  --color-contrast: #9ca3af;

  --font-main: "IBM Plex Sans", sans-serif;
  --font-title: "Oxanium", sans-serif;
  --font-name:   "Quantico", sans-serif;  

}

/* A–E themes: override the same tokens inside an attribute scope */
html[data-theme="a"] {
  --color-bg: #0e1116;
  --color-secondary: #1a1f26;
  --color-text: #e1e8ee;
  --color-primary: #3d8eff;
  --color-tertiary: #00c9a7;
  --color-contrast: #9ca3af;
}

html[data-theme="b"] {
  --color-bg: #120e0e;
  --color-secondary: #1c1818;
  --color-text: #fefcfb;
  --color-primary: #ff7043;
  --color-tertiary: #ffd166;
  --color-contrast: #a3948c;
}

html[data-theme="c"] {
  --color-bg: #0d1318;
  --color-secondary: #1b242c;
  --color-text: #e8ecef;
  --color-primary: #00a3c4;
  --color-tertiary: #ff8a70;
  --color-contrast: #9ca3af;
}

html[data-theme="d"] {
  --color-bg: #0f1014;
  --color-secondary: #1d1f24;
  --color-text: #eaecef;
  --color-primary: #6c78ff;
  --color-tertiary: #a97bff;
  --color-contrast: #9ca3af;
}

html[data-theme="e"] {
  --color-bg: #0c1114;
  --color-secondary: #182127;
  --color-text: #edeff1;
  --color-primary: #00d2a2;
  --color-tertiary: #ffca57;
  --color-contrast: #9ca3af;
}

/* theme-aware hero color follows --color-primary */
:root {
  --hero-core: var(--color-primary);
}

@layer utilities {
  /* Mobile / default */
  .bg-hero {
    background:
      /* Top-right radial accent, similar to desktop */ radial-gradient(
        120% 100% at 80% 10%,
        color-mix(in oklab, var(--color-primary) 32%, transparent) 0%,
        transparent 60%
      ),
      /* Slight linear sweep from top to bottom */
        linear-gradient(
          180deg,
          #0a0d13 0%,
          var(--color-bg) 40%,
          color-mix(in oklab, var(--color-primary) 10%, var(--color-bg) 90%)
            100%
        );
  }
}
/* Desktop override */
@media (min-width: 768px) {
  .bg-hero {
    background:
      /* small, softer highlight lower than the portrait rim */ radial-gradient(
        95% 70% at 50% 28%,
        color-mix(in oklab, var(--hero-core) 18%, transparent 82%) 0%,
        transparent 56%
      ),
      /* gentle bottom vignette for depth */
        radial-gradient(
          130% 90% at 50% 120%,
          rgba(0, 0, 0, 0.32) 0%,
          rgba(0, 0, 0, 0) 58%
        ),
      /* base linear sweep */
        linear-gradient(
          185deg,
          #0b0f15 0%,
          var(--color-bg) 40%,
          color-mix(in oklab, var(--hero-core) 12%, var(--color-bg) 88%) 100%
        );
  }
}

@media (min-width: 768px) {
  /* Theme A – deep blue */
  html[data-theme="a"] .bg-hero {
    background: radial-gradient(
        135% 120% at 80% 48%,
        color-mix(in oklab, var(--color-primary) 65%, black 35%) 0%,
        color-mix(in oklab, var(--color-primary) 45%, black 55%) 38%,
        transparent 74%
      ),
      linear-gradient(
        165deg,
        #080b10 0%,
        color-mix(in oklab, var(--color-bg) 70%, black 30%) 46%,
        #0a1324 100%
      );
  }

  html[data-theme="b"] .bg-hero {
    background: radial-gradient(
        140% 110% at 76% 46%,
        color-mix(in oklab, var(--color-primary) 60%, black 40%) 0%,
        color-mix(in oklab, var(--color-primary) 40%, black 60%) 36%,
        transparent 70%
      ),
      linear-gradient(
        185deg,
        #140c0b 0%,
        var(--color-bg) 40%,
        color-mix(in oklab, var(--color-tertiary) 6%, var(--color-bg) 94%) 100%
      );
  }
  /* Theme C – teal/cyan */
  html[data-theme="c"] .bg-hero {
    background: radial-gradient(
        140% 120% at 76% 48%,
        color-mix(in oklab, var(--color-primary) 58%, black 42%) 0%,
        color-mix(in oklab, var(--color-primary) 40%, black 60%) 36%,
        transparent 72%
      ),
      linear-gradient(
        165deg,
        #081016 0%,
        color-mix(in oklab, var(--color-bg) 62%, black 38%) 44%,
        #0a1822 100%
      );
  }

  /* Theme D – indigo/violet */
  html[data-theme="d"] .bg-hero {
    background: radial-gradient(
        135% 120% at 80% 48%,
        color-mix(in oklab, var(--color-primary) 60%, black 40%) 0%,
        color-mix(in oklab, var(--color-primary) 38%, black 62%) 36%,
        transparent 72%
      ),
      linear-gradient(
        165deg,
        #090a10 0%,
        color-mix(in oklab, var(--color-bg) 68%, black 32%) 46%,
        #111328 100%
      );
  }

  /* Theme E – emerald */
  html[data-theme="e"] .bg-hero {
    background: radial-gradient(
        140% 120% at 78% 48%,
        color-mix(in oklab, var(--color-primary) 58%, black 42%) 0%,
        color-mix(in oklab, var(--color-primary) 38%, black 62%) 34%,
        transparent 70%
      ),
      linear-gradient(
        165deg,
        #07100e 0%,
        color-mix(in oklab, var(--color-bg) 64%, black 36%) 44%,
        #0a1c1a 100%
      );
  }
}
@media (min-width: 768px) {
  .bg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* left-to-right fade of darkness */
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.34) 30%,
      rgba(0, 0, 0, 0.18) 42%,
      rgba(0, 0, 0, 0) 50%
    );
    z-index: 0;
  }
  /* keep content above the overlay */
  .bg-hero > * {
    position: relative;
    z-index: 1;
  }
}

@layer utilities {
  .img-glow {
    background:
      radial-gradient(
        68% 68% at 50% 42%,       
        color-mix(in oklab, var(--color-primary) 100%, black 0%) 0%,
        color-mix(in oklab, var(--color-primary) 70%, black 30%) 40%,
        color-mix(in oklab, var(--color-primary) 45%, black 55%) 70%,
        color-mix(in oklab, var(--color-primary) 20%, black 80%) 85%
      ),
      radial-gradient(
        80% 80% at 50% 50%,        
        rgba(0,0,0,0) 58%,
        rgba(0,0,0,0.35) 78%,
        rgba(0,0,0,0.55) 100%
      );
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
  }
}