/* ==========================================================================
   Materin UI · 品牌 UI 令牌 v0.1
   --------------------------------------------------------------------------
   来源仓库：https://github.com/materin-tech/materin-ui  ← 唯一正本在这里
   各处拿到的是同步副本：站点 assets/css/materin-ui.css、插件 styles.css 顶部。
   改令牌 → 改正本 → 跑 tools/sync-to-site.sh，不要在副本里直接改。

   一套 UI，三个插件，一个网页。所有界面只用本文件里的 --materin-* 变量。

   取值规则（重要）：优先取宿主主题变量，取不到时才用品牌回落值。
   - 在 Obsidian 里：accent / 表面 / 文字 / 圆角 / 字体 自动跟随用户主题；
   - 在网页里：宿主变量不存在，自动使用下面的品牌默认值。

   用法
   网页：<link rel="stylesheet" href="/assets/css/materin-ui.css">（在站点样式之前）
   插件：把 :root 段复制到插件 styles.css 顶部（Obsidian 打包为单文件，
         且插件应离线可用，因此不做运行时远程 @import）。
   ========================================================================== */

:root {
  /* --- 强调色 --- */
  --materin-accent: var(--interactive-accent, #5b8cff);
  --materin-accent-soft: color-mix(in srgb, var(--materin-accent) 22%, transparent);
  --materin-accent-border: color-mix(in srgb, var(--materin-accent) 32%, transparent);
  --materin-on-accent: var(--text-on-accent, #ffffff);
  --materin-secondary: var(--color-cyan, #6ee7d5);

  /* --- 表面与描边 --- */
  --materin-surface: var(--background-primary, #0b0f19);
  --materin-surface-2: var(--background-secondary, #0f1524);
  --materin-surface-3: var(--background-secondary-alt, #131b2e);
  --materin-surface-4: var(--background-modifier-hover, #18223a);
  --materin-border: var(--background-modifier-border, #23304d);
  --materin-shadow: 0 10px 30px rgba(0, 0, 0, .35);

  /* --- 文字 --- */
  --materin-text: var(--text-normal, #e7ecf5);
  --materin-text-muted: var(--text-muted, #93a1bd);

  /* --- 语义状态 --- */
  --materin-ok: var(--color-green, #3a7d44);
  --materin-warn: var(--color-yellow, #b8860b);
  --materin-error: var(--color-red, #f93e3e);
  --materin-info: var(--materin-accent, #5b8cff);
  /* 语义别名：强调色强档、描边强档、更淡的文字 */
  --materin-accent-strong: var(--interactive-accent-hover, #4a7cef);
  --materin-border-strong: var(--background-modifier-border-hover, #23304d);
  --materin-text-faint: var(--text-faint, #93a1bd);

  /* --- 语义色的底色与描边（由语义色派生：改语义色，标签/提示条一起变） --- */
  --materin-secondary-soft: color-mix(in srgb, var(--materin-secondary) 16%, transparent);
  --materin-secondary-border: color-mix(in srgb, var(--materin-secondary) 32%, transparent);
  --materin-ok-soft: color-mix(in srgb, var(--materin-ok) 18%, transparent);
  --materin-ok-border: color-mix(in srgb, var(--materin-ok) 32%, transparent);
  --materin-warn-soft: color-mix(in srgb, var(--materin-warn) 18%, transparent);
  --materin-warn-border: color-mix(in srgb, var(--materin-warn) 32%, transparent);
  --materin-error-soft: color-mix(in srgb, var(--materin-error) 16%, transparent);
  --materin-error-border: color-mix(in srgb, var(--materin-error) 32%, transparent);

  /* --- 形状与间距 --- */
  --materin-radius: var(--radius-s, 6px);
  --materin-radius-lg: 14px;
  /* --- 间距基数（4px 起步；space-6/7 供大块留白） --- */
  --materin-space-1: 4px;
  --materin-space-2: 8px;
  --materin-space-3: 12px;
  --materin-space-4: 16px;
  --materin-space-5: 24px;
  --materin-space-6: 32px;
  --materin-space-7: 48px;

  /* --- 字阶与字重 --- */
  --materin-font-size-display: 48px;
  --materin-font-size-h1: 32px;
  --materin-font-size-h2: 24px;
  --materin-font-size-h3: 20px;
  --materin-font-size-body: 14px;
  --materin-font-size-small: 13px;
  --materin-font-size-caption: 12px;
  --materin-font-weight-regular: 400;
  --materin-font-weight-medium: 500;
  --materin-font-weight-bold: 700;
  --materin-line-height-tight: 1.2;
  --materin-line-height-normal: 1.5;
  --materin-line-height-loose: 1.7;

  /* --- 动效（时长与缓动曲线，组件不许自己写 0.3s / ease-in-out） --- */
  --materin-duration-fast: 150ms;
  --materin-duration-normal: 200ms;
  --materin-duration-slow: 300ms;
  --materin-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --materin-ease-in: cubic-bezier(0, 0, 0.2, 1);
  --materin-ease-out: cubic-bezier(0.4, 0, 1, 1);

  /* --- 字体 --- */
  --materin-font-ui: var(--font-interface, inherit);
  --materin-font-small: var(--font-ui-small, 13px);
  --materin-font-mono: var(--font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);

  /* --- 透明与半透明（分层毛玻璃；透明表面靠阴影和描边分层） --- */
  --materin-glass-bg: color-mix(in srgb, var(--background-primary, #0b0f19) 74%, transparent);
  --materin-glass-bg-strong: color-mix(in srgb, var(--background-primary, #0b0f19) 90%, transparent);
  --materin-glass-bg-subtle: color-mix(in srgb, var(--background-secondary, #0f1524) 66%, transparent);
  --materin-glass-border: color-mix(in srgb, var(--background-modifier-border, #23304d) 80%, transparent);
  --materin-glass-highlight: color-mix(in srgb, #ffffff 12%, transparent);
  --materin-glass-blur: blur(20px) saturate(180%);
  --materin-glass-blur-sm: blur(12px) saturate(160%);
  --materin-elev-1: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .18);
  --materin-elev-2: 0 2px 6px rgba(0, 0, 0, .20), 0 18px 48px rgba(0, 0, 0, .30);

  /* --- HTTP 方法徽标（Materin View 专用语义色，固定不随主题） --- */
  --materin-method-get: #61affe;
  --materin-method-post: #49cc90;
  --materin-method-put: #fca130;
  --materin-method-delete: #f93e3e;
  --materin-method-patch: #50e3c2;
  --materin-method-other: #9012fe;
}

/* --- 浅色主题值（站点用 html[data-theme="light"]，Obsidian 用 .theme-light）---
   只换值，不换用法：组件层不需要为浅色写任何一条规则。 */
html[data-theme="light"],
.theme-light {
  --materin-surface: #f7f9fc;
  --materin-surface-2: #eef2f9;
  --materin-surface-3: #ffffff;
  --materin-surface-4: #ffffff;
  --materin-border: #dbe3f0;
  --materin-text: #131a28;
  --materin-text-muted: #5a6884;
  --materin-accent: #2f5fe0;
  --materin-on-accent: #ffffff;
  --materin-secondary: #0f9c8a;
  --materin-shadow: 0 8px 24px rgba(19, 26, 40, .08);
  --materin-glass-bg: color-mix(in srgb, #f7f9fc 76%, transparent);
  --materin-glass-bg-strong: color-mix(in srgb, #f7f9fc 92%, transparent);
  --materin-glass-bg-subtle: color-mix(in srgb, #ffffff 68%, transparent);
  --materin-glass-border: color-mix(in srgb, #dbe3f0 84%, transparent);
  --materin-glass-highlight: color-mix(in srgb, #ffffff 60%, transparent);
  --materin-elev-1: 0 1px 2px rgba(19, 26, 40, .06), 0 8px 24px rgba(19, 26, 40, .07);
  --materin-elev-2: 0 2px 6px rgba(19, 26, 40, .08), 0 18px 48px rgba(19, 26, 40, .12);
}

/* 降级：宿主不支持毛玻璃，或用户开启「减少透明度」时，改用不透明表面 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --materin-glass-bg: var(--background-primary, #0b0f19);
    --materin-glass-bg-strong: var(--background-primary, #0b0f19);
    --materin-glass-bg-subtle: var(--background-secondary, #0f1524);
    --materin-glass-border: var(--background-modifier-border, #23304d);
    --materin-glass-highlight: transparent;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --materin-glass-bg: var(--background-primary, #0b0f19);
    --materin-glass-bg-strong: var(--background-primary, #0b0f19);
    --materin-glass-bg-subtle: var(--background-secondary, #0f1524);
    --materin-glass-border: var(--background-modifier-border, #23304d);
    --materin-glass-highlight: transparent;
  }
}