/**
 * Zibll Variable Compatibility Layer — Global Bridge
 *
 * Maps Zibll CSS variable names to AKSRT design tokens.
 * This file allows existing Zibll-style markup and third-party components
 * that reference Zibll variables to work correctly in AKSRT.
 *
 * @package AKSRT
 */

/* ============================================================
 * Global bridge (all pages)
 * Maps Zibll variables → AKSRT tokens so any Zibll-style markup works.
 * ============================================================ */
:root {
  /* Layout (zibll typo preserved for compat) */
  --mian-max-width: var(--container, 1200px);

  /* Theme color — now matches zibll #f04494 */
  --theme-color: var(--color-primary, #f04494);
  --focus-color: var(--color-primary, #f04494);
  /* zibll focus glow = fixed #fd53a1 @ 0.4 (not the faint primary-soft) */
  --focus-shadow-color: rgba(253, 83, 161, 0.4);

  /* zibll --focus-color-opacityX — theme-color at fixed alphas.
     Tracks the runtime theme via --color-primary-rgb (injected by
     AKSRT_Scripts::inline_css_vars); fallback RGB = #f04494. */
  --focus-color-opacity1: rgba(var(--color-primary-rgb, 240, 68, 148), 0.1);
  --focus-color-opacity05: rgba(var(--color-primary-rgb, 240, 68, 148), 0.05);
  --focus-color-opacity3: rgba(var(--color-primary-rgb, 240, 68, 148), 0.3);

  /* Text hierarchy */
  --key-color: var(--color-ink);
  --main-color: var(--color-ink-2);
  --muted-color: var(--color-ink-3);
  --muted-2-color: var(--color-ink-4);
  --muted-3-color: #b1b1b1;
  --muted-4-color: #d2d2d2;

  /* Surfaces & borders */
  --body-bg-color: var(--surface-page);
  --main-bg-color: var(--surface-1);
  --muted-bg-color: var(--surface-2);
  --main-border-color: var(--color-line);
  --muted-border-color: var(--color-line-soft);
  --main-shadow: rgba(116, 116, 116, 0.08);
  --main-radius: var(--radius, 8px);

  /* Radius variants */
  --mini-radius: calc(var(--main-radius) / 1.4);

  /* Blur / glass */
  --blur-bg: rgba(255, 255, 255, 0.8);
  --float-btn-bg: rgba(200, 200, 200, 0.4);

  /* Header / footer composites */
  --header-bg: var(--blur-bg);
  --header-color: var(--color-ink-2);
  --footer-bg: var(--surface-1);
  --footer-color: var(--color-ink-4);

  /* Cards — 对齐 zibll 70% */
  --posts-card-scale: 70%;
  --posts-list-scale: 70%;
  --single-cover-scale: 35%;
}

/* zibll --this-* context-coloring DEFAULTS live with the .but system in
 * assets/css/core/buttons.css — they must precede the .b-*/.jb-* color
 * modifiers in source order for the cascade to resolve colored variants
 * correctly, so they cannot sit in this later-loaded bridge file.
 * (Scoped to .but/.badg there, never :root, so .float-btn stays intact.) */

/* ============================================================
 * Dark mode bridge — 对齐 zibll dark theme
 * ============================================================ */
html.dark,
body.dark-theme {
  --theme-color: var(--color-primary);
  --focus-color: var(--color-primary);
  --focus-shadow-color: rgba(253, 83, 161, 0.25);
  --key-color: var(--color-ink);
  --main-color: var(--color-ink-2);
  --muted-color: var(--color-ink-3);
  --muted-2-color: var(--color-ink-4);
  --muted-3-color: #636469;
  --muted-4-color: #43454a;
  --body-bg-color: var(--surface-page);
  --main-bg-color: var(--surface-1);
  --muted-bg-color: var(--surface-2);
  --main-border-color: var(--color-line);
  --muted-border-color: var(--color-line-soft);
  --main-shadow: rgba(24, 24, 24, 0.1);
  --blur-bg: rgba(50, 51, 53, 0.8);
  --float-btn-bg: rgba(70, 70, 70, 0.4);
  --header-color: var(--color-ink-2);
  --footer-color: var(--color-ink-4);
}