/* ============================================================
   晴空放送 · tokens — palette, type scale, reset
   ============================================================ */

:root{
  /* ── paper & sky ─────────────────────────────────────── */
  --paper:        #fffdfb;
  --paper-warm:   #fff8f3;
  --paper-cool:   #f6fbff;
  --sky-zenith:   #b4e3ff;
  --sky-mid:      #d8f1ff;
  --sky-haze:     #ffe9f1;

  /* ── accents ─────────────────────────────────────────── */
  --sakura:       #ff8fb4;
  --sakura-mid:   #ffb3cd;
  --sakura-soft:  #ffe2ec;
  --mizu:         #46b8ef;
  --mizu-mid:     #8ed8f7;
  --mizu-soft:    #ddf2fd;
  --lemon:        #ffe4a0;
  --mint:         #aeead6;
  --grape:        #c8b6ff;

  /* ── ink ─────────────────────────────────────────────── */
  --ink:          #3a4668;
  --ink-2:        #5b688d;
  --ink-3:        #929db9;
  --ink-4:        #b9c2d6;

  /* ── strokes, tape, glass ────────────────────────────── */
  --line:         rgba(120,152,196,.20);
  --line-warm:    rgba(255,143,180,.28);
  --tape-pink:    linear-gradient(105deg,rgba(255,196,216,.78),rgba(255,224,235,.62));
  --tape-blue:    linear-gradient(105deg,rgba(178,226,250,.78),rgba(216,242,255,.6));
  --tape-lemon:   linear-gradient(105deg,rgba(255,229,166,.8),rgba(255,244,214,.6));
  --glass:        rgba(255,255,255,.72);

  /* ── shadow ladder (cool, never grey) ────────────────── */
  --sh-1: 0 2px 6px -2px rgba(88,120,170,.18);
  --sh-2: 0 10px 26px -16px rgba(88,120,170,.36), 0 2px 6px -3px rgba(88,120,170,.16);
  --sh-3: 0 22px 48px -26px rgba(78,112,168,.44), 0 4px 12px -6px rgba(88,120,170,.18);
  --sh-glow: 0 0 32px -10px rgba(255,143,180,.55);

  /* ── type ────────────────────────────────────────────── */
  --f-cjk: 'LXGW WenKai','LXGW WenKai Lite','Zen Maru Gothic','Noto Sans SC',
           'PingFang SC','Microsoft YaHei',sans-serif;
  --f-round: 'Zen Maru Gothic','LXGW WenKai','Noto Sans SC',sans-serif;
  --f-hand: 'Klee One','LXGW WenKai','Noto Sans SC',cursive;
  --f-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* ── rhythm ──────────────────────────────────────────── */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;
  --gut: clamp(18px,4vw,56px);
  --shell: 1180px;
  --nav-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100%;
  font-family:var(--f-cjk);
  font-size:16px;
  line-height:1.85;
  color:var(--ink);
  background:var(--sky-mid);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,canvas{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }

::selection{ background:var(--sakura-soft); color:var(--ink); }

:focus-visible{
  outline:2.5px solid var(--mizu);
  outline-offset:3px;
  border-radius:6px;
}

/* ── headings ──────────────────────────────────────────── */
.h-xl{
  font-family:var(--f-round);
  font-weight:900;
  font-size:clamp(2rem,5.4vw,3.6rem);
  line-height:1.18;
  letter-spacing:.01em;
}
.h-lg{
  font-family:var(--f-round);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,2.05rem);
  line-height:1.3;
}
.h-md{ font-family:var(--f-round); font-weight:700; font-size:1.12rem; line-height:1.45; }

/* latin kicker: the little romanised line above a heading, anime-title style */
.kicker{
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--sakura);
}
.kicker--blue{ color:var(--mizu); }

.lede{ color:var(--ink-2); font-size:1.02rem; }
.meta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink-3); }

.shell{ width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto; }

/* ── shared pill / button ──────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.34em .82em;
  border-radius:999px;
  font-family:var(--f-mono);
  font-size:.68rem; font-weight:700; letter-spacing:.08em;
  background:var(--mizu-soft);
  color:#2a7fae;
  border:1px solid rgba(70,184,239,.22);
  white-space:nowrap;
}
.pill--pink{ background:var(--sakura-soft); color:#c25378; border-color:var(--line-warm); }
.pill--lemon{ background:#fff6de; color:#a5813a; border-color:rgba(255,206,110,.35); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.62em 1.35em;
  border-radius:999px;
  font-family:var(--f-round); font-weight:700; font-size:.92rem;
  color:#fff;
  background:linear-gradient(112deg,var(--sakura) 0%,#ff9ec4 48%,var(--mizu-mid) 100%);
  box-shadow:var(--sh-2);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, filter .22s;
}
.btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:var(--sh-3),var(--sh-glow); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--ghost{
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line-warm);
  box-shadow:var(--sh-1);
}
.btn--ghost:hover{ background:var(--paper-warm); }

/* ── screen-reader only ────────────────────────────────── */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   night — 似与夜一场相会
   ============================================================ */
[data-theme="night"]{
  --paper:        #151d38;
  --paper-warm:   #1b2142;
  --paper-cool:   #111a33;
  --sky-zenith:   #060b1e;
  --sky-mid:      #0d1631;
  --sky-haze:     #1d2149;

  --sakura:       #ff9ec4;
  --sakura-mid:   #ffb8d4;
  --sakura-soft:  rgba(255,158,196,.14);
  --mizu:         #6fccff;
  --mizu-mid:     #8bd9ff;
  --mizu-soft:    rgba(111,204,255,.14);
  --lemon:        #ffe9b3;
  --mint:         #8cebd0;
  --grape:        #c3adff;

  --ink:          #e8eeff;
  --ink-2:        #b5c2e4;
  --ink-3:        #8493bd;
  --ink-4:        #5c6b96;

  --line:         rgba(150,180,240,.18);
  --line-warm:    rgba(255,182,212,.26);
  --tape-pink:    linear-gradient(105deg,rgba(255,158,196,.34),rgba(255,182,212,.18));
  --tape-blue:    linear-gradient(105deg,rgba(120,200,255,.32),rgba(160,220,255,.16));
  --tape-lemon:   linear-gradient(105deg,rgba(255,225,160,.32),rgba(255,240,200,.16));
  --glass:        rgba(19,26,50,.7);

  --sh-1: 0 2px 8px -3px rgba(0,0,0,.5);
  --sh-2: 0 12px 30px -18px rgba(0,0,0,.7), 0 2px 8px -4px rgba(0,0,0,.5);
  --sh-3: 0 26px 54px -28px rgba(0,0,0,.8), 0 6px 16px -8px rgba(0,0,0,.55);
  --sh-glow: 0 0 34px -10px rgba(140,200,255,.4);

  color-scheme: dark;
}