/* ============================================
 * MXOHO — Design Tokens (Redesigned 2026-08)
 * Palette: MIDNIGHT INK + POLISHED BRASS + IVORY PAPER
 * Fonts: Playfair Display (Display) + Manrope (Body)
 * Icons: Inline SVG from assets/icons.svg sprite (NO EMOJI)
 * ============================================ */

:root {
    /* ========== RAW COLOR PALETTE ========== */
    /* Primary family — Midnight Ink 午夜墨蓝 (replacing former Forest Green) */
    --ink-50:   #EEF2F8;   /* 雾霭蓝：hover 背景 */
    --ink-100:  #D6DEEC;
    --ink-200:  #A9B9D2;
    --ink-300:  #778FB3;
    --ink-400:  #4A6589;   /* 次级文字/边框 */
    --ink-500:  #2A456B;
    --ink-600:  #1C3455;   /* 主按钮/导航背景 */
    --ink-700:  #132A46;   /* PRIMARY：标题色/Hero */
    --ink-800:  #0E2239;   /* 深色卡片背景 */
    --ink-900:  #091726;   /* 近黑：深色模式正文 */

    /* Accent family — Polished Brass 抛光暖金 */
    --brass-50:  #FBF5EA;
    --brass-100: #F3E5CB;
    --brass-200: #E6CC9D;
    --brass-300: #D7AF6D;   /* SLA 细描边 */
    --brass-400: #C89952;
    --brass-500: #B7905B;   /* ACCENT：徽章/强调色 */
    --brass-600: #A07A48;   /* 金色悬浮 */
    --brass-700: #7F6036;   /* 金色按下 */

    /* Neutral family — Ivory Paper 象牙纸色 */
    --ivory-50:   #FBF8F3;  /* BG：全局页面底色 */
    --ivory-100:  #F5EFE6;  /* 段落背景/区块背景 */
    --ivory-200:  #EDE4D3;  /* 卡片分隔线 */
    --ivory-300:  #DED2BB;  /* 输入框边框 */
    --ivory-400:  #C7B79A;  /* 次级标签边框 */
    --ivory-500:  #9A8A6F;  /* Muted：辅助文字 */
    --ivory-600:  #6C6252;
    --ivory-700:  #494439;
    --ivory-800:  #2C2921;  /* 正文深色 */
    --ivory-900:  #1A1710;  /* 最深文本/符号 */

    /* Semantic status colors */
    --status-ok-bg:    #EAF0EA;
    --status-ok-fg:    #1F5A3B;
    --status-warn-bg:  #FBF0DC;
    --status-warn-fg:  #8A5E16;
    --status-err-bg:   #F7E0DF;
    --status-err-fg:   #8C1F1A;
    --status-info-bg:  #E6EEF8;
    --status-info-fg:  #173E6A;

    /* ========== SEMANTIC TOKENS ========== */
    --color-primary:            var(--ink-700);
    --color-primary-hover:      var(--ink-600);
    --color-primary-active:     var(--ink-800);
    --color-primary-contrast:   #ffffff;

    --color-accent:             var(--brass-500);
    --color-accent-hover:       var(--brass-600);
    --color-accent-active:      var(--brass-700);
    --color-accent-contrast:    var(--ivory-900);

    --color-bg:                 var(--ivory-50);
    --color-bg-alt:             var(--ivory-100);
    --color-bg-elevated:        #ffffff;
    --color-bg-primary:         var(--ink-700);

    --color-text:               var(--ivory-900);
    --color-text-sub:           var(--ivory-700);
    --color-text-muted:         var(--ivory-500);
    --color-text-on-primary:    #ffffff;
    --color-text-on-accent:     var(--ivory-900);

    --color-border:             var(--ivory-200);
    --color-border-strong:      var(--ivory-300);
    --color-divider:            var(--ivory-200);

    --color-overlay:            rgba(9, 23, 38, 0.72);

    /* ========== TYPOGRAPHY ========== */
    /* Display/Headings: Playfair Display — timeless editorial serif (luxury home brand default) */
    --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Noto Serif SC', serif;
    /* Body/Copy: Manrope — contemporary warm sans w/ extended Latin + tabular figures */
    --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
    /* Meta/Labels: Mono for small metadata, tracking */
    --font-meta:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Type scale */
    --fs-micro:     0.6875rem; /* 11px - eyebrow tags, tracking 0.28em */
    --fs-small:     0.8125rem; /* 13px - captions, form labels */
    --fs-base:      1rem;      /* 16px - body copy base */
    --fs-lead:      1.125rem;  /* 18px - hero lead, section intro */
    --fs-h6:        1rem;
    --fs-h5:        1.25rem;   /* 20px */
    --fs-h4:        1.5rem;    /* 24px */
    --fs-h3:        clamp(1.375rem, 2.4vw, 1.875rem); /* 22–30px */
    --fs-h2:        clamp(1.75rem,  3.6vw, 2.5rem);   /* 28–40px */
    --fs-h1:        clamp(2.5rem,   6vw,   4.25rem);  /* 40–68px */

    --lh-tight:     1.08; /* Display */
    --lh-head:      1.2;  /* H2-H5 */
    --lh-body:      1.72; /* Long-form readability */

    --tracking-eyebrow: 0.28em;
    --tracking-display: -0.015em;

    /* ========== SPACING (8px base grid) ========== */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-8:  48px;
    --sp-10: 64px;
    --sp-12: 80px;
    --sp-14: 112px;

    /* ========== RADIUS ========== */
    --r-xs: 2px;
    --r-sm: 4px;       /* Buttons, form inputs */
    --r-md: 8px;       /* Cards */
    --r-lg: 16px;      /* Hero images, modal windows */
    --r-xl: 24px;      /* Feature tiles */
    --r-pill: 9999px;

    /* ========== SHADOWS (soft, warm paper-shadow, no black) ========== */
    --shadow-hairline: 0 1px 0 0 rgba(20, 42, 70, 0.04);
    --shadow-soft:     0 2px 10px rgba(15, 34, 57, 0.05), 0 1px 2px rgba(15, 34, 57, 0.04);
    --shadow-card:     0 12px 32px -12px rgba(15, 34, 57, 0.18), 0 2px 8px rgba(15, 34, 57, 0.04);
    --shadow-modal:    0 32px 80px -24px rgba(15, 34, 57, 0.28), 0 4px 16px rgba(15, 34, 57, 0.08);
    --shadow-accent:   0 8px 24px -8px rgba(183, 144, 91, 0.38);

    /* ========== MOTION ========== */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:  120ms;
    --t-base:  240ms;
    --t-slow:  480ms;
    --t-xslow: 720ms;

    /* ========== LAYOUT ========== */
    --container: 1280px;
    --container-narrow: 960px;
    --gutter: 32px;

    /* ========== BRAND DETAILS ========== */
    --border-accent: 1px solid var(--brass-300);
    --divider-line: linear-gradient(90deg, transparent 0%, var(--brass-300) 20%, var(--brass-300) 80%, transparent 100%);
}

/* Dark-mode tokens (for admin night mode, optional future) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:            var(--ink-900);
        --color-bg-alt:        var(--ink-800);
        --color-bg-elevated:   var(--ink-800);
        --color-text:          var(--ivory-50);
        --color-text-sub:      var(--ivory-200);
        --color-text-muted:    var(--ivory-400);
        --color-border:        rgba(222, 210, 187, 0.12);
    }
}