/**
 * AKSRT Design Tokens v7 — 1:1 legacy Alignment
 * ------------------------------------------------------------
 * 单一真理源（Single Source of Truth）
 * 所有颜色、字体、间距、动效都从此处读取，禁止在组件内硬编码。
 * 严格对齐 legacy main.css 的视觉值。
 */

:root {
  /* ===== Primary — legacy theme-color (#f04494 pink) ===== */
  --color-primary:         #f04494;
  --color-primary-hover:   #e0307e;
  --color-primary-active:  #c9206d;
  --color-primary-soft:    rgba(240, 68, 148, 0.10);
  --color-primary-softer:  rgba(240, 68, 148, 0.05);
  --color-on-primary:      #FFFFFF;

  /* ===== Ink (text) — 对齐 legacy --key-color / --main-color / --muted-color ===== */
  --color-ink:             #333333;   /* legacy --key-color */
  --color-ink-2:           #4e5358;   /* legacy --main-color */
  --color-ink-3:           #777777;   /* legacy --muted-color */
  --color-ink-4:           #999999;   /* legacy --muted-2-color */

  /* ===== Surface — 对齐 legacy --body-bg-color / --main-bg-color / --muted-bg-color ===== */
  --surface-page:          #f5f6f7;   /* legacy --body-bg-color */
  --surface-1:             #FFFFFF;   /* legacy --main-bg-color */
  --surface-2:             #eeeeee;   /* legacy --muted-bg-color #eee */
  --surface-3:             #e9ecef;   /* 输入框 / code / 次级面 */
  --surface-4:             #f8f8f8;   /* 分页 / 标签 / hover 薄层 */

  /* ===== Borders — 对齐 legacy --main-border-color ===== */
  --color-line:            rgba(50, 50, 50, 0.06);
  --color-line-soft:       rgba(0, 0, 0, 0.03);
  --color-line-stronger:   rgba(50, 50, 50, 0.12);

  /* ===== State colors ===== */
  --color-success:         #10B981;
  --color-warning:         #F59E0B;
  --color-error:           #EF4444;
  --color-info:            #3B82F6;

  /* ===== Accent (action green — legacy tabbar/CTA) ===== */
  --color-accent:          #18a058;
  --color-accent-soft:     rgba(24, 160, 88, 0.12);
  --color-accent-shadow:   rgba(24, 160, 88, 0.28);

  /* ===== Fonts — 对齐 legacy（系统默认字体栈）===== */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* ===== Type scale ===== */
  --text-xs:    0.75rem;    /* 12 */
  --text-sm:    0.875rem;   /* 14 */
  --text-base:  0.875rem;   /* 14 — 对齐参考主题 bootstrap 基础字号 */
  --text-md:    1.125rem;   /* 18 */
  --text-lg:    1.25rem;    /* 20 */
  --text-xl:    1.5rem;     /* 24 */
  --text-2xl:   1.875rem;   /* 30 */
  --text-3xl:   2.25rem;    /* 36 */
  --text-4xl:   3rem;       /* 48 */
  --text-5xl:   3.75rem;    /* 60 */
  --leading-tight:    1.2;
  --leading-snug:     1.4;
  --leading-normal:   1.6;   /* legacy body line-height */
  --leading-relaxed:  1.6;

  /* ===== Spacing (4px base) ===== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;

  /* ===== Radius — 对齐 legacy --main-radius: 8px ===== */
  --radius-xs:    3px;
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    8px;      /* legacy main-radius — was 10px */
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-pill:  100px;
  --radius-avatar: 50%;

  /* ===== Shadows — 对齐 legacy --main-shadow: rgba(116,116,116,0.08) ===== */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm:     0 0 10px rgba(116, 116, 116, 0.08);
  --shadow:        0 0 10px rgba(116, 116, 116, 0.12);
  --shadow-lg:     0 12px 32px rgba(18, 18, 18, 0.10);
  --shadow-drawer: 0 18px 60px rgba(0, 0, 0, 0.20);

  /* ===== Layout — 对齐 legacy --mian-max-width: 1200px ===== */
  --nav-height:                 60px;
  --container:                  1200px;
  --container-wide:             1440px;
  --container-read:             760px;
  --container-page:             880px;
  --sidebar-width:              311px;
  --content-gap:                24px;
  --section-gap:                24px;
  --sidebar-bp:                 992px;

  /* ===== Motion ===== */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:    0.15s;
  --dur:         0.25s;
  --dur-slow:    0.4s;

  /* ===== Focus Ring — 对齐 legacy focus-shadow-color ===== */
  --focus-ring: 0 0 2px 3px rgba(253, 83, 161, 0.4);

  /* ===== Z-index layers ===== */
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-fixed:       300;
  --z-overlay:     400;
  --z-modal:       500;
  --z-popover:     600;
  --z-toast:       700;
  --z-tooltip:     800;

  /* ===== Button sizes — 对齐 legacy ===== */
  --radius-btn:   4px;
  --btn-sm-h:     28px;
  --btn-md-h:     34px;
  --btn-lg-h:     44px;

  /* ===== Card density — 对齐 legacy .box-body { padding: 15px } ===== */
  --card-padding:       15px;
  --card-padding-sm:    10px;
  --card-gap:           16px;
  --card-gap-lg:        20px;

  /* ===== Skeleton loader ===== */
  --skeleton-base:  var(--surface-2);
  --skeleton-shine: var(--surface-1);

  /* ===== Extended tokens (used by components) ===== */
  --color-primary-light: var(--color-primary-soft);
  --color-surface:       var(--surface-1);
  --color-line-strong:   var(--color-line);
  --color-bg-hover:      var(--surface-2);
  --color-border-light:  var(--color-line-soft);
  --color-fill:          var(--surface-2);
  --color-warning-bg:    #fffbe6;
  --color-warning-text:  #ad6800;

  --text-secondary:  var(--color-ink-3);
  --text-tertiary:   var(--color-ink-4);

  --surface-active:    var(--surface-2);
  --surface-card:      var(--surface-1);
  --surface-hover:     var(--surface-2);
  --surface-secondary: var(--surface-2);

  --radius-code:   var(--radius);
  --radius-full:   100px;
  --shadow-xl:     0 0 10px rgba(116, 116, 116, 0.12);
  --space-16:      64px;
  --z-floating:    900;

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* ===== Composite / Context tokens — 对齐 legacy ===== */
  --header-bg:     var(--blur-bg);
  --header-color:  var(--color-ink-2);
  --footer-bg:     var(--surface-1);
  --footer-color:  var(--color-ink-4);
  --blur-bg:       rgba(255, 255, 255, 0.80);
  --float-btn-bg:  rgba(200, 200, 200, 0.40);

  /* ===== AKSRT-to-AKSRT canonical aliases ===== */
  --font-heading:       var(--font-ui);
  --radius-card:        var(--radius);
  --radius-md:          var(--radius);
  --color-primary-50:   var(--color-primary-soft);
  --color-primary-dark: var(--color-primary-active);
  --shadow-md:          var(--shadow);
  --mini-radius:        calc(var(--radius) / 1.4);

  /* ===== Avatar size system — legacy --this-size 等价 ===== */
  --aksrt-avatar-size-xs:   24px;
  --aksrt-avatar-size-sm:   32px;
  --aksrt-avatar-size:      40px;
  --aksrt-avatar-size-lg:   56px;
  --aksrt-avatar-size-xl:   80px;

  /* ===== Post card thumbnail scale ===== */
  --aksrt-card-thumb-scale:  56.25%;  /* 16:9 */

  /* ===== Multi-color palette (for buttons / badges / gradients) ===== */
  --aksrt-rose:       #f43f5e;
  --aksrt-rose-soft:  rgba(244, 63, 94, 0.12);
  --aksrt-blue:       #3b82f6;
  --aksrt-blue-soft:  rgba(59, 130, 246, 0.12);
  --aksrt-green:      #10b981;
  --aksrt-green-soft: rgba(16, 185, 129, 0.12);
  --aksrt-orange:     #f97316;
  --aksrt-orange-soft:rgba(249, 115, 22, 0.12);
  --aksrt-purple:     #8b5cf6;
  --aksrt-purple-soft:rgba(139, 92, 246, 0.12);
  --aksrt-cyan:       #06b6d4;
  --aksrt-cyan-soft:  rgba(6, 182, 212, 0.12);
  --aksrt-yellow:     #eab308;
  --aksrt-yellow-soft:rgba(234, 179, 8, 0.12);
  --aksrt-red:        #ef4444;
  --aksrt-red-soft:   rgba(239, 68, 68, 0.12);
  --aksrt-teal:       #14b8a6;
  --aksrt-teal-soft:  rgba(20, 184, 166, 0.12);
  --aksrt-indigo:     #6366f1;
  --aksrt-indigo-soft:rgba(99, 102, 241, 0.12);
  --aksrt-pink:       #ec4899;
  --aksrt-pink-soft:  rgba(236, 72, 153, 0.12);

  /* ===== VIP / special gradients ===== */
  --aksrt-vip-gold-1: #f6d365;
  --aksrt-vip-gold-2: #fda085;
  --aksrt-grad-sunset-1: #f093fb;
  --aksrt-grad-sunset-2: #f5576c;
  --aksrt-grad-ocean-1:  #4facfe;
  --aksrt-grad-ocean-2:  #00f2fe;
  --aksrt-grad-forest-1: #43e97b;
  --aksrt-grad-forest-2: #38f9d7;
  --aksrt-grad-night-1:  #a18cd1;
  --aksrt-grad-night-2:  #fbc2eb;
  --aksrt-grad-fire-1:   #f83600;
  --aksrt-grad-fire-2:   #f9d423;

  /* ===== Component sizing ===== */
  --aksrt-toggle-w:       44px;
  --aksrt-toggle-h:       24px;
  --aksrt-stepper-h:      36px;
  --aksrt-badge-h:        22px;

  /* ===== Legacy name bridge ===== */
  --text-1:       var(--color-ink);
  --text-2:       var(--color-ink-2);
  --text-3:       var(--color-ink-3);
  --border:       var(--color-line);
  --color-text-1: var(--color-ink);
  --color-text-2: var(--color-ink-2);
  --color-text-3: var(--color-ink-3);
  --color-primary-bg: var(--color-primary-softer);
  --color-danger: var(--color-error);
}

/* ============================================================
 * Blur-bg fallback cascade (mirrors legacy behaviour)
 * ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --blur-bg: var(--surface-1);
    --header-bg: var(--surface-1);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.dark,
  body.dark-theme {
    --blur-bg: #37383a;
    --header-bg: #37383a;
  }
}

body.modal-open,
body.dialog-open {
  --blur-bg: var(--surface-1);
  --header-bg: var(--surface-1);
}

body.modal-open .site-nav,
body.modal-open .footer-tabbar,
body.modal-open .float-right .float-btn,
body.dialog-open .site-nav,
body.dialog-open .footer-tabbar,
body.dialog-open .float-right .float-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark body.modal-open,
html.dark body.dialog-open,
body.dark-theme.modal-open,
body.dark-theme.dialog-open {
  --blur-bg: #37383a;
  --header-bg: #37383a;
}

/* ============================================================
 * Multi-level container responsive — 对齐 legacy --mian-max-width
 * 不同视口宽度下容器自动调整
 * ============================================================ */
@media (min-width: 992px) {
  :root {
    --container: 960px;
  }
}

@media (min-width: 1200px) {
  :root {
    --container: 1140px;
  }
}

@media (min-width: 1400px) {
  :root {
    --container: 1200px;
  }
}

/* ============================================================
 * Dark Theme — 对齐 legacy .dark-theme 精确 hex
 * body.dark-theme 与 html.dark 同权（legacy 用 body class）
 * ============================================================ */
html.dark,
body.dark-theme {
  --color-ink:             #f8fafc;   /* legacy --key-color */
  --color-ink-2:           #e5eef7;   /* legacy --main-color */
  --color-ink-3:           #b4b6bb;   /* legacy --muted-color */
  --color-ink-4:           #888a8f;   /* legacy --muted-2-color */

  --surface-page:          #292a2d;   /* legacy --body-bg-color */
  --surface-1:             #323335;   /* legacy --main-bg-color */
  --surface-2:             #2d2e31;   /* legacy --muted-bg-color */
  --surface-3:             #3a3c42;
  --surface-4:             #26282d;

  --color-line:            rgba(114, 114, 114, 0.1);
  --color-line-soft:       rgba(184, 184, 184, 0.02);
  --color-line-stronger:   rgba(255, 255, 255, 0.12);

  --color-primary-soft:    rgba(240, 68, 148, 0.16);
  --color-primary-softer:  rgba(240, 68, 148, 0.08);

  --color-primary-light: var(--color-primary-soft);
  --color-surface:       var(--surface-1);
  --color-line-strong:   var(--color-line);
  --color-bg-hover:      var(--surface-2);
  --color-border-light:  var(--color-line-soft);
  --color-fill:          var(--surface-2);

  --text-secondary:  var(--color-ink-3);
  --text-tertiary:   var(--color-ink-4);

  --surface-active:    var(--surface-2);
  --surface-card:      var(--surface-1);
  --surface-hover:     var(--surface-2);
  --surface-secondary: var(--surface-2);

  --shadow-xl:     0 0 10px rgba(24, 24, 24, 0.18);
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm:     0 0 10px rgba(24, 24, 24, 0.1);   /* legacy --main-shadow dark */
  --shadow:        0 0 10px rgba(24, 24, 24, 0.14);
  --shadow-lg:     0 14px 36px rgba(0, 0, 0, 0.32);
  --shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.60);

  --blur-bg:       rgba(50, 51, 53, 0.80);
  --float-btn-bg:  rgba(70, 70, 70, 0.40);
  --header-bg:     var(--blur-bg);
  --footer-bg:     var(--surface-1);
  --footer-color:  var(--color-ink-4);
  --shadow-md:     var(--shadow);

  --skeleton-base:  #3a3b3e;
  --skeleton-shine: #444548;

  /* Multi-color palette — dark mode: same hue, softer tint backgrounds */
  --aksrt-rose-soft:  rgba(244, 63, 94, 0.18);
  --aksrt-blue-soft:  rgba(59, 130, 246, 0.18);
  --aksrt-green-soft: rgba(16, 185, 129, 0.18);
  --aksrt-orange-soft:rgba(249, 115, 22, 0.18);
  --aksrt-purple-soft:rgba(139, 92, 246, 0.18);
  --aksrt-cyan-soft:  rgba(6, 182, 212, 0.18);
  --aksrt-yellow-soft:rgba(234, 179, 8, 0.18);
  --aksrt-red-soft:   rgba(239, 68, 68, 0.18);
  --aksrt-teal-soft:  rgba(20, 184, 166, 0.18);
  --aksrt-indigo-soft:rgba(99, 102, 241, 0.18);
  --aksrt-pink-soft:  rgba(236, 72, 153, 0.18);
}

/* Dark mode component refinements */
html.dark .site-nav,
body.dark-theme .site-nav {
  border-bottom-color: var(--color-line);
  box-shadow: none;
}

html.dark .footer-tabbar,
body.dark-theme .footer-tabbar {
  background: rgba(50, 51, 53, 0.80);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
}

html.dark .n-drawer,
html.dark .n-modal,
html.dark .n-dialog,
body.dark-theme .n-drawer,
body.dark-theme .n-modal,
body.dark-theme .n-dialog {
  background: var(--surface-1);
}

html.dark .post-card,
html.dark .widget,
html.dark .aksrt-theme-box,
html.dark .theme-box,
body.dark-theme .post-card,
body.dark-theme .widget,
body.dark-theme .aksrt-theme-box,
body.dark-theme .theme-box {
  border-color: transparent;
}