/* Post Writer - Base Styles */
/* ─── 1. Font Imports ────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

@font-face {
  font-family: 'GenSenRounded';
  src: url('https://lab.helloruru.com/fonts/GenSenRounded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GenSenRounded';
  src: url('https://lab.helloruru.com/fonts/GenSenRounded-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GenSenRounded';
  src: url('https://lab.helloruru.com/fonts/GenSenRounded-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── 2. CSS Custom Properties ───────────────────────── */

:root {
  --rose: #D4A5A5;
  --blush: #F5D0C5;
  --lavender: #B8A9C9;
  --cream: #FDF6F0;
  --dusty-rose: #C9929A;
  --mauve: #9B7E93;
  --sage: #A8B5A0;
}

body {
  --bg-primary: #FFFCFA;
  --bg-secondary: #FDF6F0;
  --bg-card: #FFFFFF;
  --text-primary: #3D3535;
  --text-secondary: #6B5B5B;
  --text-muted: #A09090;
  --accent-primary: #D4A5A5;
  --accent-secondary: #B8A9C9;
  --accent-tertiary: #C9929A;
  --border: rgba(212, 165, 165, 0.15);
  --shadow: 0 4px 24px rgba(212, 165, 165, 0.12);
  --shadow-hover: 0 12px 48px rgba(212, 165, 165, 0.2);
  --card-glow: rgba(212, 165, 165, 0.08);
  --icon-stroke: #D4A5A5;
}

body.dark {
  --bg-primary: #1E1A1D;
  --bg-secondary: #2A2428;
  --bg-card: #322C30;
  --text-primary: #F5EDE9;
  --text-secondary: #C5B5B0;
  --text-muted: #8A7A75;
  --accent-primary: #E8B4B8;
  --accent-secondary: #C9B8D4;
  --accent-tertiary: #D4A0A8;
  --border: rgba(232, 180, 184, 0.1);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 48px rgba(232, 180, 184, 0.15);
  --card-glow: rgba(232, 180, 184, 0.06);
  --icon-stroke: #E8B4B8;
}

/* ─── 3. Reset + Body ────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'GenSenRounded', 'Noto Sans TC', sans-serif;
  font-weight: 500;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.8;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at 30% 20%,
    var(--card-glow) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 80%,
    rgba(184, 169, 201, 0.06) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: -1;
}