/* ============================================================
   Raawiy — design tokens (manuscript aesthetic)
   Parchment light + Midnight navy dark. Gold accents.
   Ported from Raawiy_design/web-template/web/tokens-web.css.
   Fonts are loaded via <link> in base.html (not @import).
   ============================================================ */

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Noto Sans', system-ui, sans-serif;
  --font-read: 'Noto Serif', Georgia, serif;
  --font-ar: 'Amiri', serif;

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;

  --gold: #B8962E; --gold-deep: #97781F; --gold-bright: #D4B24A;
  --navy: #1A1A2E; --success: #2D7D46; --warning: #B77A1F; --error: #C0392B; --info: #2F6DB0;

  --sidebar-w: 256px; --topbar-h: 64px; --site-max: 1200px;
}

/* ================= LIGHT (parchment) ================= */
:root,
[data-theme="light"] {
  --bg: #FDF6E3; --bg-2: #FBF1D8; --bg-deep: #F3E9CE;
  --surface: #FFFFFF; --surface-2: #F7F1E6; --surface-3: #EFE7D4;
  --ink: #1C1C1C; --ink-mid: #55503F; --ink-soft: #6E6446;
  --gold-acc: #97781F; --gold-soft: #F3E9C9; --gold-line: rgba(184,150,46,0.30);
  --line: #E7DCC2; --line-soft: #EFE7D4; --line-strong: #DBCDA8;
  --navy-chrome: #16162A; --on-navy: #FDF6E3; --on-navy-soft: rgba(244,238,220,0.62); --on-navy-line: rgba(212,178,74,0.16);
  --shadow-sm: 0 1px 2px rgba(60,45,10,0.06), 0 1px 3px rgba(60,45,10,0.05);
  --shadow-md: 0 4px 14px rgba(60,45,10,0.08), 0 2px 6px rgba(60,45,10,0.05);
  --shadow-lg: 0 18px 50px rgba(40,30,8,0.16), 0 6px 18px rgba(40,30,8,0.10);
  --pattern-ink: rgba(151,120,31,0.06); --scrim: rgba(20,18,10,0.55);
  --success-soft: rgba(45,125,70,0.12); --warning-soft: rgba(183,122,31,0.14);
  --error-soft: rgba(192,57,43,0.11); --info-soft: rgba(47,109,176,0.12);
}

/* ================= DARK (midnight navy) ================= */
[data-theme="dark"] {
  --bg: #12121C; --bg-2: #16162A; --bg-deep: #0D0D16;
  --surface: #1C1C2C; --surface-2: #24243A; --surface-3: #2E2E46;
  --ink: #F4EEDC; --ink-mid: #BAB4C4; --ink-soft: #948DA2;
  --gold-acc: #D4B24A; --gold-soft: rgba(184,150,46,0.16); --gold-line: rgba(212,178,74,0.32);
  --line: rgba(255,255,255,0.09); --line-soft: rgba(255,255,255,0.05); --line-strong: rgba(255,255,255,0.14);
  --navy-chrome: #0C0C15; --on-navy: #F4EEDC; --on-navy-soft: rgba(244,238,220,0.60); --on-navy-line: rgba(212,178,74,0.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.6);
  --pattern-ink: rgba(212,178,74,0.08); --scrim: rgba(5,5,12,0.62);
  --success-soft: rgba(101,176,107,0.16); --warning-soft: rgba(212,178,74,0.16);
  --error-soft: rgba(225,75,75,0.16); --info-soft: rgba(90,150,220,0.16);
}

/* Dark theme lifts the tonal foreground colours so they read on navy */
[data-theme="dark"] {
  --success: #65B06B; --warning: #D4B24A; --error: #E14B4B; --info: #5A96DC;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--ink); }
p { margin: 0; }
a { color: var(--gold-acc); text-decoration: none; transition: color .12s ease; }
a:hover { color: var(--gold-deep); }
[data-theme="dark"] a:hover { color: var(--gold-bright); }
img { max-width: 100%; }

/* ── type helpers ── */
.font-display { font-family: var(--font-display); }
.font-ar { font-family: var(--font-ar); direction: rtl; }
.font-read { font-family: var(--font-read); }
.overline { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-acc); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── layout helpers ── */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; }
.btn-reset { border: none; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.clip1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g1 { gap: 4px; } .g2 { gap: 8px; } .g3 { gap: 12px; } .g4 { gap: 16px; } .g5 { gap: 20px; } .g6 { gap: 24px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.spacer { flex: 1; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.minw0 { min-width: 0; }
.hide { display: none !important; }

/* khatam tiling motif */
.khatam-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23B8962E' stroke-width='1'%3E%3Cpath d='M36 6l8 8 14-2-2 14 8 8-8 8 2 14-14-2-8 8-8-8-14 2 2-14-8-8 8-8-2-14 14 2z'/%3E%3Cpath d='M36 18l6 12 12 6-12 6-6 12-6-12-12-6 12-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ── motion ── */
.fade-in { animation: rwFade .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes rwFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rwRise .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes rwRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rwSlide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #E14B4B; animation: rwPulse 1.8s infinite; flex-shrink: 0; display: inline-block; }
@keyframes rwPulse { 0% { box-shadow: 0 0 0 0 rgba(225,75,75,0.5); } 70% { box-shadow: 0 0 0 7px rgba(225,75,75,0); } 100% { box-shadow: 0 0 0 0 rgba(225,75,75,0); } }
@keyframes rwEq { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.eq-bar { width: 3px; border-radius: 99px; background: var(--gold-bright); transform-origin: bottom; animation: rwEq .9s ease-in-out infinite; display: inline-block; }
.skel { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 220% 100%; animation: rwShim 1.35s ease-in-out infinite; border-radius: var(--r-sm); }
@keyframes rwShim { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fade-in, .rise, .live-dot, .eq-bar, .skel { animation: none !important; }
}