/* ==========================================================================
   AZRA TOKENS v73 — "Pop-Noir" design tokens (single source of truth)
   Dark (default, true black + yellow) / Light (warm off-white + yellow).
   Theme is chosen by <html data-theme="dark|light"> (set before first paint
   by azra-theme-boot, see assets/shared/azra-theme.js).
   Legacy variable names used by Community / Hub / Ultra Search / AZRA AI are
   ALIASED to these tokens at the bottom, so old CSS follows the theme.
   ========================================================================== */

:root{
  /* ---- brand + accent (same in both themes) ---- */
  --az-primary:#FFD500;
  --az-primary-hover:#FFE033;
  --az-primary-press:#E6C000;
  --az-on-primary:#000;
  --az-pink:#FF7AC6;
  --az-green:#22E06B;
  --az-blue:#4C8DFF;
  --az-red:#FF5365;
  --az-on-accent:#000;

  /* ---- radii: 12 / 16 / 24 / pill ---- */
  --az-radius-sm:12px;
  --az-radius-md:16px;
  --az-radius-lg:24px;
  --az-radius-xl:28px;
  --az-radius-pill:999px;

  /* ---- motion ---- */
  --az-ease:cubic-bezier(.2,.8,.2,1);
  --az-ease-in:cubic-bezier(.4,0,1,1);
  --az-ease-out:cubic-bezier(0,0,.2,1);
  /* spring approximation (overshoot) — falls back to --az-ease where linear() is unsupported */
  --az-spring:cubic-bezier(.34,1.56,.64,1);
  --az-dur-1:120ms;--az-dur-2:200ms;--az-dur-3:320ms;--az-dur-4:520ms;
  --az-stagger:50ms;

  /* ---- type ---- */
  --az-font-display:'Bricolage Grotesque','Manrope','Vazirmatn',system-ui,sans-serif;
  --az-font-ui:'Manrope','Inter','Vazirmatn','Segoe UI',Tahoma,system-ui,sans-serif;
  --az-font-fa:'Vazirmatn','Manrope','Segoe UI',Tahoma,system-ui,sans-serif;
  --az-font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* fluid scale */
  --az-fs-xs:clamp(.72rem,.70rem + .10vw,.78rem);
  --az-fs-sm:clamp(.82rem,.80rem + .12vw,.90rem);
  --az-fs-md:clamp(.94rem,.92rem + .14vw,1.02rem);
  --az-fs-lg:clamp(1.10rem,1.04rem + .30vw,1.28rem);
  --az-fs-xl:clamp(1.40rem,1.22rem + .90vw,1.90rem);
  --az-fs-2xl:clamp(1.80rem,1.40rem + 1.90vw,2.90rem);
  --az-fs-3xl:clamp(2.30rem,1.60rem + 3.40vw,4.20rem);

  /* ---- layout helpers ---- */
  --az-safe-top:env(safe-area-inset-top,0px);
  --az-safe-bottom:env(safe-area-inset-bottom,0px);
  --az-dock-h:68px;
}

/* ---------------------------- DARK (default) ---------------------------- */
:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --az-bg:#000;
  --az-surface:#0C0C0E;
  --az-surface-2:#16161A;
  --az-surface-3:#1F1F25;
  --az-line:rgba(255,255,255,.09);
  --az-line-strong:rgba(255,255,255,.18);
  --az-text:#F5F5F7;
  --az-text-2:#D5D6DC;
  --az-mut:#9A9DA8;
  --az-dim:#6A6D78;
  --az-primary-soft:rgba(255,213,0,.12);
  --az-primary-line:rgba(255,213,0,.30);
  --az-focus:#FFD500;
  --az-gold-text:#FFD500;
  --az-overlay:rgba(0,0,0,.62);
  --az-glass:rgba(10,10,12,.72);
  --az-dock-bg:rgba(13,13,15,.82);
  --az-dock-active-bg:#fff;
  --az-dock-active-fg:#000;
  --az-bubble-own-bg:#FFD500;
  --az-bubble-own-fg:#000;
  --az-bubble-other-bg:#16161A;
  --az-bubble-other-fg:#F5F5F7;
  --az-code-bg:#0A0A0C;
  --az-skeleton-a:#121216;
  --az-skeleton-b:#1E1E24;
  --az-scroll-thumb:#26262C;
  --az-shadow-1:0 1px 2px rgba(0,0,0,.5);
  --az-shadow-2:0 8px 32px rgba(0,0,0,.5);
  --az-shadow-3:0 24px 64px rgba(0,0,0,.65);
  --az-glow:0 0 0 4px rgba(255,213,0,.16);
  --az-meta-theme:#000000;
}

/* ------------------------------- LIGHT --------------------------------- */
html[data-theme="light"]{
  color-scheme:light;
  --az-bg:#F7F3EE;
  --az-surface:#FFFFFF;
  --az-surface-2:#F1ECE5;
  --az-surface-3:#E8E1D8;
  --az-line:rgba(20,16,10,.11);
  --az-line-strong:rgba(20,16,10,.22);
  --az-text:#14110C;
  --az-text-2:#3A352D;
  --az-mut:#5E584E;      /* 6.6:1 on #F7F3EE */
  --az-dim:#7C766B;
  --az-primary-soft:rgba(255,213,0,.30);
  --az-primary-line:rgba(160,128,0,.45);
  --az-focus:#14110C;
  --az-gold-text:#7A5C00;      /* 5.9:1 on #fff */
  --az-overlay:rgba(20,16,10,.42);
  --az-glass:rgba(255,255,255,.80);
  --az-dock-bg:rgba(255,255,255,.88);
  --az-dock-active-bg:#14110C;
  --az-dock-active-fg:#fff;
  --az-bubble-own-bg:#FFD500;
  --az-bubble-own-fg:#000;
  --az-bubble-other-bg:#FFFFFF;
  --az-bubble-other-fg:#14110C;
  --az-code-bg:#F1ECE5;
  --az-skeleton-a:#EDE7DE;
  --az-skeleton-b:#F8F4EE;
  --az-scroll-thumb:#CFC6B8;
  --az-shadow-1:0 1px 2px rgba(60,40,10,.10);
  --az-shadow-2:0 8px 28px rgba(60,40,10,.12);
  --az-shadow-3:0 24px 56px rgba(60,40,10,.18);
  --az-glow:0 0 0 4px rgba(255,213,0,.45);
  --az-meta-theme:#F7F3EE;
  /* on light, the "pop" accents need a touch more depth to hold contrast as text/icons */
  --az-red:#D92D43;
}

/* ===========================================================================
   LEGACY ALIASES — old stylesheets keep using their own names; these re-point
   them at the tokens. `html[data-theme]` outranks a plain `:root` so load
   order does not matter.
   =========================================================================== */
html[data-theme]{
  /* Community (community-theme-v20 / community-app) */
  --bg-primary:var(--az-bg);--bg-secondary:var(--az-bg);--bg-tertiary:var(--az-surface-2);
  --bg-card:var(--az-surface);--bg-card-hover:var(--az-surface-2);--bg-input:var(--az-surface);
  --border-subtle:var(--az-line);--border-default:var(--az-line);--border-hover:var(--az-line-strong);
  --text-primary:var(--az-text);--text-secondary:var(--az-text-2);--text-muted:var(--az-mut);--text-dim:var(--az-dim);
  --accent-red:var(--az-red);--accent-green:var(--az-green);--accent-blue:var(--az-blue);
  --shadow-md:var(--az-shadow-2);--shadow-lg:var(--az-shadow-3);
  /* Community Hub */
  --hub-bg:var(--az-bg);--hub-card:var(--az-surface);--hub-card2:var(--az-surface-2);
  --hx-ink:var(--az-bg);--hx-surface:var(--az-surface);--hx-surface-2:var(--az-surface-2);
  --hx-line:var(--az-line);--hx-line-strong:var(--az-line-strong);--hx-text:var(--az-text);--hx-dim:var(--az-mut);
  /* Ultra Search */
  --us-bg:var(--az-bg);--us-panel:var(--az-glass);--us-signature-ink:var(--az-bg);--us-signature-panel:var(--az-surface);
  /* (generic names --ink/--line/--text/--y are aliased per-page, scoped, when AZRA AI is restyled) */
  /* typography (azra-typography.css) */
  --font-body:var(--az-font-ui);--font-display:var(--az-font-display);--font-fa:var(--az-font-fa);--font-mono:var(--az-font-mono);
}
/* gold stays gold in both themes, but on light we need a darker tint for gold *text* on white */
html[data-theme="light"]{
  --accent-gold:#B58900;--az-gold:#B58900;--hx-gold:#B58900;
  --accent-gold-dim:rgba(255,213,0,.22);--az-gold-soft:rgba(255,213,0,.22);--hx-gold-soft:rgba(255,213,0,.26);
  --border-gold:rgba(160,128,0,.40);--border-gold-hover:rgba(160,128,0,.70);
}
html[data-theme="dark"]{
  --accent-gold:var(--az-primary);--az-gold:var(--az-primary);--hx-gold:var(--az-primary);
}

/* smooth cross-fade while the theme flips (class is added/removed by AzraTheme.set) */
html.az-theme-switching *,html.az-theme-switching *::before,html.az-theme-switching *::after{
  transition:background-color var(--az-dur-3) var(--az-ease),border-color var(--az-dur-3) var(--az-ease),color var(--az-dur-3) var(--az-ease),fill var(--az-dur-3) var(--az-ease)!important}

/* ---------------------------- base behaviours ---------------------------- */
html[data-theme]{background:var(--az-bg);color:var(--az-text)}
html[data-theme] :focus-visible{outline:2px solid var(--az-focus);outline-offset:2px}
html[data-theme] ::selection{background:var(--az-primary);color:#000}
html[data-theme] ::-webkit-scrollbar-thumb{background:var(--az-scroll-thumb)}
html[data-theme] *{scrollbar-color:var(--az-scroll-thumb) transparent}

/* tabular numerals for stats / counters */
.az-num,.stat b,.cnt,[data-count]{font-variant-numeric:tabular-nums}
/* balanced headings */
h1,h2,h3,.az-title{text-wrap:balance}
/* Persian never gets tracking (breaks joining) and gets airier leading */
html[lang="fa"] *{letter-spacing:0!important}
html[lang="fa"] body{line-height:1.8}

/* touch targets: any control that opts in via .az-tap gets 44x44 */
.az-tap{min-width:44px;min-height:44px}

/* ---- reduced motion: OS preference OR Settings → Appearance override ---- */
@media (prefers-reduced-motion:reduce){
  :root{--az-dur-1:1ms;--az-dur-2:1ms;--az-dur-3:1ms;--az-dur-4:1ms;--az-stagger:0ms}
}
html[data-motion="reduce"]{--az-dur-1:1ms;--az-dur-2:1ms;--az-dur-3:1ms;--az-dur-4:1ms;--az-stagger:0ms}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}