/* ============================================
 * MXOHO — Design Tokens v3.0 (Contemporary Luxury Editorial)
 * Palette: MIDNIGHT INDIGO + ROSE CHAMPAGNE + COOL MIST
 * Aesthetic: Luxury editorial — deep navy, warm brass-champagne, hairline details, generous whitespace
 * Fonts: Fraunces (Display Variable) + DM Sans (Body) + IBM Plex Mono (Meta)
 * NO EMOJI. Icons: SVG sprite only.
 * ============================================ */

:root {
    /* ========== RAW COLOR PALETTE ========== */
    /* Primary family — Midnight Indigo 午夜靛 (deep navy, not a bright royal blue) */
    --ink-50:   #F3F4F6;   /* 冷雾白 hover 背景 */
    --ink-100:  #E5E7EB;   /* 极浅靛 次级卡片 */
    --ink-200:  #D1D5DB;   /* 靛色 hairline 分隔 */
    --ink-300:  #9CA3AF;   /* 次级文本/图标 */
    --ink-400:  #6B7280;   /* muted标签 */
    --ink-500:  #4B5563;
    --ink-600:  #374151;
    --ink-700:  #1F2937;   /* PRIMARY：深夜靛 - 标题/Hero主背景 */
    --ink-800:  #111827;   /* 近黑靛 - 最深卡片/覆盖层/深色按钮 */
    --ink-900:  #0F172A;   /* 纯夜黑 - 终极深背景 */

    /* Accent family — Rose Champagne 玫瑰香槟 (warm brass, not brassy gold) */
    --rose-50:   #FFFBF4;  /* 极浅香槟 - highlight bg */
    --rose-100:  #FEF3E2;  /* 香槟卡片高光 */
    --rose-200:  #FBE4C0;  /* hairline细描边 */
    --rose-300:  #F5CF90;  /* 细描边/渐变中心 */
    --rose-400:  #EBBF73;  /* SLA 徽章背景 */
    --rose-500:  #DAB468;  /* ACCENT：玫瑰香槟主色 */
    --rose-600:  #C19A4B;  /* hover香槟 */
    --rose-700:  #9A7A38;  /* pressed香槟 */

    /* Neutral family — Cool Mist 冷雾灰 (editorial-grade neutral) */
    --mist-50:   #FAFAFA;  /* BG：全局雾白底色 */
    --mist-100:  #F5F3EF;  /* 奶油石灰 section alt-bg */
    --mist-200:  #E9E7E2;  /* hairline分隔线 */
    --mist-300:  #D9D6CF;  /* 输入框边框 */
    --mist-400:  #B8B5AD;  /* 次级标签边框 */
    --mist-500:  #8E8A82;  /* MUTED：辅助文字 */
    --mist-600:  #6E6A62;  /* 次级文字 */
    --mist-700:  #504C46;
    --mist-800:  #32302C;  /* 正文深色 */
    --mist-900:  #181715;  /* 最深文本/符号 */

    /* Semantic status */
    --status-ok-bg:    #F0FDF4;
    --status-ok-fg:    #166534;
    --status-warn-bg:  #FFFBF4;
    --status-warn-fg:  #9A7A38;
    --status-err-bg:   #FEF2F2;
    --status-err-fg:   #991B1B;
    --status-info-bg:  #EFF6FF;
    --status-info-fg:  #1E3A5F;

    /* ========== 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(--rose-500);
    --color-accent-hover:       var(--rose-600);
    --color-accent-active:      var(--rose-700);
    --color-accent-contrast:    var(--mist-900);

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

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

    --color-border:             var(--mist-200);
    --color-border-strong:      var(--mist-300);
    --color-border-hairline:    var(--mist-200);
    --color-border-champagne:   var(--rose-200);
    --color-divider:            var(--mist-200);

    --color-overlay:            rgba(15, 23, 42, 0.78);

    /* ========== TYPOGRAPHY ========== */
    /* Display/Headings: Fraunces Variable — optical-size variable serif, contemporary luxury */
    --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Noto Serif SC', serif;
    /* Body/Copy: DM Sans — warm geometric sans, humanist proportions, avoids cold Inter feel */
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
    /* Meta/Labels: IBM Plex Mono — editorial tabular feel, not harsh code mono */
    --font-meta:    'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Type scale (editorial rhythm) */
    --fs-micro:     0.6875rem; /* 11px — eyebrow ALL-CAPS, tracking 0.30em */
    --fs-small:     0.8125rem; /* 13px — captions, labels */
    --fs-base:      1rem;      /* 16px — body */
    --fs-lead:      1.125rem;  /* 18px — hero lead */
    --fs-h6:        1rem;
    --fs-h5:        1.25rem;   /* 20px */
    --fs-h4:        1.5rem;    /* 24px */
    --fs-h3:        clamp(1.5rem,   2.6vw, 2rem);     /* 24–32px */
    --fs-h2:        clamp(2rem,     4vw,   3rem);     /* 32–48px */
    --fs-h1:        clamp(3rem,     7vw,   5.25rem);  /* 48–84px editorial hero */

    --lh-tight:     1.02; /* Display titles (editorial crush) */
    --lh-head:      1.18; /* H2-H5 */
    --lh-body:      1.78; /* Long-form — generous editorial line-height */

    --tracking-eyebrow: 0.30em; /* ALL-CAPS micro label spacing */
    --tracking-display: -0.02em; /* Headings tight optical */

    /* ========== SPACING (8px grid, generous editorial proportions) ========== */
    --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: 96px;
    --sp-14: 140px;
    --sp-16: 200px;

    /* ========== RADIUS (soft editorial, not too round) ========== */
    --r-xs: 1px;
    --r-sm: 4px;       /* Buttons, inputs — sharpish for editorial feel */
    --r-md: 8px;       /* Cards */
    --r-lg: 14px;      /* Hero images, modal windows */
    --r-xl: 20px;      /* Feature tiles */
    --r-pill: 9999px;

    /* ========== SHADOWS (indigo-tinted, super-soft hairline, not heavy) ========== */
    --shadow-hairline: 0 1px 0 0 rgba(31, 41, 55, 0.03);
    --shadow-soft:     0 2px 8px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.02);
    --shadow-card:     0 18px 40px -20px rgba(17, 24, 39, 0.18), 0 1px 3px rgba(17, 24, 39, 0.03);
    --shadow-modal:    0 48px 120px -32px rgba(15, 23, 42, 0.28), 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-accent:   0 10px 30px -12px rgba(218, 180, 104, 0.4);
    --shadow-indigo:   0 0 50px rgba(30, 58, 95, 0.12);

    /* ========== MOTION (editorial restraint — slow ease-out, no gimmicks) ========== */
    --ease-out-editorial: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:  140ms;
    --t-base:  320ms;
    --t-slow:  600ms;
    --t-xslow: 900ms;

    /* ========== LAYOUT ========== */
    --container: 1280px;
    --container-narrow: 900px;
    --gutter: 40px;

    /* ========== BRAND DETAILS ========== */
    --hairline-champ: 1px solid var(--rose-200);
    --divider-center: linear-gradient(90deg, transparent 0%, var(--rose-300) 50%, transparent 100%);
    --gradient-primary: linear-gradient(135deg, var(--ink-800) 0%, var(--ink-700) 100%);
    --gradient-accent:  linear-gradient(135deg, var(--rose-500) 0%, var(--rose-400) 100%);
    --gradient-hero:    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 50%, var(--ink-700) 100%);
    --grain-overlay:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.09  0 0 0 0 0.16  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* Dark / night mode for admin */
@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(--mist-100);
        --color-text-sub:      var(--mist-200);
        --color-text-muted:    var(--mist-400);
        --color-border:        rgba(229, 231, 235, 0.08);
    }
}