@import "tailwindcss";

/* پالت رنگی درخواستی کاربر — از دیپ‌تویلایت تا سایان روشن */
@theme {
  --color-primary: #0077b6;
  --color-accent: #00b4d8;
  --color-surface: #03045e;
  --color-ink: #caf0f8;
  --font-sans: "Vazirmatn", system-ui, sans-serif;
  --font-display: "Vazirmatn", system-ui, sans-serif;
}

:root {
  --deep-twilight: #03045e;
  --french-blue: #023e8a;
  --bright-teal-blue: #0077b6;
  --blue-green: #0096c7;
  --turquoise-surf: #00b4d8;
  --sky-aqua: #48cae4;
  --frosted-blue: #90e0ef;
  --frosted-blue-2: #ade8f4;
  --light-cyan: #caf0f8;

  --primary: var(--bright-teal-blue);
  --accent: var(--turquoise-surf);
  --surface: var(--deep-twilight);
  --surface-2: var(--french-blue);
  --ink: var(--light-cyan);
  --ink-muted: rgba(202, 240, 248, 0.66);
  --border: rgba(202, 240, 248, 0.14);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  font-feature-settings: 'ss01';
  overflow-x: hidden;
}
canvas { touch-action: none; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--deep-twilight); }
::-webkit-scrollbar-thumb { background: var(--bright-teal-blue); border-radius: 999px; }

.glass {
  background: linear-gradient(160deg, rgba(2,62,138,0.55), rgba(3,4,94,0.75));
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
}

.gradient-text {
  background: linear-gradient(90deg, var(--turquoise-surf), var(--sky-aqua), var(--frosted-blue-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-anim { animation: floatY 4.5s ease-in-out infinite; }