/**
 * 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);
  --focus-shadow-color: var(--color-primary-soft, rgba(253, 83, 161, 0.4));

  /* 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%;
}

/* ============================================================
 * Dark mode bridge — 对齐 zibll dark theme
 * ============================================================ */
html.dark {
  --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: #666;
  --muted-4-color: #555;
  --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);
}