/* ==========================================================================
   Design Tokens — Agape Labs (Notebook)
   ========================================================================== */

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

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

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Light Theme — Notebook Paper --- */
:root {
  /* Paper & ink */
  --paper: #f5f0e8;
  --paper-cover: #f0ebe2;
  --ink: #2a2520;
  --ink-light: #7a7268;
  --rule-color: rgba(0, 0, 0, 0.06);
  --margin-color: #d4a0a0;
  --accent: #8b6914;

  /* Typography */
  --font-serif: 'Georgia', 'Cambria', 'Times New Roman', serif;
  --font-heading: 'Caveat', 'Georgia', cursive;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Consolas', monospace;

  /* Scale */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);

  /* Rhythm */
  --line-height: 2rem;

  /* Layout */
  --page-max: 680px;
  --page-padding: 2rem;
  --margin-offset: 3.5rem;

  /* Z-index */
  --z-toggle: 100;
  --z-skip: 200;
}

/* --- Dark Theme — Moleskine --- */
[data-theme="dark"] {
  --paper: #1a1815;
  --paper-cover: #141210;
  --ink: #d4cfc5;
  --ink-light: #8a847a;
  --rule-color: rgba(255, 255, 255, 0.04);
  --margin-color: rgba(180, 100, 100, 0.3);
  --accent: #c49a6c;
}