/* ============================================================
   RUYA — رؤيا — Design Tokens
   Arabic-first SaaS for AI product visual generation
   ============================================================ */

:root {
  /* Brand color: iris violet (the "vision" of RUYA = رؤيا) */
  --brand-50: #f3f1ff;
  --brand-100: #e6e1ff;
  --brand-200: #cdc3ff;
  --brand-300: #ab9bff;
  --brand-400: #8772ff;
  --brand-500: #6951ff;        /* primary */
  --brand-600: #5039f0;
  --brand-700: #4126cf;
  --brand-800: #3621a8;
  --brand-900: #2c1d80;
  --brand-950: #1a1149;

  /* Accent: warm amber — used for credits, featured */
  --amber-100: #fff3d6;
  --amber-300: #fbc66a;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  /* Ink (text) — near-black with a soft violet undertone */
  --ink-1: #0e0c1f;            /* primary heading */
  --ink-2: #1f1c33;            /* body */
  --ink-3: #5a5670;            /* secondary */
  --ink-4: #8a8699;            /* muted */
  --ink-5: #b7b3c4;            /* placeholder */

  /* Surfaces */
  --canvas: #f7f6fa;           /* page background — soft warm violet-tinted off-white */
  --canvas-2: #efedf5;
  --surface: #ffffff;
  --surface-2: #fbfaff;
  --surface-elevated: #ffffff;

  /* Borders */
  --hairline: #ecebf3;
  --border: #e3e1ee;
  --border-strong: #cbc8da;
  --border-input: #d6d3e3;
  --focus-ring: rgba(105, 81, 255, 0.22);

  /* Status */
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --success-700: #047857;
  --danger-50: #fef2f2;
  --danger-500: #ef4444;
  --danger-700: #b91c1c;
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --info-50: #eff6ff;
  --info-500: #3b82f6;

  /* Type */
  --font-sans: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Readex Pro", system-ui, sans-serif;

  /* Type scale — Arabic reads slightly larger than equivalent Latin */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;

  /* Weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Spacing (4-step) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadows — soft, layered, violet-tinted */
  --shadow-xs: 0 1px 2px rgba(14, 12, 31, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 12, 31, 0.05), 0 1px 3px rgba(14, 12, 31, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(14, 12, 31, 0.06), 0 2px 4px -1px rgba(14, 12, 31, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(14, 12, 31, 0.10), 0 4px 8px -2px rgba(14, 12, 31, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(14, 12, 31, 0.14);
  --shadow-brand: 0 10px 30px -8px rgba(105, 81, 255, 0.40);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --content-max: 1280px;
}

/* Density variants */
[data-density="compact"] {
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 18px;
  --sp-8: 24px;
  --sp-10: 32px;
  --topbar-h: 56px;
  --sidebar-w: 224px;
}

/* Dark theme */
[data-theme="dark"] {
  --ink-1: #f5f3ff;
  --ink-2: #e0dceb;
  --ink-3: #aaa5bf;
  --ink-4: #807a96;
  --ink-5: #5a5670;
  --canvas: #0d0b1a;
  --canvas-2: #15122a;
  --surface: #181534;
  --surface-2: #1f1c3e;
  --surface-elevated: #221f44;
  --hairline: #2a2750;
  --border: #312d5e;
  --border-strong: #45407a;
  --border-input: #312d5e;
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--ink-2);
  background: var(--canvas);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--ink-1);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p { margin: 0; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input:focus, textarea:focus, button:focus { outline: none; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ============================================================
   ATOMS
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease);
  user-select: none;
}

.btn-lg {
  height: 48px;
  padding: 0 var(--sp-6);
  font-size: var(--fs-md);
  border-radius: var(--r-md);
}

.btn-sm {
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-md);
}

.btn-primary {
  background: var(--brand-500);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--brand-600);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  background: var(--brand-200);
  color: white;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover {
  background: var(--canvas-2);
  color: var(--ink-1);
}

.btn-danger {
  background: var(--surface);
  color: var(--danger-700);
  border: 1px solid var(--border);
}
.btn-danger:hover {
  background: var(--danger-50);
  border-color: var(--danger-500);
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}

.card-elevated {
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.badge-brand { background: var(--brand-50); color: var(--brand-700); }
.badge-success { background: var(--success-50); color: var(--success-700); }
.badge-danger { background: var(--danger-50); color: var(--danger-700); }
.badge-warning { background: var(--warning-50); color: var(--amber-600); }
.badge-info { background: var(--info-50); color: #1d4ed8; }
.badge-neutral { background: var(--canvas-2); color: var(--ink-3); }

/* Input */
.input, .textarea, .select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: var(--fs-base);
  color: var(--ink-1);
  transition: all var(--dur-fast) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.textarea {
  min-height: 96px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-5); }

/* Label */
.label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
}

/* Helpers */
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Layout primitives */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-4 { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Section divider */
.divider {
  height: 1px;
  background: var(--hairline);
  border: none;
  margin: 0;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--canvas-2) 0%, var(--surface-2) 50%, var(--canvas-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Pulse for processing */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.pulse-soft { animation: pulse-soft 1.6s ease-in-out infinite; }

/* Fade in */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up var(--dur-slow) var(--ease-out) both; }