/* ========================================
   USTYURT DESIGN TOKENS
   Single source of truth for palette, sizing, spacing, and page themes.
   ======================================== */

:root {
    /* Core palette */
    --color-primary: #6d6f64;
    --color-secondary: #968d66;
    --color-tertiary: #6e7063;
    --color-accent-warm: #986555;
    --color-accent-cool: #79868f;
    --color-neutral: #adaaa0;
    --color-base: #6d6f64;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #333333;
    --color-text-light: #666666;
    --ornament-opacity: 0.12;

    /* Shared layout widths */
    --container-width: 1200px;
    --content-width: 927.53px;
    --wide-width: 1400px;
    --wide-content-width: 1180px;
    --header-width: var(--wide-width);

    /* Shared spacing */
    --header-height: 80px;
    --header-height-mobile: 78px;
    --header-height-mobile-sm: 72px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --header-height-mobile-safe: calc(var(--header-height-mobile) + var(--safe-area-top));
    --header-height-mobile-sm-safe: calc(var(--header-height-mobile-sm) + var(--safe-area-top));
    --section-pad-y: 5rem;
    --section-pad-x: 2rem;
    --page-top-spacing: 8rem;
    --page-bottom-spacing: 5rem;
    --section-gap: 3rem;
    --chapter-paper-min-height: 1230px;

    /* Hero sizing */
    --hero-art-width: 1920px;
    --hero-art-height: 1080px;
    --hero-art-mobile-width: 405px;
    --hero-art-mobile-height: 500px;
    --hero-content-offset: min(500px, calc(100dvh - 90px));

    /* Surface styling */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-strong: #e0e0e0;
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-panel: 0 15px 40px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(110, 112, 98, 0.4);

    /* Background pattern */
    --bg-size: 80px;
    --bg-color: #ffffff;
    --global-bg-pattern: none;

    /* Menu / action tokens */
    --menu-accent: #c5bca0;
    --menu-divider: rgba(197, 188, 160, 0.3);
    --menu-divider-soft: rgba(197, 188, 160, 0.15);
    --button-bg: var(--header-bg);
    --button-fg: var(--header-fg);
    --button-hover-bg: color-mix(in srgb, var(--header-bg) 82%, black 18%);
    --button-hover-fg: #ffffff;
    --photo-lightbox-bg: color-mix(in srgb, var(--page-color) 88%, black 12%);

    /* Theme palette */
    --theme-ch1: #968d66;
    --theme-ch2: #8b6556;
    --theme-ch3: #7c858d;
    --theme-ch4: #aba89f;
    --theme-ch5: #6e7063;
    --theme-ch6: #968d66;
    --theme-ch7: #8b6556;

    --theme-home: #6e7063;
    --theme-maps: #8b6556;
    --theme-photo: #5a5e52;
    --theme-signature: #6f786d;

    /* Active theme defaults */
    --page-color: var(--theme-home);
    --header-bg: var(--page-color);
    --footer-bg: var(--page-color);
    --header-fg: #ffffff;
    --footer-fg: #ffffff;
    --menu-bg-start: var(--page-color);
    --menu-bg-end: var(--page-color);
}

/* Theme assignment lives here only. */
body[data-theme] {
    --header-bg: var(--page-color);
    --footer-bg: var(--page-color);
    --menu-bg-start: var(--page-color);
    --menu-bg-end: var(--page-color);
    --button-bg: var(--header-bg);
}

body[data-theme="home"] {
    --page-color: var(--theme-home);
}

body[data-theme="maps"] {
    --page-color: var(--theme-maps);
}

body[data-theme="photo"] {
    --page-color: var(--theme-photo);
}

body[data-theme="signature"] {
    --page-color: var(--theme-signature);
}

body[data-theme="ch1"] {
    --page-color: var(--theme-ch1);
}

body[data-theme="ch2"] {
    --page-color: var(--theme-ch2);
}

body[data-theme="ch3"] {
    --page-color: var(--theme-ch3);
}

body[data-theme="ch4"] {
    --page-color: var(--theme-ch4);
}

body[data-theme="ch5"],
body[data-theme="protection"] {
    --page-color: var(--theme-ch5);
}

body[data-theme="ch6"] {
    --page-color: var(--theme-ch6);
}

body[data-theme="ch7"] {
    --page-color: var(--theme-ch7);
}