/* ============================================
   Mujoo Design Token System v1.0
   基於 Open Props 的品牌定制 Token
   
   核心原則：
   1. 所有數值通過變量引用，不寫死
   2. 響應式斷點統一管理
   3. 間距、圓角、陰影、色彩全部 Token 化
   4. 支持主題切換（未來擴展）
   ============================================ */

/* ===== 引入 Open Props 核心模組 ===== */
@import "/mujoo/css/vendor/open-props-1.7.23.mujoo.css";

/* ===== Mujoo 品牌色彩 Token ===== */
:root {
  /* --- 主色 Tiffany 系列 --- */
  --mu-primary:        #81D8D0;
  --mu-primary-dark:   #5CBFB6;
  --mu-primary-light:  #B5EAE5;
  --mu-primary-alpha:  rgba(129, 216, 208, 0.15);
  --mu-primary-alpha-md: rgba(129, 216, 208, 0.3);
  --mu-primary-alpha-lg: rgba(129, 216, 208, 0.92);

  /* --- 輔助色 --- */
  --mu-pink:           #F5A5B8;
  --mu-pink-light:     #FDE4EC;
  --mu-coral:          #FF6B6B;
  --mu-gold:           #F0C75E;
  --mu-purple:         #B8A9E8;

  /* --- 中性色 --- */
  --mu-cream:          #FFF8F0;
  --mu-white:          #FFFFFF;
  --mu-ocean-dark:     #1A4B6E;
  --mu-ocean-mid:      #2A7B9B;
  --mu-sand:           #F5E6D3;
  --mu-text:           #2C3E50;
  --mu-text-light:     #7F8C8D;
  --mu-text-muted:     #BDC3C7;

  /* ===== 響應式斷點 Token ===== */
  /* 不寫死，統一管理，所有頁面共用 */
  --mu-bp-sm:   576px;   /* 大手機 */
  --mu-bp-md:   768px;   /* 平板 */
  --mu-bp-lg:   992px;   /* 桌面 */
  --mu-bp-xl:   1200px;  /* 大桌面 */
  --mu-bp-xxl:  1400px;  /* 超大屏 */

  /* ===== 容器最大寬度 Token ===== */
  --mu-container-sm:   540px;
  --mu-container-md:   720px;
  --mu-container-lg:   960px;
  --mu-container-xl:   1140px;
  --mu-container-xxl:  1320px;

  /* ===== 間距 Token（基於 Open Props --size-*） ===== */
  --mu-space-xs:    var(--size-1);    /* 0.25rem = 4px */
  --mu-space-sm:    var(--size-2);    /* 0.5rem = 8px */
  --mu-space-md:    var(--size-3);    /* 1rem = 16px */
  --mu-space-lg:    var(--size-5);    /* 1.5rem = 24px */
  --mu-space-xl:    var(--size-7);    /* 2rem = 32px */
  --mu-space-2xl:   var(--size-8);    /* 3rem = 48px */
  --mu-space-3xl:   var(--size-9);    /* 4rem = 64px */

  /* ===== 圓角 Token（基於 Open Props） ===== */
  --mu-radius-sm:   var(--radius-2);   /* 8px → 小元素 */
  --mu-radius-md:   var(--radius-3);   /* 1rem → 卡片 */
  --mu-radius-lg:   var(--radius-4);   /* 2rem → 大卡片 */
  --mu-radius-xl:   1.5rem;            /* 24px → 彈窗 */
  --mu-radius-full: var(--radius-round); /* 50% → 頭像 */
  --mu-radius-pill: 9999px;            /* 膠囊按鈕 */

  /* ===== 陰影 Token（基於 Open Props） ===== */
  --mu-shadow-sm:   var(--shadow-2);
  --mu-shadow-md:   var(--shadow-3);
  --mu-shadow-lg:   var(--shadow-4);
  --mu-shadow-xl:   var(--shadow-5);
  /* 品牌陰影（帶 Tiffany 色調） */
  --mu-shadow-brand-sm: 0 2px 8px rgba(26, 75, 110, 0.1);
  --mu-shadow-brand-md: 0 4px 16px rgba(26, 75, 110, 0.15);
  --mu-shadow-brand-lg: 0 8px 32px rgba(26, 75, 110, 0.2);

  /* ===== 動畫 Token（基於 Open Props） ===== */
  --mu-ease:        var(--ease-3);
  --mu-ease-spring: var(--ease-squish-3);
  --mu-duration-fast:   0.15s;
  --mu-duration-normal: 0.3s;
  --mu-duration-slow:   0.5s;
  --mu-transition:  all var(--mu-duration-normal) var(--mu-ease);

  /* ===== 字體 Token ===== */
  --mu-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mu-font-size-xs:   0.75rem;   /* 12px */
  --mu-font-size-sm:   0.8125rem; /* 13px */
  --mu-font-size-md:   0.9375rem; /* 15px */
  --mu-font-size-lg:   1.125rem;  /* 18px */
  --mu-font-size-xl:   1.25rem;   /* 20px */
  --mu-font-size-2xl:  1.375rem;  /* 22px */
  --mu-font-size-3xl:  1.75rem;   /* 28px */
  --mu-font-weight-normal: 400;
  --mu-font-weight-medium: 500;
  --mu-font-weight-bold:   600;
  --mu-font-weight-heavy:  700;
  --mu-font-weight-black:  900;

  /* ===== Z-Index Token（基於 Open Props） ===== */
  --mu-z-base:     var(--layer-1);
  --mu-z-dropdown: var(--layer-2);
  --mu-z-sticky:   var(--layer-3);
  --mu-z-overlay:  var(--layer-4);
  --mu-z-modal:    var(--layer-5);

  /* ===== 圖標尺寸 Token ===== */
  --mu-icon-sm:   20px;
  --mu-icon-md:   28px;
  --mu-icon-lg:   40px;
  --mu-icon-xl:   56px;

  /* ===== 毛毡紋理 Token ===== */
  --mu-felt-opacity: 0.03;
  --mu-glass-bg:     rgba(255, 255, 255, 0.88);
  --mu-glass-blur:   16px;
  --mu-stitch-color: rgba(129, 216, 208, 0.25);
  --mu-stitch-width: 2px;
}

/* ===== 響應式 Token 覆蓋 ===== */
/* 平板端：增大間距和字體 */
@media (min-width: 768px) {
  :root {
    --mu-space-md:    var(--size-4);    /* 1.25rem */
    --mu-space-lg:    var(--size-6);    /* 1.75rem */
    --mu-space-xl:    var(--size-8);    /* 3rem */
    --mu-font-size-lg:  1.25rem;
    --mu-font-size-xl:  1.375rem;
    --mu-font-size-2xl: 1.5rem;
    --mu-icon-lg:   48px;
    --mu-icon-xl:   64px;
  }
}

/* PC 端：進一步增大 */
@media (min-width: 992px) {
  :root {
    --mu-space-md:    var(--size-4);    /* 1.25rem */
    --mu-space-lg:    var(--size-7);    /* 2rem */
    --mu-space-xl:    var(--size-9);    /* 4rem */
    --mu-font-size-lg:  1.375rem;
    --mu-font-size-xl:  1.5rem;
    --mu-font-size-2xl: 1.625rem;
    --mu-font-size-3xl: 2rem;
    --mu-icon-lg:   52px;
    --mu-icon-xl:   72px;
  }
}