/* ============================================================
   AdsInHub Design System
   Shared tokens, reset, utilities & animations
   for adsinhub-owners and adsinhub-variations themes.
   ============================================================ */

/* ----------------------------------------------------------
   1. TOKEN SYSTEM
   ---------------------------------------------------------- */
:root {
  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Fluid font-size scale */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);     /* ~11-12px */
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);    /* ~13-14px */
  --text-base: clamp(0.9375rem, 0.9rem  + 0.2vw,  1rem);        /* ~15-16px */
  --text-lg:   clamp(1.0625rem, 1rem    + 0.25vw,  1.125rem);   /* ~17-18px */
  --text-xl:   clamp(1.1875rem, 1.05rem + 0.4vw,   1.375rem);   /* ~19-22px */
  --text-2xl:  clamp(1.375rem,  1.15rem + 0.6vw,   1.75rem);    /* ~22-28px */
  --text-3xl:  clamp(1.75rem,   1.4rem  + 0.9vw,   2.25rem);    /* ~28-36px */
  --text-4xl:  clamp(2rem,      1.5rem  + 1.3vw,   3rem);       /* ~32-48px */
  --text-5xl:  clamp(2.5rem,    1.8rem  + 1.8vw,   3.75rem);    /* ~40-60px */
  --text-6xl:  clamp(3rem,      2rem    + 2.5vw,   4.5rem);     /* ~48-72px */

  /* Font weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;

  /* Line height */
  --leading-tight:    1.2;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs:  0 1px  2px  rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 2px  4px  rgba(0, 0, 0, 0.06),
                0 1px  2px  rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px  8px  rgba(0, 0, 0, 0.08),
                0 2px  4px  rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 8px  24px rgba(0, 0, 0, 0.10),
                0 4px  8px  rgba(0, 0, 0, 0.06);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.12),
                0 8px  16px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16),
                0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 8px 32px rgba(var(--primary-rgb, 99, 102, 241), 0.35);

  /* Z-index layers */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ----------------------------------------------------------
     2. COLOR SYSTEM  (light mode defaults)
     ---------------------------------------------------------- */

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* Primary alpha ramp (themes override --primary-rgb) */
  --primary-5:  rgba(var(--primary-rgb, 99, 102, 241), 0.05);
  --primary-10: rgba(var(--primary-rgb, 99, 102, 241), 0.10);
  --primary-20: rgba(var(--primary-rgb, 99, 102, 241), 0.20);
  --primary-40: rgba(var(--primary-rgb, 99, 102, 241), 0.40);
  --primary-60: rgba(var(--primary-rgb, 99, 102, 241), 0.60);
  --primary-80: rgba(var(--primary-rgb, 99, 102, 241), 0.80);
  --primary-90: rgba(var(--primary-rgb, 99, 102, 241), 0.90);

  /* Surface layers (light) */
  --surface-0: #ffffff;
  --surface-1: #f8f9fb;
  --surface-2: #f1f3f6;
  --surface-3: #e5e8ed;

  /* Text (light) */
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-tertiary:  #9ca3af;
  --text-inverse:   #ffffff;
}

/* ----------------------------------------------------------
   2b. Dark mode auto-detect
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #0b0f19;
    --surface-1: #131825;
    --surface-2: #1a2032;
    --surface-3: #242c3e;

    --text-primary:   #f1f3f6;
    --text-secondary: #94a3b8;
    --text-tertiary:  #64748b;
    --text-inverse:   #111827;

    --shadow-xs:  0 1px  2px  rgba(0, 0, 0, 0.20);
    --shadow-sm:  0 2px  4px  rgba(0, 0, 0, 0.24),
                  0 1px  2px  rgba(0, 0, 0, 0.16);
    --shadow-md:  0 4px  8px  rgba(0, 0, 0, 0.28),
                  0 2px  4px  rgba(0, 0, 0, 0.16);
    --shadow-lg:  0 8px  24px rgba(0, 0, 0, 0.32),
                  0 4px  8px  rgba(0, 0, 0, 0.20);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.36),
                  0 8px  16px rgba(0, 0, 0, 0.24);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.44),
                  0 12px 24px rgba(0, 0, 0, 0.28);
  }
}

/* ----------------------------------------------------------
   3. MODERN CSS RESET
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
}

p {
  overflow-wrap: break-word;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Reduced motion: disable all animation & transition */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------
   4. UTILITY CLASSES
   ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }

/* ----------------------------------------------------------
   5. ANIMATION KEYFRAMES
   ---------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-left {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-40); }
  50%      { box-shadow: 0 0 20px 6px var(--primary-20); }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------
   6. ANIMATION CLASSES
   ---------------------------------------------------------- */
.animate-fade-up {
  animation: fade-up var(--duration-slow) var(--ease-out-expo) both;
}

.animate-fade-down {
  animation: fade-down var(--duration-slow) var(--ease-out-expo) both;
}

.animate-fade-left {
  animation: fade-left var(--duration-slow) var(--ease-out-expo) both;
}

.animate-fade-right {
  animation: fade-right var(--duration-slow) var(--ease-out-expo) both;
}

.animate-scale-in {
  animation: scale-in var(--duration-normal) var(--ease-spring) both;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 1.5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

/* Stagger children: each child delayed by 100ms more */
.animate-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2)  { animation-delay: 100ms; }
.animate-stagger > *:nth-child(3)  { animation-delay: 200ms; }
.animate-stagger > *:nth-child(4)  { animation-delay: 300ms; }
.animate-stagger > *:nth-child(5)  { animation-delay: 400ms; }
.animate-stagger > *:nth-child(6)  { animation-delay: 500ms; }
.animate-stagger > *:nth-child(7)  { animation-delay: 600ms; }
.animate-stagger > *:nth-child(8)  { animation-delay: 700ms; }
.animate-stagger > *:nth-child(9)  { animation-delay: 800ms; }
.animate-stagger > *:nth-child(10) { animation-delay: 900ms; }

/* Scroll-triggered: hidden by default, revealed via JS */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.is-visible {
  animation: fade-up var(--duration-slow) var(--ease-out-expo) both;
}