/* =============================================================================
   Chino's Blog — Design Tokens
   ---------------------------------------------------------------------------
   :root 与 html.chino-dark 各含一整套完整、手工调校的设计 token（非覆盖式）。
   本文件必须最先加载，其余模块仅引用这些 token。
 ============================================================================ */

/* =============================================================================
   Chino's Blog  — Main Stylesheet  (v7)
   -----------------------------------------------------------------------------
   设计理念（深度参照 ChinoBlog）：
     · 软圆角（soft-radius）设计语言 —— 参照 ChinoBlog 的 Tailwind 默认圆角尺度，
       卡片/按钮/输入框使用小圆角，保持干净利落的视觉感。
     · 实色卡片（solid surface）—— 不使用 backdrop-filter 模糊背景，所有卡片为
       不透明实色表面 + 1px 边框，叠在全页背景图上依然清晰可读。
     · 日 / 夜 双主题分别设计 —— :root 与 html.chino-dark 各含一整套完整、手工调校
       的配色 token（非覆盖式），所有组件仅引用 token，切换即整体生效。
     · 背景图降低透明度 —— --bg-image-opacity 控制全页背景图可见度，叠加实色 tint。
     · 四角 L 形括号装饰（ChinoBlog 签名元素）—— SAVE 卡片与代码块均采用。

   颜色取自香风智乃（《请问您今天要来点兔子吗》）：
     主色 --chino  智乃帽蓝  217 55% 52%  ≈ #4A7BC4
     辅助 --ren  银发薰衣草 235 35% 65%  ≈ #858DC8
     点缀 --accent 玫红心  339 82% 64%  ≈ #E55F87
     装饰 --gold  帽扣金棕  38 58% 54%  ≈ #C29E55
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1.  THEME TOKENS  ·  日间主题（默认 / :root）
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand  · Chino palette (v7: 微增饱和度，更贴近角色原色) ────── */
  --chino:           217, 55%, 52%;
  --chino-50:        217, 55%, 97%;
  --chino-100:       217, 55%, 92%;
  --chino-200:       217, 55%, 83%;
  --chino-300:       217, 55%, 72%;
  --chino-400:       217, 55%, 61%;
  --chino-500:       217, 55%, 52%;
  --chino-600:       217, 58%, 44%;
  --chino-700:       217, 62%, 36%;
  --chino-800:       217, 66%, 27%;
  --chino-900:       217, 70%, 18%;

  --ren:           235, 35%, 65%;
  --ren-50:        235, 20%, 97%;
  --ren-100:       235, 26%, 91%;
  --ren-200:       235, 30%, 84%;
  --ren-300:       235, 33%, 76%;
  --ren-400:       235, 35%, 67%;
  --ren-500:       235, 35%, 58%;
  --ren-600:       235, 40%, 48%;
  --ren-700:       235, 45%, 39%;
  --ren-800:       235, 48%, 29%;
  --ren-900:       235, 52%, 19%;

  --accent:        339, 82%, 64%;
  --accent-50:     339, 82%, 96%;
  --accent-100:    339, 82%, 90%;
  --accent-200:    339, 82%, 82%;
  --accent-300:    339, 82%, 73%;
  --accent-500:    339, 82%, 64%;
  --accent-600:    339, 78%, 53%;
  --accent-700:    339, 72%, 43%;

  --gold:          38, 58%, 54%;
  --gold-50:       38, 58%, 96%;
  --gold-100:      38, 58%, 90%;
  --gold-500:      38, 58%, 54%;
  --gold-600:      38, 62%, 44%;

  --skin:          24, 80%, 88%;
  --skin-500:      24, 60%, 72%;

  /* ── Neutrals  (cool blue-gray, ChinoBlog-aligned) ───────────────── */
  --default-50:    220, 33%, 97%;
  --default-100:   225, 22%, 93%;
  --default-200:   220, 16%, 86%;
  --default-300:   218, 13%, 77%;
  --default-400:   216, 11%, 63%;
  --default-500:   215, 10%, 47%;
  --default-600:   215, 12%, 34%;
  --default-700:   217, 14%, 24%;
  --default-800:   219, 16%, 15%;
  --default-900:   222, 22%, 8%;

  /* ── Page + surface (airy solid) ─────────────────────────────── */
  --background:     0, 0%, 99%;
  --surface:        220, 22%, 97%;
  --surface-2:      220, 18%, 94%;
  --bg-tint:        220, 23%, 98%;
  --bg-image-opacity: .15;

  /* ── Derived colors (light) ───────────────────────────────────── */
  --color-background:   hsl(var(--background));
  --color-surface:      hsla(var(--surface), .90);
  --color-surface-2:    hsla(var(--surface-2), .94);
  --color-chino:          hsl(var(--chino));
  --color-ren:          hsl(var(--ren));
  --color-accent:       hsl(var(--accent));
  --color-gold:         hsl(var(--gold));
  --color-foreground:   hsl(var(--default-700));
  --color-heading:      hsl(var(--default-900));
  --color-muted:        hsl(var(--default-500));
  --color-subtle:       hsl(var(--default-400));
  --color-border:       hsl(var(--default-200));
  --color-border-strong:hsl(var(--default-300));
  --color-divider:      hsl(var(--default-200));
  --color-divider-soft: hsl(var(--default-100));
  --color-placeholder:  hsl(var(--default-400));
  --color-ring:         hsla(var(--chino), .35);
  --color-ring-accent:  hsla(var(--accent), .35);

  /* status */
  --danger:   339, 85%, 51%;
  --warning:  37, 92%, 54%;
  --success:  146, 75%, 42%;

  /* ── Radius  (全直角风格 · 所有圆角归零) ─────────────── */
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-3xl:  0;
  --radius-full:  0;

  /* ── Spacing  (4px grid) ─────────────────────────────────────── */
  --space-1:  .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;

  /* ── Type ─────────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans CN", sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --fz-2xs:  .6875rem;  --fz-xs:  .75rem;   --fz-sm:   .8125rem;
  --fz-base: .875rem;   --fz-md:  .9375rem;  --fz-lg:   1rem;
  --fz-xl:   1.125rem;  --fz-2xl: 1.25rem;   --fz-3xl:  1.5rem;
  --fz-4xl:  1.875rem;  --fz-5xl: 2.25rem;   --fz-6xl:  2.75rem;
  --fz-7xl:  3.25rem;

  --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.7; --lh-relaxed: 1.8; --lh-loose: 2;

  /* ── Shadow (subtle, layered) ─────────────────────────────────── */
  --shadow-xs:   0 1px 2px  hsla(0 0% 0% / .04);
  --shadow-sm:   0 1px 3px  hsla(0 0% 0% / .06), 0 1px 2px hsla(0 0% 0% / .03);
  --shadow-md:   0 4px 12px hsla(0 0% 0% / .07), 0 2px 4px hsla(0 0% 0% / .04);
  --shadow-lg:   0 8px 24px hsla(0 0% 0% / .09), 0 4px 8px hsla(0 0% 0% / .04);
  --shadow-xl:   0 16px 42px hsla(0 0% 0% / .13), 0 6px 14px hsla(0 0% 0% / .06);
  --shadow-chino:  0 6px 20px hsla(var(--chino), .22);
  --shadow-accent: 0 6px 20px hsla(var(--accent), .25);
  --shadow-inner: inset 0 1px 2px hsla(0 0% 0% / .05);

  /* ── Motion ───────────────────────────────────────────────────── */
  --t-fast:  .15s cubic-bezier(.4, 0, .2, 1);
  --t-base:  .2s  cubic-bezier(.4, 0, .2, 1);
  --t-slow:  .3s  cubic-bezier(.4, 0, .2, 1);
  --t-spring:.35s cubic-bezier(.34, 1.56, .64, 1);

  /* ── Layout ───────────────────────────────────────────────────── */
  --content-w:  80rem;
  --reading-w:  48rem;
  --nav-h:      4rem;
  --section-gap: clamp(2.5rem, 4vw, 4rem);

  --z-bg: -1; --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 30;
  --z-drawer: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1b.  NIGHT THEME  ·  html.chino-dark  （完整、独立调校的暗色 token 集）
   ───────────────────────────────────────────────────────────────────────────── */
html.chino-dark {
  /* ── Page surface (dark) ────────────────────────────────────── */
  --background:     222, 20%, 5%;
  --surface:        222, 17%, 12%;
  --surface-2:      222, 15%, 16%;
  --bg-tint:        222, 20%, 7%;
  --bg-image-opacity: .12;

  /* ── Neutrals (dark — inverted for readability) ──────────────── */
  --default-50:     222, 17%, 10%;
  --default-100:    222, 15%, 15%;
  --default-200:    222, 13%, 21%;
  --default-300:    222, 11%, 31%;
  --default-400:    222, 11%, 46%;
  --default-500:    222, 10%, 60%;
  --default-600:    222, 14%, 72%;
  --default-700:    222, 18%, 82%;
  --default-800:    222, 21%, 91%;
  --default-900:    222, 24%, 96%;

  --color-background:   hsl(var(--background));
  --color-surface:      hsla(var(--surface), .90);
  --color-surface-2:    hsla(var(--surface-2), .94);
  --color-foreground:   hsl(var(--default-700));
  --color-heading:      hsl(var(--default-900));
  --color-muted:        hsl(var(--default-400));
  --color-subtle:       hsl(var(--default-300));
  --color-border:       hsl(var(--default-200));
  --color-border-strong:hsl(var(--default-300));
  --color-divider:      hsl(var(--default-200));
  --color-divider-soft: hsl(var(--default-100));
  --color-placeholder:  hsl(var(--default-400));
  --color-ring:         hsla(var(--chino), .50);
  --color-ring-accent:  hsla(var(--accent), .50);

  --danger:  339, 85%, 62%;
  --warning: 37, 92%, 60%;
  --success: 146, 65%, 52%;

  --shadow-xs:   0 1px 2px  hsla(0,0%,0%,.35);
  --shadow-sm:   0 1px 3px  hsla(0,0%,0%,.45), 0 1px 2px hsla(0,0%,0%,.28);
  --shadow-md:   0 4px 12px hsla(0,0%,0%,.50), 0 2px 4px hsla(0,0%,0%,.28);
  --shadow-lg:   0 8px 24px hsla(0,0%,0%,.56), 0 4px 8px hsla(0,0%,0%,.28);
  --shadow-xl:   0 16px 42px hsla(0,0%,0%,.62), 0 6px 14px hsla(0,0%,0%,.30);
  --shadow-chino:  0 6px 22px hsla(var(--chino), .35);
  --shadow-accent: 0 6px 22px hsla(var(--accent), .38);
}

/* 主题切换时的平滑过渡 */
html.theme-anim, html.theme-anim *,
html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color var(--t-slow), border-color var(--t-slow),
              color var(--t-slow), fill var(--t-slow), box-shadow var(--t-slow) !important;
}