/**
 * Mislens Global Foundation
 *
 * 文件位置：
 * /wp-content/themes/mislens-theme-v2/assets/css/global.css
 *
 * ==========================================================================
 * 职责
 * ==========================================================================
 *
 * 1. 定义 Mislens 全站基础设计变量。
 * 2. 注册 Mislens Brand 01 品牌字体。
 * 3. 定义全站通用容器。
 * 4. 定义全站 Primary / Secondary 按钮。
 *
 * 页面独有布局、字号、间距和响应式样式继续放在 modules/ 内。
 */


/* ==========================================================================
   01. 品牌字体
   ========================================================================== */

@font-face {
    font-family: "Mislens Brand";
    src:
        url("../fonts/mislens-brand-01-latin.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;

    unicode-range:
        U+0000-00FF,
        U+0100-017F,
        U+2000-206F,
        U+20AC;
}


/* ==========================================================================
   02. 全站设计变量
   ========================================================================== */

:root {

    /* 基础颜色 */

    --mislens-black: #111111;
    --mislens-white: #ffffff;

    --mislens-text: #252525;
    --mislens-muted: #6f6f6f;

    --mislens-border: #e7e7e7;
    --mislens-bg: #f7f7f7;


    /* Mislens 品牌颜色 */

    --mislens-primary: #FA7598;
    --mislens-primary-dark: #721A3F;
    --mislens-primary-soft: #FCEEF4;


    /* 字体 */

    --mislens-font-brand:
        "Mislens Brand",
        Arial,
        sans-serif;


    /* 页面基础 */

    --mislens-radius: 12px;
    --mislens-container: 1200px;
    --mislens-transition: 0.25s ease;
}


/* ==========================================================================
   03. 基础 Box Sizing
   ========================================================================== */

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


/* ==========================================================================
   04. 全站内容容器
   ========================================================================== */

.mislens-container {
    width:
        min(
            var(--mislens-container),
            calc(100% - 40px)
        );

    margin-inline: auto;
}


/* ==========================================================================
   05. 全站通用按钮
   ========================================================================== */

.mislens-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        12px
        22px;

    border:
        1px solid
        var(--mislens-primary);

    border-radius: 999px;

    background:
        var(--mislens-primary);

    color:
        var(--mislens-white);

    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--mislens-transition),
        border-color var(--mislens-transition),
        color var(--mislens-transition),
        transform var(--mislens-transition),
        box-shadow var(--mislens-transition);
}

.mislens-button:hover,
.mislens-button:focus-visible {
    background:
        var(--mislens-primary-dark);

    border-color:
        var(--mislens-primary-dark);

    color:
        var(--mislens-white);

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(114, 26, 63, 0.16);
}


/* ==========================================================================
   06. 全站次级按钮
   ========================================================================== */

.mislens-button--secondary {
    background:
        var(--mislens-white);

    border-color:
        #d8d8d8;

    color:
        var(--mislens-text);

    box-shadow: none;
}

.mislens-button--secondary:hover,
.mislens-button--secondary:focus-visible {
    background:
        var(--mislens-primary-soft);

    border-color:
        var(--mislens-primary);

    color:
        var(--mislens-primary-dark);

    box-shadow: none;
}