/* ============================================
   ТЕМА: MAIN
   ТОЛЬКО ТОКЕНЫ И ФОН ТЕМЫ (без компонентных оверрайдов)
   ============================================ */

@layer theme {
  [data-theme="main"] {
    --ui-opacity: 0.95;

    --scroll-texture-desktop: image-set(
      url('/fantasy/background-main-desktop.avif') type('image/avif'),
      url('/fantasy/background-main-desktop.webp') type('image/webp'),
      url('/fantasy/background-main-desktop.jpg') type('image/jpeg')
    );
    --scroll-texture-mobile: image-set(
      url('/fantasy/background-main-mobile.avif') type('image/avif'),
      url('/fantasy/background-main-mobile.webp') type('image/webp'),
      url('/fantasy/background-main-mobile.jpg') type('image/jpeg')
    );
    --scroll-texture: var(--scroll-texture-desktop);

    --color-bg: rgba(215, 204, 184, var(--ui-opacity));
    --color-bg-elevated: rgba(248, 243, 232, var(--ui-opacity));
    --color-bg-sunken: rgba(238, 230, 214, var(--ui-opacity));

    --color-text: #101010;
    --color-text-muted: #5c5245;
    --color-text-accent: #7f3f21;

    --color-primary: rgba(166, 80, 44, var(--ui-opacity));
    --color-primary-hover: rgba(143, 68, 36, var(--ui-opacity));
    --color-on-primary: #ffffff;
    --color-secondary: rgba(196, 139, 66, var(--ui-opacity));
    --color-success: rgba(47, 122, 79, var(--ui-opacity));
    --color-warning: rgba(184, 134, 47, var(--ui-opacity));
    --color-warning-strong: rgba(143, 99, 35, var(--ui-opacity));
    --color-danger: rgba(183, 63, 51, var(--ui-opacity));
    --color-danger-hover: rgba(155, 52, 42, var(--ui-opacity));
    --color-on-danger: #ffffff;

    --color-border: rgba(205, 189, 162, var(--ui-opacity));
    --color-border-light: rgba(222, 209, 188, var(--ui-opacity));
    --color-focus-ring: rgba(166, 80, 44, 0.34);

    --shadow-sm: 0 2px 6px rgba(56, 32, 14, 0.09);
    --shadow-md: 0 8px 18px rgba(56, 32, 14, 0.13);
    --shadow-lg: 0 18px 36px rgba(56, 32, 14, 0.16);
  }

  @media (orientation: portrait), (max-width: 960px) {
    [data-theme="main"] {
      --scroll-texture: var(--scroll-texture-mobile);
    }
  }

  [data-theme="main"] body {
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image: var(--scroll-texture);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}