/* ==========================================================================
   Star Letter — Tokens & reset
   Custom properties, font stacks, reset, shared utilities.
   ========================================================================== */

/* ==========================================================================
   星轨情书 · A Letter in Starlight
   Midnight Observatory — CSS & Canvas only.
   ========================================================================== */

:root {
  /* night */
  --ink: #05060f;
  --ink-2: #0a0c1d;
  --ink-3: #141033;
  --violet: #6d5df6;
  --rose: #ff7aa8;
  --rose-deep: #ff6f9f;
  --gold: #ffd9a0;
  --gold-deep: #c99a63;
  --moon: #fff4e0;

  --text: rgba(255, 247, 240, 0.92);
  --text-dim: rgba(230, 220, 255, 0.55);
  --text-faint: rgba(230, 220, 255, 0.32);
  --line: rgba(255, 217, 160, 0.32);

  /* dawn */
  --dawn-1: #2a1030;
  --dawn-2: #7a2f57;
  --dawn-3: #ff9a76;
  --dawn-4: #ffd9a0;
  --paper: #fff6ec;
  --paper-ink: #4a2f2a;

  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-hand: "Ma Shan Zheng", "Kaiti SC", "KaiTi", "STKaiti", serif;
  --font-latin: "Cormorant Garamond", "Times New Roman", serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --pad-x: clamp(22px, 7vw, 120px);
  --noise: none;
}

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

html {
  background: var(--ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(109, 93, 246, 0.10), transparent 70%),
    radial-gradient(ellipse 42% 34% at 18% 18%, rgba(109, 93, 246, 0.10), transparent 72%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 56%, #0e0b24 100%);
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(255, 180, 190, 0.28);
  color: #fff7ee;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus { outline: none; }

a { color: inherit; }

img, svg, canvas { display: block; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[tabindex="-1"]:focus { outline: none; }