@import "tailwindcss";

:root {
  --app-bg: #0b0b0b;
  --app-surface: #0f0f0f;
  --app-surface-2: #141414;
  --app-border: rgba(255, 255, 255, 0.09);
  --app-text: rgba(255, 255, 255, 0.92);
  --app-muted: rgba(255, 255, 255, 0.68);
  --accent: #d6b25e; /* premium gold */
  --accent-2: #2b6cff; /* royal blue option */
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

@theme inline {
  --color-app: var(--app-bg);
  --color-appSurface: var(--app-surface);
  --color-appSurface2: var(--app-surface-2);
  --color-appBorder: var(--app-border);
  --color-appText: var(--app-text);
  --color-appMuted: var(--app-muted);
  --color-accent: var(--accent);
  --color-accent2: var(--accent-2);
  --font-sans: var(--font-latin);
}

body {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-latin), ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-ar), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
}

* {
  scroll-behavior: smooth;
}

.container-app {
  @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
}

.glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid var(--app-border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold transition duration-200;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(214, 178, 94, 1), rgba(43, 108, 255, 0.92));
  color: #0b0b0b;
}
.btn-primary:hover {
  filter: brightness(1.05);
}
.btn-secondary {
  @apply border;
  border-color: var(--app-border);
  color: var(--app-text);
  background: rgba(255, 255, 255, 0.02);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.badge {
  @apply inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold;
  border: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--app-muted);
}

.h1 {
  @apply text-3xl font-semibold leading-tight tracking-tight sm:text-5xl;
}
.h2 {
  @apply text-2xl font-semibold leading-tight tracking-tight sm:text-3xl;
}
.p-muted {
  color: var(--app-muted);
}