@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;

  --color-paper: #f3f6f5;
  --color-surface: #ffffff;
  --color-sunken: #e8eeec;
  --color-line: #d5dfdc;
  --color-ink: #102a2c;
  --color-muted: #557173;
  --color-nile: #0e7c66;
  --color-nile-deep: #0a5c4c;
  --color-nile-soft: #dcefe9;
  --color-amber: #f2a93b;
  --color-amber-soft: #fcefd9;
  --color-danger: #c8463d;
  --color-danger-soft: #f8e3e1;
}

/* dark theme: same token names, different values */
.dark {
  --color-paper: #0b1a1b;
  --color-surface: #11292a;
  --color-sunken: #0e2223;
  --color-line: #21403f;
  --color-ink: #e4efec;
  --color-muted: #8fb0ad;
  --color-nile: #2fb393;
  --color-nile-deep: #5fd0b2;
  --color-nile-soft: #133a33;
  --color-amber: #f5b553;
  --color-amber-soft: #3a2c12;
  --color-danger: #ef6b61;
  --color-danger-soft: #3b1c1a;
}

html { background: var(--color-paper); color: var(--color-ink); }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.01em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; }
:focus-visible { outline: 2px solid var(--color-nile); outline-offset: 2px; border-radius: 6px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.tabular { font-variant-numeric: tabular-nums; }

@keyframes wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.wave-bar { transform-origin: center; animation: wave 1.1s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.5s ease-out both; }
@keyframes pulse-dot { 50% { opacity: 0.35; } }
.pulse-dot { animation: pulse-dot 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .wave-bar, .rise, .pulse-dot { animation: none !important; }
}