/* =====================================================================
   BabyBook — токены тем (единственный источник истины оформления)
   ---------------------------------------------------------------------
   Порядок слоёв задаётся здесь один раз для всего макета:
     tokens → base → components → screens
   Экраны пишут свои стили в @layer screens и используют ТОЛЬКО токены
   отсюда (никаких «сырых» цветов/шрифтов в экранах).

   Тема = атрибут на <html>: data-theme="bloom|scrapbook|diffused|minimal".
   Тема меняет только оформление: цвета, шрифты, текстуры, тени, радиусы,
   декор. Размеры, отступы и сетка — общие для всех тем (раздел :root).

   Токены переносятся во frontend 1:1 (Tailwind 4 @theme / CSS vars),
   поэтому имена семантические: --color-ink, а не --green-900.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Comfortaa:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Golos+Text:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=Pangolin&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

@layer tokens, base, components, screens;

@layer tokens {
  /* -------------------------------------------------------------------
     Общие (не зависят от темы): шкала отступов, кегли, сетка, моторика
     ------------------------------------------------------------------- */
  :root {
    color-scheme: light;

    /* Отступы — шаг 4px */
    --space-1: 0.25rem;  /* 4  */
    --space-2: 0.5rem;   /* 8  */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */

    /* Кегли (тема может масштабировать display через --font-display-scale) */
    --fs-xs: 0.8125rem;                                   /* 13 */
    --fs-sm: 0.9375rem;                                   /* 15 */
    --fs-base: 1.0625rem;                                 /* 17 */
    --fs-lg: 1.25rem;                                     /* 20 */
    --fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);        /* 24–32 */
    --fs-2xl: clamp(2rem, 1.55rem + 2.2vw, 3rem);         /* 32–48 */
    --fs-3xl: clamp(2.75rem, 1.9rem + 4vw, 4.75rem);      /* 44–76 */
    --lh-tight: 1.15;
    --lh-base: 1.6;

    /* Сетка/размеры */
    --tap: 44px;              /* минимальная цель нажатия (NFR-1) */
    --tap-lg: 56px;           /* стрелки книги на мобильном */
    --topbar-h: 60px;
    --book-nav-h: 84px;       /* нижняя панель книги на мобильном */
    --spread-max: 1180px;     /* ширина разворота на десктопе */
    --text-max: 38rem;        /* комфортная длина строки */
    --bp-desktop: 900px;      /* справочно: @media (min-width: 900px) */

    /* Моторика (перелистывание — только transform/opacity) */
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-turn: 420ms;        /* 0.3–0.5 c по ТЗ §8 */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-turn: cubic-bezier(0.4, 0, 0.2, 1);
    --turn-shift: 7%;         /* сдвиг страницы при перелистывании */

    /* Слои */
    --z-nav: 20;
    --z-topbar: 30;
    --z-toast: 60;

    /* Статусы (общие для всех тем, AA на любом фоне страницы) */
    --color-danger: #A3352A;
    --color-danger-soft: #F7E1DC;

    /* Шрифт бренда (логотип не зависит от темы) */
    --font-brand: "Cormorant Garamond", "Georgia", serif;
  }

  /* -------------------------------------------------------------------
     Шум бумаги: генерируется SVG feTurbulence, тон задаётся в теме.
     Используется как слой background-image.
     ------------------------------------------------------------------- */

  /* ===================================================================
     1. BLOOM AESTHETIC — нежность, рост, жизненная сила
        Шалфей, сливочный, терракота; арки и изогнутые линии; веточки.
     =================================================================== */
  :root[data-theme="bloom"] {
    --theme-name: "Bloom Aesthetic";

    --color-bg: #EFE8DA;
    --color-page: #FBF7EF;
    --color-surface: #F3ECDF;
    --color-surface-2: #E9E1D1;
    --color-ink: #263123;
    --color-ink-muted: #56604F;
    --color-line: #DDD3C1;
    --color-line-strong: #7D836F;      /* ≥ 3:1 к page/surface — границы полей */
    --color-accent: #4F6B47;           /* фон основной кнопки */
    --color-on-accent: #FFFFFF;
    --color-accent-hover: #415A3A;
    --color-accent-ink: #4A6542;       /* акцентный текст/ссылки, AA */
    --color-accent-soft: #E3E9D6;      /* фон тегов, подсветок */
    --color-secondary: #C98B6B;        /* терракота — декор, не для текста */
    --color-secondary-ink: #8C4B2F;    /* терракотовый текст, AA */
    --color-secondary-soft: #F1DCCD;
    --color-focus: #B0532C;
    --color-shade: rgba(38, 49, 35, 0.22);   /* затемнение края при перелистывании */
    --color-scrim: rgba(38, 49, 35, 0.42);
    --color-ph-1: #E9D8C2;             /* плейсхолдер фото: градиент */
    --color-ph-2: #C8D3B4;
    --color-ph-ink: #61765A;           /* линии иллюстрации */

    --font-display: "Cormorant Garamond", "Georgia", serif;
    --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
    --font-hand: "Cormorant Garamond", "Georgia", serif;  /* курсивные подписи */
    --font-display-weight: 600;
    --font-display-style: normal;
    --font-hand-style: italic;
    --font-display-scale: 1.12;        /* у Cormorant маленький x-height */
    --font-body-scale: 1;
    --letter-display: -0.01em;

    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-pill: 999px;
    --radius-page: 28px 28px 28px 28px;
    --radius-photo: 999px 999px 24px 24px;   /* арка */
    --radius-card: 24px 24px 24px 6px;       /* «лепесток» */
    --radius-sheet: 32px;

    --radius-btn: 999px;
    --btn-text-transform: none;
    --btn-letter-spacing: 0.01em;
    --btn-font-weight: 600;

    --border-width: 1px;
    --border-style: solid;

    --shadow-sm: 0 1px 2px rgba(60, 70, 45, 0.08);
    --shadow-md: 0 6px 18px -6px rgba(60, 70, 45, 0.18);
    --shadow-lg: 0 24px 48px -20px rgba(60, 70, 45, 0.28);
    --shadow-page: 0 30px 60px -30px rgba(60, 70, 45, 0.35), 0 2px 6px rgba(60, 70, 45, 0.06);
    --shadow-photo: 0 18px 30px -18px rgba(60, 70, 45, 0.45);

    --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --texture-bg:
      radial-gradient(80% 60% at 100% 0%, rgba(201, 139, 107, 0.16), transparent 60%),
      radial-gradient(70% 60% at 0% 100%, rgba(122, 150, 108, 0.18), transparent 60%),
      var(--texture-noise);
    --texture-page: var(--texture-noise);
    --texture-card: none;
    /* Веточка в углу страницы */
    --decor-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%237A966C' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 132 C 46 112 74 80 88 18'/%3E%3Cpath d='M30 119 C 16 108 14 92 22 82 C 34 92 36 108 30 119Z' fill='%23C8D3B4' fill-opacity='.55'/%3E%3Cpath d='M52 101 C 64 90 82 90 90 98 C 80 110 62 110 52 101Z' fill='%23C8D3B4' fill-opacity='.55'/%3E%3Cpath d='M66 78 C 54 64 54 48 62 40 C 74 52 74 68 66 78Z' fill='%23E9C9B2' fill-opacity='.6'/%3E%3Cpath d='M80 50 C 92 40 108 40 114 48 C 104 60 88 60 80 50Z' fill='%23C8D3B4' fill-opacity='.55'/%3E%3Ccircle cx='88' cy='16' r='4' fill='%23C98B6B' stroke='none'/%3E%3C/svg%3E");
    --decor-corner-size: 132px;
    --decor-corner-opacity: 0.9;
    --frame-tape: none;
    --frame-padding: 0px;
    --frame-bg: transparent;
    --tilt-photo: 0deg;
    --tilt-card: 0deg;
    --glass-blur: 0px;
  }

  /* ===================================================================
     2. SOFT SCRAPBOOK — личное, ручное, тёплое
        Крафт-бумага, тетрадная точка, полароиды, скотч, рукописные шрифты.
     =================================================================== */
  :root[data-theme="scrapbook"] {
    --theme-name: "Soft Scrapbook";

    --color-bg: #E6D9C2;
    --color-page: #FFFCF4;
    --color-surface: #FFF4DA;
    --color-surface-2: #F6E9CF;
    --color-ink: #33261F;
    --color-ink-muted: #68554A;
    --color-line: #E3D3B8;
    --color-line-strong: #97826E;
    --color-accent: #B0443B;
    --color-on-accent: #FFFFFF;
    --color-accent-hover: #963830;
    --color-accent-ink: #A13E35;
    --color-accent-soft: #F8DCD3;
    --color-secondary: #E7B94B;        /* горчичный скотч — декор */
    --color-secondary-ink: #7A5A12;
    --color-secondary-soft: #FBEBC4;
    --color-focus: #2F6688;            /* «синяя ручка» */
    --color-shade: rgba(70, 45, 25, 0.22);
    --color-scrim: rgba(51, 38, 31, 0.45);
    --color-ph-1: #F2D8C8;
    --color-ph-2: #D6E3D2;
    --color-ph-ink: #8A644F;

    --font-display: "Caveat", "Segoe Print", cursive;
    --font-body: "Pangolin", "Comic Sans MS", system-ui, sans-serif;
    --font-hand: "Caveat", "Segoe Print", cursive;
    --font-display-weight: 700;
    --font-display-style: normal;
    --font-hand-style: normal;
    --font-display-scale: 1.32;        /* Caveat визуально мелкий */
    --font-body-scale: 0.97;
    --letter-display: 0;

    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;
    --radius-page: 4px;
    --radius-photo: 2px;
    --radius-card: 4px;
    --radius-sheet: 14px;

    --radius-btn: 8px;
    --btn-text-transform: none;
    --btn-letter-spacing: 0.01em;
    --btn-font-weight: 400;

    --border-width: 1.5px;
    --border-style: dashed;

    --shadow-sm: 0 1px 1px rgba(70, 45, 25, 0.12);
    --shadow-md: 1px 3px 6px rgba(70, 45, 25, 0.16), 0 0 0 1px rgba(70, 45, 25, 0.04);
    --shadow-lg: 2px 10px 22px -8px rgba(70, 45, 25, 0.35);
    --shadow-page: 0 2px 0 #EFE3CC, 0 4px 0 #E9DCC1, 0 18px 34px -16px rgba(70, 45, 25, 0.45);
    --shadow-photo: 1px 4px 10px rgba(70, 45, 25, 0.28);

    --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --texture-bg: var(--texture-noise);
    --texture-page:
      radial-gradient(circle at 1px 1px, rgba(120, 90, 60, 0.16) 1.1px, transparent 1.6px) 0 0 / 20px 20px,
      var(--texture-noise);
    --texture-card: var(--texture-noise);
    /* Скотч с рваными краями */
    --frame-tape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M4 2 L116 0 L113 6 L118 11 L114 17 L119 23 L115 28 L117 34 L2 32 L6 27 L1 21 L5 15 L0 9 L3 5Z' fill='%23EFC46A' fill-opacity='.78'/%3E%3C/svg%3E");
    --frame-tape-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M4 2 L116 0 L113 6 L118 11 L114 17 L119 23 L115 28 L117 34 L2 32 L6 27 L1 21 L5 15 L0 9 L3 5Z' fill='%23A9D3C5' fill-opacity='.8'/%3E%3C/svg%3E");
    --frame-padding: 10px 10px 34px;   /* полароид */
    --frame-bg: #FFFFFF;
    --decor-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23B0443B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M86 30 C 80 18 62 20 64 36 C 66 50 86 58 86 58 C 86 58 106 50 108 36 C 110 20 92 18 86 30Z' fill='%23F8DCD3'/%3E%3Cpath d='M30 70 l4 10 l11 1 l-8 7 l3 11 l-10 -6 l-10 6 l3 -11 l-8 -7 l11 -1Z' stroke='%23C29426' fill='%23FBEBC4'/%3E%3Cpath d='M70 86 c 6 -4 12 4 18 0 s 12 4 18 0' stroke='%237A9F8F'/%3E%3C/svg%3E");
    --decor-corner-size: 110px;
    --decor-corner-opacity: 1;
    --tilt-photo: -2deg;
    --tilt-card: 0.6deg;
    --glass-blur: 0px;
  }

  /* ===================================================================
     3. DIFFUSED LIGHT — тишина, прозрачность, воздух
        Много белого, холодные светлые тона, тёплое свечение, матовое стекло.
     =================================================================== */
  :root[data-theme="diffused"] {
    --theme-name: "Diffused Light";

    --color-bg: #ECF1F7;
    --color-page: #FBFCFE;
    --color-surface: rgba(255, 255, 255, 0.72);   /* матовое стекло поверх свечения */
    --color-surface-2: #EEF2F8;
    --color-ink: #1D2838;
    --color-ink-muted: #4D5A6E;
    --color-line: #DCE3EC;
    --color-line-strong: #848FA0;
    --color-accent: #355C8C;
    --color-on-accent: #FFFFFF;
    --color-accent-hover: #2A4A72;
    --color-accent-ink: #315785;
    --color-accent-soft: #E1EAF5;
    --color-secondary: #F4BE98;        /* тёплое свечение — декор */
    --color-secondary-ink: #94532D;
    --color-secondary-soft: #FCE8DA;
    --color-focus: #C0602A;
    --color-shade: rgba(29, 40, 56, 0.16);
    --color-scrim: rgba(29, 40, 56, 0.32);
    --color-ph-1: #DCE6F2;
    --color-ph-2: #F8DECD;
    --color-ph-ink: #7287A2;

    --font-display: "Comfortaa", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-hand: "Comfortaa", "Trebuchet MS", system-ui, sans-serif;
    --font-display-weight: 600;
    --font-display-style: normal;
    --font-hand-style: normal;
    --font-display-scale: 0.92;        /* Comfortaa широкий */
    --font-body-scale: 1;
    --letter-display: -0.02em;

    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 36px;
    --radius-pill: 999px;
    --radius-page: 40px;
    --radius-photo: 36px;
    --radius-card: 28px;
    --radius-sheet: 36px;

    --radius-btn: 999px;
    --btn-text-transform: none;
    --btn-letter-spacing: 0.01em;
    --btn-font-weight: 600;

    --border-width: 1px;
    --border-style: solid;

    --shadow-sm: 0 1px 2px rgba(53, 92, 140, 0.06);
    --shadow-md: 0 10px 30px -12px rgba(53, 92, 140, 0.22);
    --shadow-lg: 0 30px 60px -24px rgba(53, 92, 140, 0.3);
    --shadow-page: 0 40px 90px -40px rgba(53, 92, 140, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    --shadow-photo: 0 24px 50px -20px rgba(244, 160, 110, 0.55), 0 8px 20px -10px rgba(53, 92, 140, 0.25);

    --texture-noise: none;
    --texture-bg:
      radial-gradient(55% 45% at 88% 8%, rgba(255, 208, 176, 0.65), transparent 70%),
      radial-gradient(50% 45% at 6% 92%, rgba(186, 210, 240, 0.7), transparent 70%),
      radial-gradient(40% 35% at 50% 50%, rgba(255, 255, 255, 0.9), transparent 75%);
    --texture-page:
      radial-gradient(45% 40% at 100% 0%, rgba(255, 214, 186, 0.35), transparent 70%),
      radial-gradient(40% 40% at 0% 100%, rgba(200, 220, 245, 0.35), transparent 70%);
    --texture-card: none;
    /* Мягкое пятно света вместо орнамента */
    --decor-corner: radial-gradient(closest-side, rgba(255, 196, 150, 0.55), rgba(255, 196, 150, 0) 100%);
    --decor-corner-size: 220px;
    --decor-corner-opacity: 1;
    --frame-tape: none;
    --frame-padding: 0px;
    --frame-bg: transparent;
    --tilt-photo: 0deg;
    --tilt-card: 0deg;
    --glass-blur: 18px;
  }

  /* ===================================================================
     4. WARM MINIMAL — сдержанность, элегантность, бережность
        Тёплые нейтральные, тонкие линии, паспарту, тонкая льняная текстура.
        Базовая тема тарифа FREE.
     =================================================================== */
  :root[data-theme="minimal"] {
    --theme-name: "Warm Minimal";

    --color-bg: #ECE5DA;
    --color-page: #FAF6F0;
    --color-surface: #F2ECE2;
    --color-surface-2: #E9E1D5;
    --color-ink: #2B2420;
    --color-ink-muted: #62574D;
    --color-line: #DDD3C6;
    --color-line-strong: #918577;
    --color-accent: #7A4E33;
    --color-on-accent: #FFFFFF;
    --color-accent-hover: #643F29;
    --color-accent-ink: #7A4E33;
    --color-accent-soft: #EEE3D6;
    --color-secondary: #B89A7A;
    --color-secondary-ink: #6E5440;
    --color-secondary-soft: #EFE6DA;
    --color-focus: #2B2420;
    --color-shade: rgba(43, 36, 32, 0.18);
    --color-scrim: rgba(43, 36, 32, 0.4);
    --color-ph-1: #E7DDD0;
    --color-ph-2: #D4C5B2;
    --color-ph-ink: #8A7865;

    --font-display: "Playfair Display", "Georgia", serif;
    --font-body: "Golos Text", "Segoe UI", system-ui, sans-serif;
    --font-hand: "Playfair Display", "Georgia", serif;
    --font-display-weight: 500;
    --font-display-style: normal;
    --font-hand-style: italic;
    --font-display-scale: 1;
    --font-body-scale: 1;
    --letter-display: -0.015em;

    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-pill: 999px;
    --radius-page: 2px;
    --radius-photo: 1px;
    --radius-card: 3px;
    --radius-sheet: 8px;

    --radius-btn: 2px;
    --btn-text-transform: uppercase;
    --btn-letter-spacing: 0.09em;
    --btn-font-weight: 500;

    --border-width: 1px;
    --border-style: solid;

    --shadow-sm: none;
    --shadow-md: 0 1px 0 rgba(43, 36, 32, 0.06);
    --shadow-lg: 0 20px 40px -24px rgba(43, 36, 32, 0.3);
    --shadow-page: 0 1px 0 rgba(43, 36, 32, 0.05), 0 24px 50px -34px rgba(43, 36, 32, 0.4);
    --shadow-photo: none;

    --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Лён: тончайшая сетка нитей */
    --texture-linen:
      repeating-linear-gradient(0deg, rgba(90, 70, 50, 0.025) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(90, 70, 50, 0.022) 0 1px, transparent 1px 4px);
    --texture-bg: var(--texture-linen), var(--texture-noise);
    --texture-page: var(--texture-noise);
    --texture-card: none;
    /* Тонкая линия-росчерк */
    --decor-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23B89A7A' stroke-width='1'%3E%3Cpath d='M20 100 H100'/%3E%3Ccircle cx='60' cy='100' r='3' fill='%23FAF6F0'/%3E%3Cpath d='M100 20 V100'/%3E%3C/svg%3E");
    --decor-corner-size: 96px;
    --decor-corner-opacity: 0.9;
    --frame-tape: none;
    --frame-padding: 12px;            /* паспарту */
    --frame-bg: #FFFFFF;
    --tilt-photo: 0deg;
    --tilt-card: 0deg;
    --glass-blur: 0px;
  }

  /* Нет атрибута темы (JS ещё не отработал) — ведём себя как Bloom.
     Дублировать токены не нужно: inline-скрипт в <head> ставит тему
     до первой отрисовки (см. DESIGN.md → «Подключение»). */

  /* ===================================================================
     Добавлено экранами (T-004…T-010). Новые токены добавлять ТОЛЬКО сюда,
     сразу во все 4 темы, с комментарием «T-0xx: зачем».
     =================================================================== */

  /* T-008: конверт письма (letter.html) — корпус, карман, клапан,
     подкладка, сургучная печать; бумага письма. Печать — декор,
     значок на ней (--envelope-seal-ink) контрастен ≥ 3:1. */
  :root[data-theme="bloom"] {
    --envelope-body: #E6D8BF;
    --envelope-pocket: #F0E5D1;
    --envelope-flap: #E0CFB2;
    --envelope-edge: rgba(90, 80, 55, 0.18);
    --envelope-lining: repeating-linear-gradient(135deg, #DCE4CC 0 10px, #F3EEDF 10px 20px);
    --envelope-seal: #9A5236;
    --envelope-seal-ink: #FBF7EF;
    --texture-letter: var(--texture-noise);
  }
  :root[data-theme="scrapbook"] {
    --envelope-body: #D5BA8E;
    --envelope-pocket: #E0C79D;
    --envelope-flap: #CBAE7F;
    --envelope-edge: rgba(90, 60, 30, 0.28);
    --envelope-lining: radial-gradient(circle at 6px 6px, #E9A79F 2.4px, transparent 3px) 0 0 / 14px 14px, #FFF4DA;
    --envelope-seal: #B0443B;
    --envelope-seal-ink: #FFFFFF;
    --texture-letter:
      linear-gradient(90deg, transparent 30px, rgba(176, 68, 59, 0.35) 30px 31.5px, transparent 31.5px),
      repeating-linear-gradient(transparent 0 29px, rgba(47, 102, 136, 0.18) 29px 30px);
  }
  :root[data-theme="diffused"] {
    --envelope-body: #E9EFF7;
    --envelope-pocket: #F8FAFD;
    --envelope-flap: #DFE7F2;
    --envelope-edge: rgba(53, 92, 140, 0.14);
    --envelope-lining: radial-gradient(70% 90% at 50% 0%, #FCE1CF, #F4F7FC 70%);
    --envelope-seal: #F2B790;
    --envelope-seal-ink: #6A3418;
    --texture-letter: radial-gradient(60% 50% at 100% 0%, rgba(255, 214, 186, 0.3), transparent 70%);
  }
  :root[data-theme="minimal"] {
    --envelope-body: #ECE4D7;
    --envelope-pocket: #F5EFE6;
    --envelope-flap: #E4DACB;
    --envelope-edge: rgba(43, 36, 32, 0.16);
    --envelope-lining: repeating-linear-gradient(90deg, #F5EFE6 0 7px, #D9CCBB 7px 8px);
    --envelope-seal: #7A4E33;
    --envelope-seal-ink: #FAF6F0;
    --texture-letter: none;
  }

  /* T-004: обложка — фактура переплёта (--cover-texture, слои поверх
     --texture-page), корешок книги слева (--cover-spine — ОДИН слой фона) и тиснёная
     рамка по краю обложки (--cover-frame, shorthand border). Декор. */
  :root[data-theme="bloom"] {
    --cover-texture:
      radial-gradient(55% 40% at 96% 4%, rgba(201, 139, 107, 0.24), transparent 70%),
      radial-gradient(60% 45% at 2% 98%, rgba(122, 150, 108, 0.26), transparent 70%);
    --cover-spine: linear-gradient(90deg, #415A3A, #4F6B47 45%, rgba(255, 255, 255, 0.35) 62%, #4F6B47 70%, rgba(79, 107, 71, 0.5));
    --cover-frame: 1px solid rgba(79, 107, 71, 0.34);
  }
  :root[data-theme="scrapbook"] {
    --cover-texture:
      linear-gradient(-38deg, transparent 0 46%, rgba(169, 211, 197, 0.55) 46% 54%, transparent 54%) right -40px bottom -40px / 200px 200px no-repeat,
      radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(150, 110, 60, 0.14));
    --cover-spine: linear-gradient(90deg, #963830, #B0443B 50%, rgba(255, 252, 244, 0.85) 50% 56%, #A13E35 56%);
    --cover-frame: 1.5px dashed rgba(176, 68, 59, 0.45);
  }
  :root[data-theme="diffused"] {
    --cover-texture:
      radial-gradient(60% 45% at 92% 6%, rgba(255, 200, 160, 0.55), transparent 70%),
      radial-gradient(55% 45% at 4% 96%, rgba(186, 210, 240, 0.55), transparent 70%);
    --cover-spine: linear-gradient(90deg, rgba(220, 230, 242, 0.95), rgba(255, 255, 255, 0.95) 55%, rgba(255, 214, 186, 0.55));
    --cover-frame: 1px solid rgba(255, 255, 255, 0.95);
  }
  :root[data-theme="minimal"] {
    --cover-texture: none;
    --cover-spine: linear-gradient(90deg, transparent 0 6px, #B89A7A 6px 7px, transparent 7px 10px, #B89A7A 10px 11px, transparent 11px);
    --cover-frame: 1px solid #B89A7A;
  }

  /* T-005: оглавление — линия timeline и «сейчас» на ней
     (--timeline-line — цвет линии ≥ 3:1 к странице не нужен, это декор;
     --timeline-now — ореол текущей точки). */
  :root[data-theme="bloom"] {
    --timeline-line: #C9BFA9;
    --timeline-now: rgba(201, 139, 107, 0.35);
  }
  :root[data-theme="scrapbook"] {
    --timeline-line: #D2BE9C;
    --timeline-now: rgba(231, 185, 75, 0.45);
  }
  :root[data-theme="diffused"] {
    --timeline-line: #C9D4E2;
    --timeline-now: rgba(244, 190, 152, 0.5);
  }
  :root[data-theme="minimal"] {
    --timeline-line: #CDBFAE;
    --timeline-now: rgba(184, 154, 122, 0.3);
  }
}