/* ══════════════════════════════════════════════════════
   AHQONE Design System — CSS Custom Properties
   默认：Ivory Luxe 浅色 · 可选 Velvet Noir 深色
══════════════════════════════════════════════════════ */

/* ── 默认色系：Ivory Luxe 浅色 ── */
:root,
.ahq-mode-light {

    /* 背景层级 — Ivory Luxe 白底 */
    --ahq-bg-0:        #F7F4EF;
    --ahq-bg-primary:  #FFFFFF;
    --ahq-bg-secondary:#F2EDE4;
    --ahq-bg-surface:  #FFFFFF;
    --ahq-bg-hover:    #F2EDE4;
    --ahq-bg-overlay:  rgba(255, 255, 255, 0.96);

    /* 文字色 */
    --ahq-text-primary:   #1A1509;
    --ahq-text-secondary: #473A26;
    --ahq-text-muted:     #8A7254;
    --ahq-text-inverse:   #FFFFFF;
    --ahq-text-gold:      #8A6508;

    /* 金色体系 */
    --ahq-gold:          #A8813A;
    --ahq-gold-light:    #BF9A4E;
    --ahq-gold-dark:     #8A6508;
    --ahq-gold-deeper:   #5C4804;
    --ahq-gold-bg:       rgba(168, 129, 58, 0.08);
    --ahq-gold-bg-hover: rgba(168, 129, 58, 0.14);
    --ahq-gold-border:   rgba(168, 129, 58, 0.28);

    /* 银色 */
    --ahq-silver:        #7A756E;
    --ahq-silver-light:  #A8A29A;
    --ahq-silver-muted:  #C4BEB4;
    --ahq-silver-border: rgba(90, 84, 74, 0.18);

    /* 品类专属色（浅色背景下略加深）*/
    --ahq-diamond:       #4A7AB8;
    --ahq-diamond-dark:  #2E5088;
    --ahq-diamond-glow:  rgba(74, 122, 184, 0.12);
    --ahq-diamond-bg:    rgba(74, 122, 184, 0.06);

    --ahq-silver-cat:    #6A6660;
    --ahq-silver-cat-glow: rgba(106, 102, 96, 0.10);

    --ahq-crystal:       #7C52C8;
    --ahq-crystal-dark:  #5A38A0;
    --ahq-crystal-glow:  rgba(124, 82, 200, 0.12);
    --ahq-crystal-bg:    rgba(124, 82, 200, 0.06);

    --ahq-jade:          #2D8A58;
    --ahq-jade-dark:     #1E6040;
    --ahq-jade-glow:     rgba(45, 138, 88, 0.12);
    --ahq-jade-bg:       rgba(45, 138, 88, 0.06);

    --ahq-ruby:          #C03030;
    --ahq-ruby-glow:     rgba(192, 48, 48, 0.12);

    --ahq-sapphire:      #3060B0;
    --ahq-sapphire-glow: rgba(48, 96, 176, 0.12);

    --ahq-emerald:       #2A9068;
    --ahq-emerald-glow:  rgba(42, 144, 104, 0.12);

    /* 语义色 */
    --ahq-success:       #2A9068;
    --ahq-success-bg:    rgba(42, 144, 104, 0.08);
    --ahq-error:         #C03030;
    --ahq-error-bg:      rgba(192, 48, 48, 0.08);
    --ahq-warning:       #9A7A08;
    --ahq-warning-bg:    rgba(154, 122, 8, 0.08);
    --ahq-info:          #3060B0;
    --ahq-info-bg:       rgba(48, 96, 176, 0.08);

    /* 边框 */
    --ahq-border:        rgba(26, 21, 9, 0.09);
    --ahq-border-strong: rgba(26, 21, 9, 0.14);
    --ahq-border-gold:   rgba(168, 129, 58, 0.22);
    --ahq-border-focus:  rgba(168, 129, 58, 0.45);

    /* 阴影 */
    --ahq-shadow-xs: 0 1px 3px rgba(26, 18, 8, 0.06);
    --ahq-shadow-sm: 0 2px 8px rgba(26, 18, 8, 0.08);
    --ahq-shadow-md: 0 4px 20px rgba(26, 18, 8, 0.10);
    --ahq-shadow-lg: 0 8px 40px rgba(26, 18, 8, 0.12);
    --ahq-shadow-xl: 0 16px 64px rgba(26, 18, 8, 0.14);
    --ahq-shadow-gold:    0 4px 24px rgba(154, 122, 8, 0.12);
    --ahq-shadow-gold-lg: 0 8px 40px rgba(154, 122, 8, 0.16);

    /* PDP / card type scale */
    --ahq-type-pdp-title:   clamp(1.5rem, 2.4vw, 2rem);
    --ahq-type-pdp-sub:     0.875rem;
    --ahq-type-card-title:  0.9375rem;
    --ahq-type-card-sub:    0.75rem;
    --ahq-type-kicker:      0.6875rem;

    /* Blocksy 变量映射 */
    --theme-palette-color-1: #9A7A08;
    --theme-palette-color-2: #B8920A;
    --theme-palette-color-3: #1A1208;
    --theme-palette-color-4: #5C4F3A;
    --theme-palette-color-5: #F2EDE4;
    --theme-palette-color-6: #EDE8DF;
    --theme-palette-color-7: #FAF7F2;
    --theme-palette-color-8: #F5F0E8;
    --theme-text-color:          #1A1208;
    --theme-link-initial-color:  #9A7A08;
    --theme-link-hover-color:    #7A6006;
    --theme-headings-color:      #1A1208;
}

/* ── 可选色系：Velvet Noir 深色 ── */
.ahq-mode-dark,
[data-theme="dark"] {

    --ahq-bg-0:        #070604;
    --ahq-bg-primary:  #0C0A07;
    --ahq-bg-secondary:#1A1510;
    --ahq-bg-surface:  #2A2218;
    --ahq-bg-hover:    #342B1E;
    --ahq-bg-overlay:  rgba(7, 6, 4, 0.85);

    --ahq-text-primary:   #F0EAE0;
    --ahq-text-secondary: #C0B89A;
    --ahq-text-muted:     #6A6054;
    --ahq-text-inverse:   #1A1510;
    --ahq-text-gold:      #D4AF37;

    --ahq-gold:          #D4AF37;
    --ahq-gold-light:    #F0D070;
    --ahq-gold-dark:     #B8920A;
    --ahq-gold-deeper:   #9A7A08;
    --ahq-gold-bg:       rgba(212, 175, 55, 0.08);
    --ahq-gold-bg-hover: rgba(212, 175, 55, 0.14);
    --ahq-gold-border:   rgba(212, 175, 55, 0.28);

    --ahq-silver:        #C8C4C0;
    --ahq-silver-light:  #E0DCD8;
    --ahq-silver-muted:  #888480;
    --ahq-silver-border: rgba(200, 196, 192, 0.2);

    --ahq-diamond:       #B8D4F8;
    --ahq-diamond-dark:  #5A90D4;
    --ahq-diamond-glow:  rgba(184, 212, 248, 0.15);
    --ahq-diamond-bg:    rgba(184, 212, 248, 0.05);

    --ahq-silver-cat:    #D8D4D0;
    --ahq-silver-cat-glow: rgba(216, 212, 208, 0.12);

    --ahq-crystal:       #B08FE8;
    --ahq-crystal-dark:  #7C52C8;
    --ahq-crystal-glow:  rgba(176, 143, 232, 0.15);
    --ahq-crystal-bg:    rgba(176, 143, 232, 0.05);

    --ahq-jade:          #4CAF7A;
    --ahq-jade-dark:     #2D6B2A;
    --ahq-jade-glow:     rgba(76, 175, 122, 0.15);
    --ahq-jade-bg:       rgba(76, 175, 122, 0.05);

    --ahq-ruby:          #E85555;
    --ahq-ruby-glow:     rgba(232, 85, 85, 0.15);

    --ahq-sapphire:      #4480D4;
    --ahq-sapphire-glow: rgba(68, 128, 212, 0.15);

    --ahq-emerald:       #3DAA80;
    --ahq-emerald-glow:  rgba(61, 170, 128, 0.15);

    --ahq-success:       #3DAA80;
    --ahq-success-bg:    rgba(61, 170, 128, 0.1);
    --ahq-error:         #E85555;
    --ahq-error-bg:      rgba(232, 85, 85, 0.1);
    --ahq-warning:       #D4AF37;
    --ahq-warning-bg:    rgba(212, 175, 55, 0.1);
    --ahq-info:          #4480D4;
    --ahq-info-bg:       rgba(68, 128, 212, 0.1);

    --ahq-border:        rgba(240, 234, 224, 0.08);
    --ahq-border-strong: rgba(240, 234, 224, 0.16);
    --ahq-border-gold:   rgba(212, 175, 55, 0.28);
    --ahq-border-focus:  rgba(212, 175, 55, 0.6);

    --ahq-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ahq-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --ahq-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --ahq-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --ahq-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.7);
    --ahq-shadow-gold:    0 4px 24px rgba(212, 175, 55, 0.20);
    --ahq-shadow-gold-lg: 0 8px 40px rgba(212, 175, 55, 0.25);

    --theme-palette-color-1: #D4AF37;
    --theme-palette-color-2: #F0D070;
    --theme-palette-color-3: #F0EAE0;
    --theme-palette-color-4: #C0B89A;
    --theme-palette-color-5: #2A2218;
    --theme-palette-color-6: #1A1510;
    --theme-palette-color-7: #0C0A07;
    --theme-palette-color-8: #070604;
    --theme-text-color:          #F0EAE0;
    --theme-link-initial-color:  #D4AF37;
    --theme-link-hover-color:    #F0D070;
    --theme-headings-color:      #F0EAE0;
}


/* ── 全局不变量（深浅模式共用）── */
:root {

    /* 字体三层体系
       Display  → Bodoni Moda         (标题 / 产品名 / 筛选组标题)
       Body     → DM Sans             (正文 / 导航 / 价格数字)
       Badge    → Jost                (Logo / 全大写标签 / 小标题)
       Accent   → Cormorant Garamond  (仅 blockquote 等纯装饰)  */
    --ahq-font-display: 'Bodoni Moda', 'Georgia', serif;
    --ahq-font-elegant: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
    --ahq-font-body:    'DM Sans', 'Helvetica Neue', 'Arial', sans-serif;
    --ahq-font-badge:   'Jost', 'Helvetica Neue', 'Arial', sans-serif;
    --ahq-font-price:   var(--ahq-font-body); /* 价格并入 DM Sans，保留别名供旧引用 */
    --ahq-font-mono:    'Courier New', monospace;

    /* 兼容旧 CSS 中的 --font-* 别名（shop/header/woocommerce 等） */
    --font-display: var(--ahq-font-display);
    --font-elegant: var(--ahq-font-elegant);
    --font-body:    var(--ahq-font-body);
    --font-price:   var(--ahq-font-body);
    --font-badge:   var(--ahq-font-badge);

    /* 字号（流体排版）*/
    --ahq-text-xs:   0.75rem;
    --ahq-text-sm:   0.875rem;
    --ahq-text-base: 1rem;
    --ahq-text-lg:   1.125rem;
    --ahq-text-xl:   1.25rem;
    --ahq-text-2xl:  1.5rem;
    --ahq-text-3xl:  clamp(1.75rem, 2.5vw, 2rem);
    --ahq-text-4xl:  clamp(2rem, 3.5vw, 2.5rem);
    --ahq-text-5xl:  clamp(2.5rem, 5vw, 3.5rem);
    --ahq-text-hero: clamp(3rem, 7vw, 6rem);

    /* 字重 */
    --ahq-weight-light:  300;
    --ahq-weight-normal: 400;
    --ahq-weight-medium: 500;
    --ahq-weight-semi:   600;
    --ahq-weight-bold:   700;

    /* 行高 */
    --ahq-leading-tight:  1.2;
    --ahq-leading-snug:   1.4;
    --ahq-leading-normal: 1.6;
    --ahq-leading-loose:  1.8;

    /* 字间距 */
    --ahq-tracking-tight:  -0.02em;
    --ahq-tracking-normal:  0;
    --ahq-tracking-wide:    0.05em;
    --ahq-tracking-wider:   0.1em;
    --ahq-tracking-widest:  0.2em;

    /* 间距系统（8pt Grid）*/
    --ahq-space-1:  0.25rem;
    --ahq-space-2:  0.5rem;
    --ahq-space-3:  0.75rem;
    --ahq-space-4:  1rem;
    --ahq-space-5:  1.25rem;
    --ahq-space-6:  1.5rem;
    --ahq-space-8:  2rem;
    --ahq-space-10: 2.5rem;
    --ahq-space-12: 3rem;
    --ahq-space-16: 4rem;
    --ahq-space-20: 5rem;
    --ahq-space-24: 6rem;
    --ahq-space-section: clamp(4rem, 8vw, 8rem);

    /* 圆角 */
    --ahq-radius-none: 0;
    --ahq-radius-xs:   2px;
    --ahq-radius-sm:   4px;
    --ahq-radius-md:   8px;
    --ahq-radius-lg:   12px;
    --ahq-radius-xl:   16px;
    --ahq-radius-2xl:  24px;
    --ahq-radius-full: 9999px;

    /* 动画 */
    --ahq-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ahq-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ahq-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
    --ahq-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --ahq-duration-fast:   150ms;
    --ahq-duration-normal: 300ms;
    --ahq-duration-slow:   500ms;
    --ahq-duration-slower: 800ms;

    --ahq-transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
    --ahq-transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --ahq-transition-slow:   500ms cubic-bezier(0.16, 1, 0.3, 1);

    /* 响应式断点（文档约定，供各 CSS 文件统一引用）
       xl: 1200px · lg: 1024px · md: 768px · sm: 640px · xs: 480px */
    --ahq-bp-xl: 1200px;
    --ahq-bp-lg: 1024px;
    --ahq-bp-md: 768px;
    --ahq-bp-sm: 640px;
    --ahq-bp-xs: 480px;

    /* 布局 */
    --ahq-max-width:     1440px;
    --ahq-content-width: 1200px;
    --ahq-narrow-width:   800px;
    --ahq-sidebar-width:  280px;
    --ahq-header-height:        68px;
    --ahq-header-height-mobile: 56px;
    --ahq-admin-bar-height:     32px;

    /* Z-index 层级 */
    --ahq-z-below:   -1;
    --ahq-z-base:     0;
    --ahq-z-raised:  10;
    --ahq-z-dropdown:100;
    --ahq-z-sticky:  1100;
    --ahq-z-overlay: 300;
    --ahq-z-modal:   400;
    --ahq-z-toast:   500;
}