:root {
  color-scheme: light;

  --font-playfair: "Playfair Display RBS";
  --font-lato: "Lato RBS";
  --font-crimson: "Crimson Pro RBS";

  /* Typography roles. E1 may replace these with bundled woff2 faces. */
  --font-display: var(--font-playfair), Georgia, "Times New Roman", serif;
  --font-subhead: var(--font-lato), system-ui, sans-serif;
  --font-body: var(--font-crimson), Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Amiri", serif;

  --type-step--1: 0.875rem;
  --type-step-0: 1rem;
  --type-step-1: 1.125rem;
  --type-step-2: 1.35rem;
  --type-step-3: 1.75rem;
  --type-step-4: 2.35rem;
  --type-step-5: 3.25rem;
  --measure-reader: 70ch;
  --reader-font-scale: 1;
  --reader-line-height: 1.7;
  --reader-letter-spacing: 0;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-pill: 999px;

  --shadow-1: 0 8px 22px rgba(33, 31, 27, 0.10);
  --shadow-2: 0 14px 35px rgba(33, 31, 27, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 28%, transparent);

  /* Default identity: philosophical/cosmic, restrained, high contrast. */
  --color-bg: #f6f1e7;
  --color-surface: #fffaf1;
  --color-surface-soft: #fbf3e7;
  --color-text: #211f1b;
  --color-muted: #6d675d;
  --color-line: #d8cfc0;
  --color-accent: #29695b;
  --color-accent-strong: #18483e;
  --color-warn: #a83a32;
  --color-success: #2c6b48;

  --background-reading: var(--color-bg);
  --background-panel: var(--color-surface);
  --background-reader-texture: none;
  --reading-backdrop: transparent;

  --motion-fast: 140ms;
  --motion-medium: 260ms;
  --motion-slow: 520ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1.2);

  --z-topbar: 5;
  --z-footer: 6;
  --z-drawer: 10;

  /* Backward-compatible semantic aliases used by the current reader. */
  --bg: var(--background-reading);
  --panel: var(--background-panel);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --shadow: var(--shadow-2);
}

html[dir="rtl"] {
  --font-body: var(--font-arabic);
  --font-subhead: var(--font-arabic);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #171918;
  --color-surface: #202522;
  --color-surface-soft: #252c28;
  --color-text: #f1eee7;
  --color-muted: #b9b2a7;
  --color-line: #3a413d;
  --color-accent: #8fc7b6;
  --color-accent-strong: #b8e7d8;
  --shadow-1: 0 8px 22px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 14px 35px rgba(0, 0, 0, 0.32);
}

body[data-reading-preset="classic"] {
  --font-display: var(--font-playfair), Georgia, serif;
  --font-subhead: var(--font-crimson), Georgia, serif;
  --font-body: var(--font-crimson), Georgia, serif;
  --color-accent: #526f8f;
  --color-accent-strong: #304f71;
}

body[data-reading-preset="modern"] {
  --font-display: var(--font-lato), system-ui, sans-serif;
  --font-subhead: var(--font-lato), system-ui, sans-serif;
  --font-body: var(--font-lato), system-ui, sans-serif;
  --color-accent: #3c6675;
  --color-accent-strong: #224757;
}

body[data-reading-preset="feminine"] {
  --color-bg: #fbf2f5;
  --color-surface: #fff8fa;
  --color-surface-soft: #f7e6eb;
  --color-text: #2b2026;
  --color-muted: #725c66;
  --color-line: #e3cbd4;
  --color-accent: #9d5570;
  --color-accent-strong: #6e314a;
}

body[data-theme="dark"][data-reading-preset="feminine"] {
  --color-bg: #1c171a;
  --color-surface: #272025;
  --color-surface-soft: #31272e;
  --color-text: #f7edf1;
  --color-muted: #d6c0c9;
  --color-line: #4e3b45;
  --color-accent: #e1a8bb;
  --color-accent-strong: #ffd2df;
}

body[data-lighting="morning"] {
  --reading-backdrop: color-mix(in srgb, #dcecff 12%, transparent);
}

body[data-lighting="evening"] {
  --reading-backdrop: color-mix(in srgb, #ffbf73 11%, transparent);
}

body[data-background="paper"] {
  --background-reader-texture:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.38) 0 1px, transparent 1.3px),
    radial-gradient(circle at 82% 12%, rgba(90, 70, 45, 0.08) 0 1px, transparent 1.5px);
}

body[data-background="linen"] {
  --background-reader-texture:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(70, 50, 35, 0.06) 0 1px, transparent 1px 6px);
}

@font-face {
  font-family: "Playfair Display RBS";
  src: url("./fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Lato RBS";
  src: url("./fonts/lato-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lato RBS";
  src: url("./fonts/lato-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Crimson Pro RBS";
  src: url("./fonts/crimson-pro-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}