/* ============================================================
   BREAK THE CIRCLE — Global Design System
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* ── Palette ── */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  /* ── Brand ── */
  --clr-primary:            #22c55e;
  --clr-primary-hover:      #16a34a;
  --clr-primary-dim:        #4ade80;
  --clr-primary-glow:       rgba(34, 197, 94, 0.18);
  --clr-primary-glow-mid:   rgba(34, 197, 94, 0.30);
  --clr-primary-glow-strong:rgba(34, 197, 94, 0.45);

  /* ── Semantic ── */
  --clr-success: #22c55e;
  --clr-warning: #f59e0b;
  --clr-error:   #ef4444;
  --clr-info:    #38bdf8;

  /* ── Light Theme ── */
  --bg:          #f0fdf6;
  --bg-surface:  #ffffff;
  --bg-card:     #f4fef8;
  --bg-glass:    rgba(255,255,255,0.72);
  --bg-overlay:  rgba(255,255,255,0.90);

  --text:        #0d1f13;
  --text-sub:    #3a5a46;
  --text-muted:  #7aaa8a;
  --text-inv:    #ffffff;

  --border:        rgba(34,197,94,0.14);
  --border-strong: rgba(34,197,94,0.32);

  /* ── Glow ── */
  --glow-xs: 0 0  8px rgba(34,197,94,0.20);
  --glow-sm: 0 0 18px rgba(34,197,94,0.26);
  --glow-md: 0 0 36px rgba(34,197,94,0.32);
  --glow-lg: 0 0 64px rgba(34,197,94,0.38);

  /* ── Shadow ── */
  --shadow-sm: 0 1px  3px rgba(0,0,0,.06), 0 1px  2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.07), 0 2px  4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.09), 0 4px  8px rgba(0,0,0,.05);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.11), 0 8px 16px rgba(0,0,0,.06);

  /* ── Typography ── */
  --font-sans:   'DM Sans','Hind Siliguri',system-ui,-apple-system,sans-serif;
  --font-serif:  'DM Serif Display',Georgia,serif;
  --font-bangla: 'Hind Siliguri',sans-serif;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* ── Spacing ── */
  --sp-1:  .25rem;  --sp-2:  .5rem;   --sp-3:  .75rem;
  --sp-4:  1rem;    --sp-5:  1.25rem; --sp-6:  1.5rem;
  --sp-8:  2rem;    --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* ── Radius ── */
  --r-sm:   6px;  --r-md:  10px; --r-lg:  16px;
  --r-xl:  24px;  --r-2xl: 32px; --r-full: 9999px;

  /* ── Layout ── */
  --sidebar-w:     260px;
  --bottom-nav-h:  64px;
  --container-max: 1200px;
  --nav-h:         68px;

  /* ── Transitions ── */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms cubic-bezier(.4,0,.2,1);

  /* ── Z-index ── */
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg:          #030b05;
  --bg-surface:  #071009;
  --bg-card:     #0c1a0e;
  --bg-glass:    rgba(7,16,9,.78);
  --bg-overlay:  rgba(7,16,9,.92);

  --text:        #e4f5e8;
  --text-sub:    #8ec4a2;
  --text-muted:  #4a7a5a;
  --text-inv:    #ffffff;

  --border:        rgba(34,197,94,.08);
  --border-strong: rgba(34,197,94,.22);

  --shadow-sm: 0 1px  3px rgba(0,0,0,.4),  0 1px  2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5),  0 2px  4px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6),  0 4px  8px rgba(0,0,0,.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.7), 0 8px 16px rgba(0,0,0,.5);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-base), color var(--t-base);
}
img, video, svg { max-width: 100%; display: block; }
a { color: var(--clr-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--clr-primary-hover); }
button { cursor: pointer; font-family: var(--font-sans); border: none; background: none; line-height: 1; }
input, textarea, select { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text); }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; color: var(--text); font-weight: 700; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }
::selection { background: var(--clr-primary-glow-mid); color: var(--clr-primary); }

/* ===== TYPOGRAPHY HELPERS ===== */
.serif   { font-family: var(--font-serif)  !important; }
.bangla  { font-family: var(--font-bangla) !important; }
.clr-primary { color: var(--clr-primary) !important; }
.text-muted  { color: var(--text-muted)   !important; }
.text-sub    { color: var(--text-sub)     !important; }
.text-center { text-align: center; }
.font-bold    { font-weight: 700 !important; }
.font-semibold{ font-weight: 600 !important; }

/* ===== LAYOUT UTILITIES ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
@media (max-width: 640px) { .container { padding-inline: var(--sp-4); } }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.w-full  { width: 100%; }
.hidden  { display: none !important; }
.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; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes float {
  0%,100% { transform: translateY(0);     }
  50%      { transform: translateY(-14px); }
}
@keyframes floatReverse {
  0%,100% { transform: translateY(-14px); }
  50%      { transform: translateY(0);     }
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulseGlow {
  0%,100% { box-shadow: var(--glow-xs); }
  50%      { box-shadow: var(--glow-lg); }
}
@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}
@keyframes gradientMove {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes orbPulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.anim-fade-up    { animation: fadeInUp  .55s ease both; }
.anim-fade       { animation: fadeIn    .4s  ease both; }
.anim-float      { animation: float     4s   ease-in-out infinite; }
.anim-float-rev  { animation: floatReverse 4s ease-in-out infinite; }
.anim-pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

.delay-100 { animation-delay: .10s; }
.delay-200 { animation-delay: .20s; }
.delay-300 { animation-delay: .30s; }
.delay-400 { animation-delay: .40s; }
.delay-500 { animation-delay: .50s; }
.delay-600 { animation-delay: .60s; }

/* ===== SKELETON ===== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--r-md);
  color: transparent !important;
  pointer-events: none;
}