dramaling-app/apps/web/src/assets/styles/variables.scss

// Drama Ling Design System Variables

// ===== 色彩系統 =====

// 主要品牌色 - 青綠色
$primary-teal: #00E5CC;
$primary-teal-light: #33E8D1;
$primary-teal-dark: #00B3A0;

// 輔助色 - 紫色系
$secondary-purple: #8E44AD;
$secondary-purple-light: #A569BD;
$secondary-purple-dark: #6C3483;

// 強調色 - 活力紫
$accent-violet: #9B59B6;
$accent-violet-light: #BB8FCE;
$accent-violet-dark: #7D3C98;

// 功能性色彩
$error-red: #E74C3C;
$warning-yellow: #F39C12;
$warning-orange: #F39C12; // 別名
$success-green: #00E5CC;
$info-cyan: #3498DB;

// 暗色主題色調
$text-primary: #FFFFFF;
$text-primary-inverse: #2C3E50; // 反色文字
$text-secondary: #B8BCC8;
$text-tertiary: #7F8C8D;
$background-primary: #2C3E50;
$background-secondary: #34495E;
$background-dark: #1A252F;
$divider: #4A5568;
$card-background: #3A4A5C;

// 遊戲化色彩
$star-active: #F1C40F;
$star-inactive: #7F8C8D;
$bronze: #CD7F32;
$silver: #C0C0C0;
$gold: #FFD700;
$diamond: #B9F2FF;
$exp-bar: #00E5CC;
$level-background: #8E44AD;
$achievement-glow: #F39C12;

// ===== 字體系統 =====

// 字體家族
$font-family-primary: 'Inter', 'PingFang TC', -apple-system, sans-serif;
$font-family-secondary: 'Roboto', 'Microsoft JhengHei UI', sans-serif;
$font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

// 字體大小
$text-xs: 0.75rem;    // 12px
$text-sm: 0.875rem;   // 14px
$text-base: 1rem;     // 16px
$text-lg: 1.125rem;   // 18px
$text-xl: 1.25rem;    // 20px
$text-2xl: 1.5rem;    // 24px
$text-3xl: 1.875rem;  // 30px
$text-4xl: 2.25rem;   // 36px

// 遊戲化特殊字體
$text-game-score: 1.5rem;    // 24px
$text-game-level: 0.875rem;  // 14px
$text-game-title: 1.25rem;   // 20px

// ===== 間距系統 =====

$space-1: 0.25rem;   // 4px
$space-2: 0.5rem;    // 8px
$space-3: 0.75rem;   // 12px
$space-4: 1rem;      // 16px
$space-5: 1.25rem;   // 20px
$space-6: 1.5rem;    // 24px
$space-8: 2rem;      // 32px
$space-10: 2.5rem;   // 40px
$space-12: 3rem;     // 48px
$space-16: 4rem;     // 64px
$space-20: 5rem;     // 80px

// ===== 圓角和陰影 =====

$radius-sm: 0.5rem;   // 8px
$radius-md: 0.75rem;  // 12px
$radius-lg: 1rem;     // 16px
$radius-xl: 1.5rem;   // 24px
$radius-2xl: 2rem;    // 32px
$radius-full: 50%;

// 陰影系統
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

// ===== 響應式斷點 =====

$breakpoint-xs: 0;
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

// ===== Z-index 層級 =====

$z-sidebar: 900;
$z-mobile-nav: 950;
$z-dropdown: 1000;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;
$z-toast: 1080;

// ===== 混合器 =====

@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: #{$breakpoint-sm - 1px}) { @content; }
  }
  @if $breakpoint == sm {
    @media (min-width: #{$breakpoint-sm}) and (max-width: #{$breakpoint-md - 1px}) { @content; }
  }
  @if $breakpoint == md {
    @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) { @content; }
  }
  @if $breakpoint == lg {
    @media (min-width: #{$breakpoint-lg}) and (max-width: #{$breakpoint-xl - 1px}) { @content; }
  }
  @if $breakpoint == xl {
    @media (min-width: #{$breakpoint-xl}) { @content; }
  }
}

@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@mixin card-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  @if $level == 2 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  @if $level == 3 {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

@mixin loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}