@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  --bg: #fff8f7;
  --bg-elevated: #fff1f5;
  --bg-card: #ffffff;
  --border: #efd8df;
  --text: #3f2732;
  --text-dim: #765d68;
  --text-faint: #a58d97;
  --accent: #c92f66;
  --accent-hover: #b6255b;
  --accent-soft: rgba(201, 47, 102, 0.10);
  --accent-strong: #a51f51;
  --secondary: #f4c44e;
  --secondary-soft: #fff4cf;
  --secondary-text: #64470a;
  --danger: #c73532;
  --danger-soft: rgba(199, 53, 50, 0.10);
  --success: #287a5b;
  --success-soft: rgba(40, 122, 91, 0.10);
  --shadow-sm: 0 2px 10px rgba(116, 49, 74, 0.05);
  --shadow-md: 0 14px 34px rgba(116, 49, 74, 0.11);
  --radius: 12px;
  --radius-sm: 8px;
  --font-title: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(244, 196, 78, 0.11), transparent 28rem),
    radial-gradient(circle at 0% 100%, rgba(201, 47, 102, 0.07), transparent 34rem);
  background-attachment: fixed;
}

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 600; margin: 0; }

.mono { font-family: var(--font-mono); }

a { color: var(--accent); text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--accent-strong); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #dcbec8; border: 2px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }