:root {
  /* 核心顏色 - 符合MD3動態色彩系統 */
  --md3e-primary: #6750a4;
  --md3e-on-primary: #ffffff;
  --md3e-primary-container: #eaddff;
  --md3e-on-primary-container: #21005d;

  --md3e-secondary: #625b71;
  --md3e-on-secondary: #ffffff;
  --md3e-secondary-container: #e8def8;
  --md3e-on-secondary-container: #1d192b;

  --md3e-tertiary: #7d5260;
  --md3e-on-tertiary: #ffffff;
  --md3e-tertiary-container: #ffd8e4;
  --md3e-on-tertiary-container: #31111d;

  --md3e-error: #b3261e;
  --md3e-on-error: #ffffff;
  --md3e-error-container: #f9dedc;
  --md3e-on-error-container: #410e0b;

  /* 表面色 - 支持分層設計 */
  --md3e-surface: #fffbfe;
  --md3e-on-surface: #1c1b1f;
  --md3e-surface-variant: #e7e0ec;
  --md3e-on-surface-variant: #49454f;

  --md3e-surface-container-lowest: #ffffff;
  --md3e-surface-container-low: #f7f2fa;
  --md3e-surface-container: #f3edf7;
  --md3e-surface-container-high: #ece6f0;
  --md3e-surface-container-highest: #e6e0e9;

  /* 其他基礎變量 */
  --md3e-outline: #79747e;
  --md3e-outline-variant: #cac4d0;

  /* 功能色 */
  --md3e-success: #2e7d32;
  --md3e-on-success: #ffffff;
  --md3e-success-container: #c8e6c9;
  --md3e-on-success-container: #002205;

  --md3e-warning: #f57c00;
  --md3e-on-warning: #ffffff;
  --md3e-warning-container: #ffe0b2;
  --md3e-on-warning-container: #331a00;

  /* 形狀 - MD3圓角規範 */
  --md3e-shape-corner-small: 4px;
  --md3e-shape-corner-medium: 8px;
  --md3e-shape-corner-large: 16px;
  --md3e-shape-corner-full: 9999px;

  /* 陰影 - elevation層級 */
  --md3e-elevation-0: none;
  --md3e-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  --md3e-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.12);
  --md3e-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.1);
  --md3e-elevation-4: 0 14px 28px rgba(0, 0, 0, 0.2),
    0 10px 10px rgba(0, 0, 0, 0.1);

  /* 過渡動畫 - MD3標準緩動 */
  --md3e-transition-standard: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* 字體設置 */
  --md3e-font-family: system-ui;
}

/* 深色模式變量覆蓋 */
[data-theme="dark"] {
  --md3e-primary: #d0bcff;
  --md3e-on-primary: #381e72;
  --md3e-primary-container: #4f378b;
  --md3e-on-primary-container: #eaddff;

  --md3e-secondary: #ccc2dc;
  --md3e-on-secondary: #332d41;
  --md3e-secondary-container: #4a4458;
  --md3e-on-secondary-container: #e8def8;

  --md3e-tertiary: #efb8c8;
  --md3e-on-tertiary: #492532;
  --md3e-tertiary-container: #633b48;
  --md3e-on-tertiary-container: #ffd8e4;

  --md3e-error: #f2b8b5;
  --md3e-on-error: #601410;
  --md3e-error-container: #8c1d18;
  --md3e-on-error-container: #f9dedc;

  --md3e-surface: #1c1b1f;
  --md3e-on-surface: #e6e0e9;
  --md3e-surface-variant: #49454f;
  --md3e-on-surface-variant: #cac4d0;

  --md3e-surface-container-lowest: #141218;
  --md3e-surface-container-low: #1d1b20;
  --md3e-surface-container: #211f26;
  --md3e-surface-container-high: #2b2930;
  --md3e-surface-container-highest: #36343b;

  --md3e-outline: #938f99;
  --md3e-outline-variant: #49454f;

  --md3e-success: #aec6ff;
  --md3e-on-success: #002d66;
  --md3e-success-container: #00439b;
  --md3e-on-success-container: #d8e2ff;

  --md3e-warning: #ffb74d;
  --md3e-on-warning: #4a2500;
  --md3e-warning-container: #8c5100;
  --md3e-on-warning-container: #ffddb7;

  /* 深色模式陰影 */
  --md3e-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
  --md3e-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 強制橫屏顯示設置 */
@media screen and (max-width: 767px) {
  /* 豎屏狀態提示層 */
  .orientation-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--md3e-surface);
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    text-align: center;
  }

  .orientation-overlay i {
    font-size: 3rem;
    color: var(--md3e-primary);
    animation: rotate 2s infinite ease-in-out;
  }

  @keyframes rotate {
    0%,
    100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(90deg);
    }
  }

  /* 豎屏狀態下顯示提示 */
  @media (orientation: portrait) {
    .orientation-overlay {
      display: flex;
    }

    /* 頁面內容旋轉適配 */
    .app-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vh;
      height: 100vw;
      transform: rotate(90deg) translate(0, -100%);
      transform-origin: 0 0;
      overflow: hidden;
      transition: transform 0.3s ease-out;
    }
  }

  /* 橫屏狀態恢復正常 */
  @media (orientation: landscape) {
    .app-container {
      position: static;
      width: 100%;
      height: 100%;
      transform: none;
    }
  }
}

/* 平板及桌面設備保持默認 */
@media screen and (min-width: 768px) {
  body {
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
  }

  .orientation-overlay {
    display: none !important;
  }
}