/**
 * POCKET STORYBOOK — reusable visual source of truth
 * Change palette, type, material, layout and motion here first.
 * Component CSS in styles.css consumes these tokens.
 */
:root {
  /* 1990s bright pocket-comic palette */
  --color-paper-050: #fff8e9;
  --color-paper-100: #f3e6c8;
  --color-paper-200: #e7d2a6;
  --color-paper-300: #d2b77e;
  --color-ink-950: #1c2623;
  --color-ink-800: #293331;
  --color-ink-650: #46554d;
  --color-sky-100: #c9e3d8;
  --color-sky-300: #9bc8c2;
  --color-river-400: #6eadb3;
  --color-river-600: #397d83;
  --color-leaf-500: #6d8758;
  --color-leaf-700: #425d42;
  --color-mustard-500: #d9a446;
  --color-coral-500: #c96555;
  --color-coral-700: #a44d45;
  --color-wood-500: #8a6744;
  --color-wood-800: #4d3829;

  /* Chapter detail — 1990s 500-won monochrome pocket-comic */
  --chapter-paper: #e7d9b9;
  --chapter-paper-light: #f5ead0;
  --chapter-paper-deep: #cbb78f;
  --chapter-ink: #211f1a;
  --chapter-ink-soft: #665f53;
  --chapter-mustard: #b88a2d;
  --chapter-coral: #a95649;
  --chapter-desk: #2f251d;
  --chapter-gutter: rgba(47, 37, 27, .34);
  --chapter-shadow: 0 36px 90px rgba(24, 16, 10, .46);
  --chapter-stage-width: min(92vw, 1180px);
  --chapter-stage-height: min(84svh, 720px);
  --chapter-scene-height: 100svh;
  --chapter-scene-count: 5;
  --chapter-track-height: 500svh;
  --chapter-ease: cubic-bezier(.18, .75, .22, 1);
  --chapter-scene-enter: 520ms;
  --chapter-sketch-duration: 2600ms;
  --chapter-detail-duration: 2200ms;
  --chapter-scroll-settle: 760ms;
  --chapter-scroll-idle: 240ms;

  /* Hikari Pastel Chronicle — background persona */
  --scene-image: url("assets/riverside-library-background-pastel-v2.webp");
  --scene-rice-paper: #fff8e8;
  --scene-sky: #dceef2;
  --scene-aqua: #a8d8d2;
  --scene-leaf: #afcb8d;
  --scene-butter: #f4d98c;
  --scene-peach: #f2b6a0;
  --scene-lavender: #c9bedd;
  --scene-ink: #53645f;

  /* Semantic color roles */
  --surface-page: var(--color-paper-100);
  --surface-page-light: var(--color-paper-050);
  --surface-ink: var(--color-ink-950);
  --surface-glass: rgba(255, 248, 233, .72);
  --surface-glass-strong: rgba(255, 248, 233, .88);
  --text-primary: var(--color-ink-950);
  --text-muted: var(--color-ink-650);
  --line-soft: rgba(41, 51, 49, .28);
  --line-strong: rgba(28, 38, 35, .72);
  --focus-ring: var(--color-river-600);
  --focus-ring-offset: var(--color-paper-050);
  --surface-tool: rgba(255, 248, 233, .84);
  --surface-tool-hover: rgba(255, 248, 233, .96);
  --surface-scrim: rgba(28, 38, 35, .24);

  /* Story accents — card data-accent values mirror these */
  --story-family-accent: #c96555;
  --story-ocean-accent: #d9a446;
  --story-eyes-accent: #5f8e80;
  --story-work-accent: #bd7b45;
  --story-promise-accent: #b95750;
  --active-accent: var(--story-family-accent);

  /* Type */
  --font-display: "Song Myung", Georgia, serif;
  --font-hand: "Gaegu", cursive;
  --font-body: "Gowun Batang", Georgia, serif;

  /* Book material */
  --book-paper: var(--color-paper-100);
  --book-edge-light: #e4c995;
  --book-edge-dark: #8a704d;
  --book-border: var(--color-ink-950);
  --book-radius: 3px 9px 7px 3px;
  --book-wear-opacity: .64;
  --book-shadow: 7px 9px 0 rgba(65, 47, 31, .34);
  --book-filter-active: drop-shadow(0 26px 28px rgba(50, 61, 48, .34));

  /* Layout */
  /* Main carousel book: target 80% of the viewport width, with safe size caps. */
  --card-width: min(80vw, 429px);
  --card-width-tablet: min(80vw, 424px);
  --card-width-mobile: 80vw;
  --card-width-short: min(80vw, 328px);
  --card-ratio: 1.47;
  --stage-top: 31%;
  --stage-bottom: 3.8%;
  --cover-title-size: clamp(34px, 3.7vw, 54px);
  --cover-title-size-mobile: clamp(36px, 11.5vw, 48px);
  --space-page: clamp(16px, 4vw, 66px);
  --space-panel: clamp(20px, 3vw, 34px);
  --touch-target: 44px;
  --catalog-width: min(370px, calc(100vw - 32px));
  --catalog-shadow: 14px 18px 46px rgba(57, 45, 31, .28);
  --hero-title-primary: var(--color-coral-500);
  --hero-title-secondary: var(--color-paper-050);
  --hero-title-shadow: var(--color-mustard-500);

  /* Motion */
  --ease-story: cubic-bezier(.16, .82, .17, 1);
  --motion-fast: 260ms;
  --motion-medium: 550ms;
  --motion-page: 800ms;
  --motion-ambient: 16s;
  --motion-tree: 7.5s;
  --motion-wind-min: 8s;
  --motion-wind-max: 15s;
  --parallax-background-x: 10px;
  --parallax-background-y: 7px;
  --parallax-title-x: 13px;
  --parallax-title-y: 7px;
}