/* ============================================================
   haozhe demo 小屋 · Neo-Brutalism 设计系统（公共样式）
   被 index.html 与 weather/index.html 共用
   纯色 / 纯黑硬阴影 / 零模糊 / 无渐变 / 无毛玻璃
   各页面的内联 <style> 负责自己的布局与组件细节
   ============================================================ */

:root{
  --ink:        #0A0A0A;   /* 近黑文字 */
  --paper:      #F5F5F0;   /* 页面底 */
  --white:      #FFFFFF;

  /* 六种饱和青色系 + 各自淡色底 */
  --cyan:      #00D4FF;   /* 青 */
  --cyan-bg:   #DFF7FF;
  --blue:      #2F6BFF;   /* 电光蓝 */
  --blue-bg:   #E3ECFF;
  --violet:    #8B5CF6;   /* 紫罗兰 */
  --violet-bg: #EFE9FF;
  --indigo:    #4F46E5;   /* 靛蓝 */
  --indigo-bg: #E9E7FF;
  --teal:      #00C9A7;   /* 蓝绿 */
  --teal-bg:   #DCF7F1;
  --mint:      #2FE6A8;   /* 薄荷 */
  --mint-bg:   #E0FAF2;

  /* 纯黑实线边框 */
  --bd:         3px solid var(--ink);
  --bd-thin:    2px solid var(--ink);
  --bd-thick:   4px solid var(--ink);

  /* 零模糊纯黑硬阴影（blur=0） */
  --sh-sm:  4px  4px 0 var(--ink);
  --sh-md:  6px  6px 0 var(--ink);
  --sh-lg:  9px  9px 0 var(--ink);
  --sh-xl:  12px 12px 0 var(--ink);

  /* 字体 */
  --font-head: 'Plus Jakarta Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-body: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono: 'JetBrains Mono','SFMono-Regular','Consolas','Courier New',monospace;

  /* SVG 质感纹理（全部内联，URL 编码） */
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-2 16L16 -2M-6 20L20 -6' stroke='%230A0A0A' stroke-width='2.5'/%3E%3C/svg%3E");
  --tex-stripes-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-2 16L16 -2M-6 20L20 -6' stroke='%23F5F5F0' stroke-width='2.5'/%3E%3C/svg%3E");
  --tex-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='3' cy='3' r='2.6' fill='%230A0A0A' fill-opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.12; letter-spacing:-0.02em; }

img,svg{ display:block; max-width:100%; }

a{ color:inherit; }
a:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; border-radius:2px; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

::selection{ background:var(--violet); color:var(--white); }

.mono-tag{
  font-family:var(--font-mono);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.02em;
}

/* 滚动条（可选装饰） */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--paper); border-left:2px solid var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--violet); border:2px solid var(--ink); }

/* ---------- 通用卡片：边框 + 阴影 + 过渡（hover 位移量由各页面定义） ---------- */
.card{
  border:var(--bd);
  box-shadow:var(--sh-md);
  transition:transform 0.18s cubic-bezier(0.16,1,0.3,1),
             box-shadow 0.18s cubic-bezier(0.16,1,0.3,1);
}

/* ---------- 按钮：结构 + 按压反馈 + 配色（尺寸/边框由各页面定义） ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:800;
  text-decoration:none;
  transition:transform 0.15s cubic-bezier(0.16,1,0.3,1),
             box-shadow 0.15s cubic-bezier(0.16,1,0.3,1);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--sh-lg); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-pink{ background:var(--violet); color:var(--white); }
.btn-pink:hover{ background:#7C4DF5; }
.btn-yellow{ background:var(--cyan); color:var(--ink); }
.btn-yellow:hover{ background:#00C2E8; }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-white:hover{ background:var(--paper); }