/*
    File: base.css
    Purpose:
    - global reset and typography
    - design tokens and baseline dimensions
    - desktop-first viewport baseline for phase one delivery
*/

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/fonts/latin/CormorantGaramond-Regular.subset.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/fonts/latin/CormorantGaramond-Bold.subset.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "LXGW WenKai";
    src: url("/fonts/cjk/LXGWWenKaiGB-Regular.subset.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "LXGW WenKai";
    src: url("/fonts/cjk/LXGWWenKaiGB-Medium.subset.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

:root {
    --desktop-fixed-width: 1440px;
    --desktop-min-width: 1280px;
    --desktop-max-width: 1720px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-sm: 4px;
    --radius-card: 5px;
    --radius-gallery: 10px;

    --font-body-latin: "Cormorant Garamond", serif;
    --font-body-cjk: "LXGW WenKai", serif;
    --font-ui: "Segoe UI", "Microsoft YaHei", sans-serif;
    --font-code: "Consolas", "SF Mono", monospace;

    --fs-base: 1rem;
    --lh-body: 1.75;
    --lh-heading: 1.4;

    --color-level-1: #ede6dc;
    --color-level-2: #8a9aaa;
    --color-level-3: #c8a96e;
    --color-level-4: #8c7b6b;
    --color-level-5: #2a2118;

    --opacity-idle: 0.72;
    --opacity-secondary: 0.7;
    --opacity-active: 1;
    --opacity-disabled: 0.3;

    --divider: rgba(138, 154, 170, 0.3);
    --shadow-lift: 0 8px 30px rgba(42, 33, 24, 0.12);

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fade: 0.5s;
    --t-blur: 0.7s;
    --t-word: 0.8s;

    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    min-height: 100vh;
    color: var(--color-level-1);
    background: transparent;
    font-family: var(--font-body-latin), var(--font-body-cjk);
    line-height: var(--lh-body);
    letter-spacing: 0.01em;
}

body.zh,
body[lang="zh"],
body[lang="zh-cn"] {
    font-family: var(--font-body-cjk), var(--font-body-latin);
}

body.is-desktop-locked {
    min-width: var(--desktop-min-width);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--lh-heading);
    margin: 0;
}

p {
    margin: 0 0 1.5em;
}

.site-shell {
    position: relative;
    width: min(100%, var(--desktop-max-width));
    min-width: var(--desktop-min-width);
    margin: 0 auto;
}

.site-background {
    position: fixed;
    inset: 0;
    z-index: -100;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.site-background-blur {
    position: fixed;
    inset: 0;
    z-index: -90;
    backdrop-filter: blur(0);
    transition: backdrop-filter var(--t-blur) var(--ease-standard), opacity var(--t-fade) var(--ease-standard);
    opacity: 0;
}

.site-background-blur.is-active {
    opacity: 1;
    backdrop-filter: blur(8px);
}

.u-divider {
    border-bottom: 1px solid var(--divider);
}

.u-muted {
    opacity: var(--opacity-secondary);
}

.u-hidden {
    display: none !important;
}