/* ═══════════════════════════════════════════════════════════════════════
   P016 设计令牌系统 — 86 CSS Custom Properties
   来源: P016_皮肤系统架构设计_v1.0.md
   品牌色: 百盛橙 #ED6A2E
   基础皮肤: SKIN-BAISHENG-ORANGE (Foundation Layer 1)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────
     Color / 色彩体系 (24 tokens)
     ───────────────────────────────────────────── */

  /* Background */
  --color-bg-page:              #FFF5EE;
  --color-bg-card:              #FFFFFF;
  --color-bg-card-hover:        #FFF0E0;
  --color-bg-input:             #FEF9F5;
  --color-bg-mask:              rgba(0, 0, 0, 0.45);
  --color-bg-skeleton:          #F0E8E0;
  --color-bg-toast:             rgba(0, 0, 0, 0.75);

  /* Text */
  --color-text-primary:         #1A1A2E;
  --color-text-secondary:       #6B6B80;
  --color-text-hint:            #767685;
  --color-text-inverse:         #FFFFFF;
  --color-text-link:            #ED6A2E;
  --color-text-price:           #ED6A2E;

  /* Brand */
  --color-brand-primary:        #ED6A2E;
  --color-brand-light:          #FF8C5A;
  --color-brand-dark:           #C24E1E;
  --color-brand-gradient:       linear-gradient(135deg, #ED6A2E, #FF8C5A);
  --color-brand-ghost:          rgba(237, 106, 46, 0.08);

  /* Status */
  --color-status-success:       #2ECC71;
  --color-status-warning:       #F39C12;
  --color-status-error:         #E74C3C;
  --color-status-info:          #3498DB;
  --color-status-processing:    #9B59B6;

  /* ─────────────────────────────────────────────
     Typography / 字体体系 (14 tokens)
     ───────────────────────────────────────────── */

  --typography-font-family:     -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --typography-font-family-display: "Alibaba PuHuiTi", "PingFang SC", sans-serif;

  /* Font Size — rpx→px: divide by 2 (750rpx design width → 375px base) */
  --typography-font-size-xxs:   10px;   /* 10rpx → 5px too small, use 10px */
  --typography-font-size-xs:    12px;   /* 20rpx → 10px */
  --typography-font-size-sm:    12px;   /* 24rpx → 12px */
  --typography-font-size-base:  14px;   /* 28rpx → 14px */
  --typography-font-size-md:    16px;   /* 32rpx → 16px */
  --typography-font-size-lg:    18px;   /* 36rpx → 18px */
  --typography-font-size-xl:    20px;   /* 40rpx → 20px */
  --typography-font-size-xxl:   24px;   /* 48rpx → 24px */

  /* Font Weight */
  --typography-font-weight-light:    300;
  --typography-font-weight-regular:  400;
  --typography-font-weight-medium:   500;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-bold:     700;

  /* Line Height */
  --typography-line-height-tight:  1.3;
  --typography-line-height-normal: 1.6;
  --typography-line-height-loose:  1.8;

  /* ─────────────────────────────────────────────
     Spacing / 间距 (7 tokens)
     ───────────────────────────────────────────── */

  --spacing-xxs:   2px;   /* 4rpx */
  --spacing-xs:    4px;   /* 8rpx */
  --spacing-sm:    6px;   /* 12rpx */
  --spacing-md:    8px;   /* 16rpx */
  --spacing-lg:    12px;  /* 24rpx */
  --spacing-xl:    16px;  /* 32rpx */
  --spacing-xxl:   24px;  /* 48rpx */

  /* ─────────────────────────────────────────────
     Radius / 圆角 (9 tokens)
     ───────────────────────────────────────────── */

  --radius-none:          0;
  --radius-xs:            2px;   /* 4rpx */
  --radius-sm:            4px;   /* 8rpx */
  --radius-md:            6px;   /* 12rpx */
  --radius-lg:            8px;   /* 16rpx */
  --radius-xl:            12px;  /* 24rpx */
  --radius-full:          9999px;
  --radius-bubble-self:   8px 2px 8px 8px;    /* 16rpx 4rpx 16rpx 16rpx */
  --radius-bubble-other:  2px 8px 8px 8px;    /* 4rpx 16rpx 16rpx 16rpx */

  /* ─────────────────────────────────────────────
     Border / 边框与分割 (8 tokens)
     ───────────────────────────────────────────── */

  --border-card:           #F0D5C0;
  --border-divider:        #F0E8E0;
  --border-input:          #E0D5C8;
  --border-input-focus:    #ED6A2E;
  --border-input-error:    #E74C3C;

  --border-width-thin:     1px;   /* 1rpx */
  --border-width-normal:   2px;   /* 2rpx */
  --border-width-thick:    3px;   /* 4rpx → roughly */

  /* ─────────────────────────────────────────────
     Shadow / 阴影 (6 tokens)
     ───────────────────────────────────────────── */

  --shadow-none:           none;
  --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-button:         0 2px 4px rgba(0, 0, 0, 0.15);

  /* ─────────────────────────────────────────────
     Bubble / 聊天气泡 (8 tokens)
     ───────────────────────────────────────────── */

  --bubble-self-bg:        #ED6A2E;
  --bubble-self-text:      #FFFFFF;
  --bubble-other-bg:       #FFFFFF;
  --bubble-other-text:     #1A1A2E;
  --bubble-system-bg:      rgba(237, 106, 46, 0.06);
  --bubble-system-text:    #A0A0B0;
  --bubble-system-icon:    #ED6A2E;
  --bubble-max-width:      80%;

  /* ─────────────────────────────────────────────
     Button / 按钮 (10 tokens)
     ───────────────────────────────────────────── */

  --btn-primary-bg:        #ED6A2E;
  --btn-primary-text:      #FFFFFF;
  --btn-secondary-bg:      rgba(237, 106, 46, 0.08);
  --btn-secondary-text:    #ED6A2E;
  --btn-danger-bg:         #E74C3C;
  --btn-danger-text:       #FFFFFF;
  --btn-disabled-bg:       #E0E0E0;
  --btn-disabled-text:     #B0B0B0;
  --btn-height:            44px;   /* 88rpx */
  --btn-min-width:         120px;  /* 240rpx */

  /* ─────────────────────────────────────────────
     Progress / 进度条 (4 tokens)
     ───────────────────────────────────────────── */

  --progress-fill:         #ED6A2E;
  --progress-track:        #FFE0CC;
  --progress-done:         #2ECC71;
  --progress-height:       6px;    /* 8rpx */

  /* ─────────────────────────────────────────────
     TabBar / 底部导航 (8 tokens)
     ───────────────────────────────────────────── */

  --tabbar-bg:             #FFFFFF;
  --tabbar-border:         #F0E8E0;
  --tabbar-text-default:   #767685;
  --tabbar-text-selected:  #ED6A2E;
  --tabbar-icon-size:      24px;  /* 48rpx */
  --tabbar-height:         50px;  /* 100rpx */
  --tabbar-font-size:      10px;  /* 20rpx */
  --tabbar-safe-bottom:    env(safe-area-inset-bottom, 0px);

  /* ─────────────────────────────────────────────
     NavBar / 顶部导航 (6 tokens)
     ───────────────────────────────────────────── */

  --navbar-bg:             #FFFFFF;
  --navbar-text:           #1A1A2E;
  --navbar-height:         44px;  /* 88rpx */
  --navbar-back-icon:      #1A1A2E;
  --navbar-border-bottom:  #F0E8E0;
  --navbar-title-size:     16px;  /* 32rpx */

  /* ─────────────────────────────────────────────
     Icon / 图标与装饰 (6 tokens)
     ───────────────────────────────────────────── */

  --icon-primary:          #ED6A2E;
  --icon-secondary:        #6B6B80;
  --icon-muted:            #B8B8C8;
  --icon-size-sm:          16px;  /* 32rpx */
  --icon-size-md:          24px;  /* 48rpx */
  --icon-size-lg:          32px;  /* 64rpx */

  /* ─────────────────────────────────────────────
     Animation / 动画效果 (8 tokens)
     ───────────────────────────────────────────── */

  --anim-duration-fast:      150ms;
  --anim-duration-normal:    300ms;
  --anim-duration-slow:      500ms;
  --anim-easing-default:     ease-out;
  --anim-easing-spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --anim-easing-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
  --anim-scale-press:        0.96;
  --anim-opacity-disabled:   0.4;
}

/* ─────────────────────────────────────────────
   暗色主题覆盖 (Dark Mode — 极光暗夜预备)
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:              #1A1A2E;
    --color-bg-card:              #242440;
    --color-bg-card-hover:        #2E2E50;
    --color-bg-input:             #2A2A44;
    --color-text-primary:         #F0F0FF;
    --color-text-secondary:       #9898C0;
    --color-text-hint:            #9898C0;
    --color-bg-mask:              rgba(0, 0, 0, 0.65);
    --color-bg-skeleton:          #2E2E50;
    --border-card:                #3A3A5C;
    --border-divider:             #3A3A5C;
    --border-input:               #3A3A5C;
    --shadow-sm:                  0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-md:                  0 4px 16px rgba(0, 0, 0, 0.30);
    --shadow-lg:                  0 8px 32px rgba(0, 0, 0, 0.40);
  }
}