/* ============================================================
   QURAN APP — DESIGN SYSTEM
   main.css · tokens · reset · base
   ------------------------------------------------------------
   Palette: Mudhamatan (مُدْهَامَّتَانِ · Ar-Rahman 55:64)
   Aesthetic: rectangular, minimal arch, editorial
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     MUDHAMATAN GREEN — primary brand
     ---------------------------------------------------------- */
  --mudhamatan-50:  #eef7f0;
  --mudhamatan-100: #d5ecd9;
  --mudhamatan-200: #aad9b5;
  --mudhamatan-300: #75c08a;
  --mudhamatan-400: #45a466;
  --mudhamatan-500: #1f7a44;   /* main brand */
  --mudhamatan-600: #186336;
  --mudhamatan-700: #124f2a;
  --mudhamatan-800: #0d3b20;
  --mudhamatan-900: #082916;
  --mudhamatan-950: #041a0d;

  /* ----------------------------------------------------------
     ACCENT — classical gold
     ---------------------------------------------------------- */
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;

  /* ----------------------------------------------------------
     SEMANTIC COLOR ALIASES
     ---------------------------------------------------------- */
  --color-primary:        var(--mudhamatan-500);
  --color-primary-hover:  var(--mudhamatan-600);
  --color-primary-active: var(--mudhamatan-700);
  --color-primary-soft:   var(--mudhamatan-50);
  --color-primary-ring:   rgba(31, 122, 68, 0.15);

  --color-accent:        var(--gold-400);
  --color-accent-hover:  var(--gold-500);

  /* ----------------------------------------------------------
     SURFACES & TEXT
     ---------------------------------------------------------- */
  --color-bg:          #fafbf9;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle:   #f3f6f2;
  --color-bg-inset:    #eef2ed;
  --color-border:      #e3e9e2;
  --color-border-strong: #cbd5c9;

  --color-text:        #0f1a12;
  --color-text-muted:  #5a6b5f;
  --color-text-subtle: #8a9a90;
  --color-text-invert: #ffffff;

  /* ----------------------------------------------------------
     SEMANTIC STATES
     ---------------------------------------------------------- */
  --color-success: #1f7a44;
  --color-warning: #d97706;
  --color-danger:  #dc2626;
  --color-info:    #2563eb;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;   /* 13px — tighter for UI */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide:  0.05em;

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ----------------------------------------------------------
     RADIUS — rectangular, minimal arch
     ---------------------------------------------------------- */
  --radius-xs:   2px;   /* badges, chips */
  --radius-sm:   3px;   /* buttons, inputs, nav items ← main UI */
  --radius-md:   4px;   /* cards, dropdowns, panels */
  --radius-lg:   6px;   /* large cards, modals, auth */
  --radius-pill: 9999px; /* avatars, ayah circles ONLY */

  /* ----------------------------------------------------------
     SHADOWS — soft, layered, subtle
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 26, 18, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 26, 18, 0.06),
               0 1px 2px rgba(15, 26, 18, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 26, 18, 0.07),
               0 2px 4px -2px rgba(15, 26, 18, 0.05);
  --shadow-lg: 0 12px 20px -6px rgba(15, 26, 18, 0.08),
               0 4px 8px -4px rgba(15, 26, 18, 0.05);
  --shadow-xl: 0 24px 40px -12px rgba(15, 26, 18, 0.12),
               0 8px 16px -8px rgba(15, 26, 18, 0.06);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --header-h:      64px;
  --sidebar-w:     264px;
  --sidebar-w-min: 72px;
  --container-max: 1280px;

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

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-bg:          #071410;
  --color-bg-elevated: #0d2018;
  --color-bg-subtle:   #12291e;
  --color-bg-inset:    #0a1c13;
  --color-border:      #1e3a2a;
  --color-border-strong: #2c5138;

  --color-text:        #e8f2ea;
  --color-text-muted:  #8fa898;
  --color-text-subtle: #5c7566;

  --color-primary:        #2e9e5b;
  --color-primary-hover:  #45a466;
  --color-primary-active: #75c08a;
  --color-primary-soft:   rgba(46, 158, 91, 0.1);
  --color-primary-ring:   rgba(46, 158, 91, 0.25);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5),
               0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55),
               0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 20px -6px rgba(0, 0, 0, 0.6),
               0 4px 8px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 40px -12px rgba(0, 0, 0, 0.7),
               0 8px 16px -8px rgba(0, 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);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--color-primary-hover); }

/* Arabic text */
.arabic,
[lang="ar"] {
  font-family: var(--font-arabic);
  direction: rtl;
  line-height: 2;
  font-size: 1.35em;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* Selection */
::selection {
  background: var(--mudhamatan-200);
  color: var(--mudhamatan-900);
}
[data-theme="dark"] ::selection {
  background: rgba(46, 158, 91, 0.35);
  color: #e8f2ea;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.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;
}

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.flex     { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.words-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.words-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  direction: rtl;
  justify-content: flex-end;
}
.word-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
  min-width: 64px;
}
.word-chip:hover {
  border-color: var(--mudhamatan-400);
  background: var(--mudhamatan-50);
}
[data-theme="dark"] .word-chip:hover {
  background: rgba(46, 158, 91, 0.1);
}
.word-chip__ar {
  font-family: var(--font-arabic);
  font-size: 1.25em;
  color: var(--mudhamatan-800);
  line-height: 1.2;
}
[data-theme="dark"] .word-chip__ar { color: var(--mudhamatan-200); }
.word-chip__trans {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
}
.word-chip__translit {
  font-size: 10px;
  color: var(--color-text-subtle);
  font-style: italic;
}