/* AppShare 公共主题样式 - Cyan-Teal Modern Theme */
/* 所有页面统一使用此主题配置 */

:root {
  /* ==================== Primary Colors - 青蓝色主题 ==================== */
  --md-primary: #06b6d4;
  --md-primary-rgb: 6, 182, 212;
  --md-primary-dark: #0891b2;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #cffafe;
  --md-on-primary-container: #164e63;

  /* Primary Gradient */
  --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

  /* ==================== Secondary Colors - 蓝绿色辅助色 ==================== */
  --md-secondary: #14b8a6;
  --md-secondary-rgb: 20, 184, 166;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #ccfbf1;
  --md-on-secondary-container: #134e4a;

  /* Secondary Gradient */
  --secondary-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);

  /* ==================== Tertiary Colors - 蓝色强调色 ==================== */
  --md-tertiary: #3b82f6;
  --md-tertiary-rgb: 59, 130, 246;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #dbeafe;
  --md-on-tertiary-container: #1e3a8a;

  /* Tertiary Gradient */
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* ==================== Error Colors - 错误提示色 ==================== */
  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;

  /* ==================== Surface Colors - 表面颜色（浅色模式） ==================== */
  --md-surface: #ffffff;
  --md-on-surface: #1a1a1a;
  --md-surface-variant: #f8f9fa;
  --md-on-surface-variant: #5f6368;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #fefbff;
  --md-surface-container: #f8f9fa;
  --md-surface-container-high: #f1f3f5;
  --md-surface-container-highest: #e9ecef;

  /* Background Colors */
  --md-background: #f8f9fa;
  --md-on-background: #1a1a1a;
  
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f3f5;
  --bg-card: #ffffff;

  /* ==================== Text Colors - 文字颜色 ==================== */
  --text-primary: #1a1a1a;
  --text-secondary: #5f6368;
  --text-tertiary: #9aa0a6;

  /* ==================== Border & Outline Colors - 边框颜色 ==================== */
  --md-outline: #adb5bd;
  --md-outline-variant: #dee2e6;
  --border-color: #e9ecef;
  --border-hover: #dadce0;

  /* ==================== Inverse Colors - 反转颜色 ==================== */
  --md-inverse-surface: #2f3033;
  --md-inverse-on-surface: #f1f0f4;
  --md-inverse-primary: #67e8f9;

  /* ==================== Shadow and Elevation - 阴影 ==================== */
  --md-shadow: #000000;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  --md-elevation-level0: none;
  --md-elevation-level1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --md-elevation-level2: 0 4px 16px rgba(0, 0, 0, 0.08);
  --md-elevation-level3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --md-elevation-level4: 0 12px 32px rgba(0, 0, 0, 0.16);
  --md-elevation-level5: 0 16px 48px rgba(0, 0, 0, 0.20);

  /* ==================== Shape Tokens - 圆角 ==================== */
  --md-shape-corner-none: 0px;
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 24px;
  --md-shape-corner-full: 50%;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ==================== Motion Tokens - 动画 ==================== */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --md-motion-duration-short1: 50ms;
  --md-motion-duration-short2: 100ms;
  --md-motion-duration-short3: 150ms;
  --md-motion-duration-short4: 200ms;
  --md-motion-duration-medium1: 250ms;
  --md-motion-duration-medium2: 300ms;
  --md-motion-duration-medium3: 350ms;
  --md-motion-duration-medium4: 400ms;
  --md-motion-duration-long1: 450ms;
  --md-motion-duration-long2: 500ms;
  --md-motion-duration-long3: 550ms;
  --md-motion-duration-long4: 600ms;

  --md-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --md-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized-accelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-motion-easing-emphasized-decelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* ==================== Typography Scale - 字体大小 ==================== */
  --md-typescale-display-large-font-size: 57px;
  --md-typescale-display-large-line-height: 64px;
  --md-typescale-display-large-font-weight: 400;

  --md-typescale-display-medium-font-size: 45px;
  --md-typescale-display-medium-line-height: 52px;
  --md-typescale-display-medium-font-weight: 400;

  --md-typescale-display-small-font-size: 36px;
  --md-typescale-display-small-line-height: 44px;
  --md-typescale-display-small-font-weight: 400;

  --md-typescale-headline-large-font-size: 32px;
  --md-typescale-headline-large-line-height: 40px;
  --md-typescale-headline-large-font-weight: 400;

  --md-typescale-headline-medium-font-size: 28px;
  --md-typescale-headline-medium-line-height: 36px;
  --md-typescale-headline-medium-font-weight: 400;

  --md-typescale-headline-small-font-size: 24px;
  --md-typescale-headline-small-line-height: 32px;
  --md-typescale-headline-small-font-weight: 400;

  --md-typescale-title-large-font-size: 22px;
  --md-typescale-title-large-line-height: 28px;
  --md-typescale-title-large-font-weight: 400;

  --md-typescale-title-medium-font-size: 16px;
  --md-typescale-title-medium-line-height: 24px;
  --md-typescale-title-medium-font-weight: 500;

  --md-typescale-title-small-font-size: 14px;
  --md-typescale-title-small-line-height: 20px;
  --md-typescale-title-small-font-weight: 500;

  --md-typescale-body-large-font-size: 16px;
  --md-typescale-body-large-line-height: 24px;
  --md-typescale-body-large-font-weight: 400;

  --md-typescale-body-medium-font-size: 14px;
  --md-typescale-body-medium-line-height: 20px;
  --md-typescale-body-medium-font-weight: 400;

  --md-typescale-body-small-font-size: 12px;
  --md-typescale-body-small-line-height: 16px;
  --md-typescale-body-small-font-weight: 400;

  --md-typescale-label-large-font-size: 14px;
  --md-typescale-label-large-line-height: 20px;
  --md-typescale-label-large-font-weight: 500;

  --md-typescale-label-medium-font-size: 12px;
  --md-typescale-label-medium-line-height: 16px;
  --md-typescale-label-medium-font-weight: 500;

  --md-typescale-label-small-font-size: 11px;
  --md-typescale-label-small-line-height: 16px;
  --md-typescale-label-small-font-weight: 500;

  /* ==================== State Layers - 状态层透明度 ==================== */
  --md-state-hover: 0.08;
  --md-state-focus: 0.12;
  --md-state-pressed: 0.12;
  --md-state-dragged: 0.16;
}

/* ==================== Dark Mode Colors - 深色模式 ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary Colors - 亮青色（深色模式） */
    --md-primary: #67e8f9;
    --md-primary-rgb: 103, 232, 249;
    --md-on-primary: #083344;
    --md-primary-container: #155e75;
    --md-on-primary-container: #cffafe;

    /* Secondary Colors */
    --md-secondary: #5eead4;
    --md-secondary-rgb: 94, 234, 212;
    --md-on-secondary: #134e4a;
    --md-secondary-container: #0f766e;
    --md-on-secondary-container: #ccfbf1;

    /* Tertiary Colors */
    --md-tertiary: #93c5fd;
    --md-tertiary-rgb: 147, 197, 253;
    --md-on-tertiary: #1e3a8a;
    --md-tertiary-container: #1e40af;
    --md-on-tertiary-container: #dbeafe;

    /* Error Colors */
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;

    /* Surface Colors（深色模式） */
    --md-surface: #1a1c1e;
    --md-on-surface: #e2e2e6;
    --md-surface-variant: #43474e;
    --md-on-surface-variant: #c3c6cf;
    --md-surface-container-lowest: #0f1113;
    --md-surface-container-low: #1a1c1e;
    --md-surface-container: #1e2022;
    --md-surface-container-high: #282a2c;
    --md-surface-container-highest: #333537;

    /* Background Colors */
    --md-background: #1a1c1e;
    --md-on-background: #e2e2e6;
    
    --bg-primary: #1a1c1e;
    --bg-secondary: #1e2022;
    --bg-tertiary: #282a2c;
    --bg-card: #1e2022;

    /* Text Colors */
    --text-primary: #e2e2e6;
    --text-secondary: #c3c6cf;
    --text-tertiary: #8d9199;

    /* Border & Outline Colors */
    --md-outline: #8d9199;
    --md-outline-variant: #43474e;
    --border-color: #43474e;
    --border-hover: #5f6368;

    /* Inverse Colors */
    --md-inverse-surface: #e2e2e6;
    --md-inverse-on-surface: #2f3033;
    --md-inverse-primary: #0891b2;

    /* Shadow and Elevation - 深色模式下更深的阴影 */
    --md-shadow: #000000;
    --md-elevation-level0: none;
    --md-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 3px 1px rgba(0, 0, 0, 0.3);
    --md-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 6px 2px rgba(0, 0, 0, 0.3);
    --md-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 4px 8px 3px rgba(0, 0, 0, 0.3);
    --md-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), 0px 6px 10px 4px rgba(0, 0, 0, 0.3);
    --md-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.5), 0px 8px 12px 6px rgba(0, 0, 0, 0.3);
  }
}

/* ==================== 深色模式滚动条样式 ==================== */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #67e8f9 0%, #0891b2 100%);
    border: 2px solid var(--bg-tertiary);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  }
}