/* Design tokens. Light is the default (closer to Fictionlog); dark stays one
   click away. Sizes snap to the type scale, spacing only from the token table. */

:root {
  /* spacing */
  --s-0: 0;
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* radius */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-layout: 500ms;
  --dur-color: 300ms;

  --measure: 68ch;
  --page: 1160px;
}

html[data-theme='light'] {
  --bg: #ffffff;
  --surface-1: #f7f7f8;
  --surface-2: #efeff1;
  --surface-3: #e6e6e9;
  --surface-4: #dcdce0;

  --text: #16161a;
  --text-muted: #5f5f68;
  --text-dim: #8a8a94;
  --line: #e8e8ec;

  --accent: #f0612f;
  --accent-ink: #ffffff;
  --accent-soft: #fff1eb;

  --ok: #1f9d55;
  --warn: #b7791f;
  --err: #c53030;

  --shadow-card: 0 1px 2px rgba(20, 20, 30, 0.06), 0 4px 12px rgba(20, 20, 30, 0.04);
  --reader-paper: #fffdf8;
  --reader-ink: #262019;
}

html[data-theme='dark'] {
  --bg: #0d0d0f;
  --surface-1: #17171a;
  --surface-2: #1f1f23;
  --surface-3: #27272c;
  --surface-4: #323238;

  --text: #f2f2f4;
  --text-muted: #a2a2ab;
  --text-dim: #74747e;
  --line: #26262b;

  --accent: #ff7a45;
  --accent-ink: #1a0d06;
  --accent-soft: #2a1a12;

  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;

  --shadow-card: none;
  --reader-paper: #141416;
  --reader-ink: #e8e6e3;
}

/* Manrope for Latin; Thai needs its own face. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  --font-sans: Manrope, 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif;
}

/* text styles */
.heading-3 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.heading-4 { font-size: 26px; line-height: 32px; font-weight: 600; }
.heading-5 { font-size: 22px; line-height: 28px; font-weight: 600; }
.heading-6 { font-size: 18px; line-height: 24px; font-weight: 600; }

.title-1 { font-size: 18px; line-height: 26px; font-weight: 500; }
.title-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-3 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }

.body-1 { font-size: 15px; line-height: 22px; font-weight: 600; }
.body-2 { font-size: 15px; line-height: 22px; font-weight: 500; }
.body-3 { font-size: 15px; line-height: 22px; font-weight: 400; }
.body-5 { font-size: 13px; line-height: 18px; font-weight: 500; }
.body-6 { font-size: 13px; line-height: 18px; font-weight: 400; }

.caption-1 { font-size: 13px; line-height: 18px; font-weight: 500; }
.caption-2 { font-size: 13px; line-height: 18px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }