/**
 * ShiftMate Design Tokens
 * Generated by 小雞 (Jteam Designer Agent)
 * Version: 1.0.0 | Date: 2026-03-17
 *
 * 使用方式:
 *   在 CSS 中直接使用 var(--token-name)
 *   例: background-color: var(--color-primary-600);
 */

:root {

  /* ============================================
     色彩系統 Color System
     ============================================ */

  /* 主色 Primary (Blue) */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A5F;

  /* 輔色 Accent (Amber) */
  --color-accent-50:  #FFFBEB;
  --color-accent-100: #FEF3C7;
  --color-accent-200: #FDE68A;
  --color-accent-300: #FCD34D;
  --color-accent-400: #FBBF24;
  --color-accent-500: #F59E0B;
  --color-accent-600: #D97706;
  --color-accent-700: #B45309;

  /* 成功色 Success (Emerald) */
  --color-success-50:  #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-300: #6EE7B7;
  --color-success-500: #10B981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  /* 警告色 Warning (Orange) */
  --color-warning-50:  #FFF7ED;
  --color-warning-100: #FFEDD5;
  --color-warning-300: #FDBA74;
  --color-warning-500: #F97316;
  --color-warning-600: #EA580C;
  --color-warning-700: #C2410C;

  /* 錯誤色 Error (Red) */
  --color-error-50:  #FFF1F2;
  --color-error-100: #FEE2E2;
  --color-error-300: #FCA5A5;
  --color-error-500: #EF4444;
  --color-error-600: #DC2626;
  --color-error-700: #B91C1C;

  /* 資訊色 Info (Cyan) */
  --color-info-50:  #ECFEFF;
  --color-info-100: #CFFAFE;
  --color-info-300: #67E8F9;
  --color-info-500: #06B6D4;
  --color-info-600: #0891B2;

  /* 中性色 Neutral (Slate) */
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #020617;
  --color-white:       #FFFFFF;

  /* 多門市色碼 Store Colors */
  --color-store-1:       #3B82F6; /* 幸福店 (藍) */
  --color-store-1-bg:    #EFF6FF;
  --color-store-2:       #8B5CF6; /* 信義店 (紫) */
  --color-store-2-bg:    #F5F3FF;
  --color-store-3:       #EC4899; /* 中山店 (粉) */
  --color-store-3-bg:    #FDF2F8;
  --color-store-4:       #14B8A6; /* 大安店 (青) */
  --color-store-4-bg:    #F0FDFA;
  --color-store-5:       #F97316; /* 南港店 (橘) */
  --color-store-5-bg:    #FFF7ED;
  --color-store-6:       #84CC16; /* 士林店 (萊姆) */
  --color-store-6-bg:    #F7FEE7;

  /* 班次類型色碼 Shift Type Colors */
  --color-shift-morning:    #3B82F6; /* 早班 (藍) */
  --color-shift-morning-bg: #EFF6FF;
  --color-shift-afternoon:    #10B981; /* 午班 (綠) */
  --color-shift-afternoon-bg: #ECFDF5;
  --color-shift-evening:    #F97316; /* 晚班 (橘) */
  --color-shift-evening-bg: #FFF7ED;
  --color-shift-full:    #8B5CF6; /* 全天班 (紫) */
  --color-shift-full-bg: #F5F3FF;
  --color-shift-custom:    #64748B; /* 自訂 (灰) */
  --color-shift-custom-bg: #F8FAFC;

  /* 語意色別名 Semantic Aliases */
  --color-bg-page:      var(--color-neutral-50);
  --color-bg-card:      var(--color-white);
  --color-bg-sidebar:   var(--color-neutral-800);
  --color-bg-header:    var(--color-white);
  --color-bg-table-row: var(--color-white);
  --color-bg-table-alt: var(--color-neutral-50);

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary:  var(--color-neutral-500);
  --color-text-disabled:  var(--color-neutral-400);
  --color-text-inverse:   var(--color-white);
  --color-text-link:      var(--color-primary-600);
  --color-text-link-hover: var(--color-primary-700);

  --color-border-default: var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-focus:   var(--color-primary-500);
  --color-border-error:   var(--color-error-500);
  --color-border-success: var(--color-success-500);

  /* ============================================
     字型系統 Typography System
     ============================================ */

  --font-sans: "Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code",
               "Courier New", Courier, monospace;

  /* 字級 Font Sizes */
  --font-size-display: 2rem;        /* 32px */
  --font-size-h1:      1.5rem;      /* 24px */
  --font-size-h2:      1.25rem;     /* 20px */
  --font-size-h3:      1rem;        /* 16px */
  --font-size-body-lg: 1rem;        /* 16px */
  --font-size-body:    0.875rem;    /* 14px */
  --font-size-body-sm: 0.75rem;     /* 12px */
  --font-size-label:   0.75rem;     /* 12px */
  --font-size-caption: 0.6875rem;   /* 11px */
  --font-size-code:    0.8125rem;   /* 13px */

  /* 字重 Font Weights */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* 行高 Line Heights */
  --line-height-tight:  1.25;  /* 標題 */
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;   /* 內文 */
  --line-height-relaxed: 1.625;
  --line-height-loose:  2;

  /* ============================================
     間距系統 Spacing System (4px base)
     ============================================ */

  --space-0:  0;
  --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 */

  /* ============================================
     圓角系統 Border Radius
     ============================================ */

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

  /* ============================================
     陰影系統 Shadow System
     ============================================ */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl:  0 25px 50px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-drag: 0 20px 60px rgba(37, 99, 235, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-focus-primary: 0 0 0 3px rgba(37, 99, 235, 0.25);
  --shadow-focus-error:   0 0 0 3px rgba(239, 68, 68, 0.25);

  /* ============================================
     動畫 Animation Tokens
     ============================================ */

  /* 時間函數 */
  --ease-linear:   linear;
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 持續時間 */
  --duration-instant: 0ms;
  --duration-fast:    100ms;
  --duration-normal:  150ms;
  --duration-smooth:  200ms;
  --duration-enter:   250ms;
  --duration-leave:   200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  /* ============================================
     Z-index 層疊系統
     ============================================ */

  --z-base:        0;
  --z-raised:      10;
  --z-sticky:      20;
  --z-sidebar:     40;
  --z-header:      50;
  --z-dropdown:    100;
  --z-overlay:     150;
  --z-modal-bg:    200;
  --z-modal:       210;
  --z-toast:       300;
  --z-tooltip:     400;
  --z-max:         9999;

  /* ============================================
     佈局 Layout Tokens
     ============================================ */

  --layout-sidebar-width:        240px;
  --layout-sidebar-collapsed:    64px;
  --layout-header-height:        64px;
  --layout-bottom-nav-height:    56px;
  --layout-page-padding-desktop: 32px;
  --layout-page-padding-mobile:  16px;
  --layout-content-max-width:    1440px;
  --layout-card-max-width:       480px;

  /* 斷點 (CSS 變數無法在 media query 使用，供 JS 參考) */
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1440px;

  /* ============================================
     元件特定 Token Component Tokens
     ============================================ */

  /* 按鈕 */
  --btn-sm-height:   32px;
  --btn-md-height:   40px;
  --btn-lg-height:   48px;
  --btn-sm-padding:  6px 12px;
  --btn-md-padding:  10px 20px;
  --btn-lg-padding:  14px 28px;
  --btn-border-radius: var(--radius-md);

  /* 輸入框 */
  --input-height:        40px;
  --input-padding:       10px 14px;
  --input-border-radius: var(--radius-md);
  --input-border-width:  1.5px;

  /* 卡片 */
  --card-padding-sm:     var(--space-4);
  --card-padding-md:     var(--space-6);
  --card-padding-lg:     var(--space-8);
  --card-border-radius:  var(--radius-lg);
  --card-border-color:   var(--color-neutral-200);
  --card-shadow:         var(--shadow-sm);

  /* 班次區塊 */
  --shift-block-min-height:   44px;
  --shift-block-border-radius: var(--radius-lg);
  --shift-block-border-width:  2px;
  --shift-block-left-bar:      4px;
  --shift-block-padding:       8px 10px;

  /* Modal */
  --modal-sm-width:    400px;
  --modal-md-width:    560px;
  --modal-lg-width:    720px;
  --modal-xl-width:    960px;
  --modal-border-radius: var(--radius-xl);
  --modal-padding:       var(--space-8);

  /* 表格 */
  --table-row-height-desktop: 56px;
  --table-row-height-mobile:  48px;
  --table-header-bg:          var(--color-neutral-100);
  --table-cell-padding:       12px 16px;

  /* Toast */
  --toast-width-desktop: 360px;
  --toast-border-radius: var(--radius-lg);

  /* 骨架載入 */
  --skeleton-base-color:    var(--color-neutral-200);
  --skeleton-shine-color:   var(--color-neutral-100);
  --skeleton-border-radius: var(--radius-sm);
}

/* ============================================
   深色模式預留 (Dark Mode - Phase 2)
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Phase 2 實作深色模式時在此覆蓋變數 */
  /* :root {
    --color-bg-page:    #0F172A;
    --color-bg-card:    #1E293B;
    --color-text-primary: #F1F5F9;
    ...等
  } */
}

/* ============================================
   骨架載入動畫 Skeleton Animation
   ============================================ */
@keyframes skeleton-loading {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base-color) 25%,
    var(--skeleton-shine-color) 50%,
    var(--skeleton-base-color) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s linear infinite;
  border-radius: var(--skeleton-border-radius);
}

/* ============================================
   衝突警示動畫 Conflict Flash Animation
   ============================================ */
@keyframes conflict-flash {
  0%, 100% {
    border-color: var(--color-error-500);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    border-color: var(--color-error-300);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
}

.shift-block--conflict {
  animation: conflict-flash 1s ease-in-out infinite;
}

/* ============================================
   Modal 動畫 Modal Animations
   ============================================ */
@keyframes modal-in {
  0%   { transform: scale(0.95) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0);       opacity: 1; }
}

@keyframes modal-out {
  0%   { transform: scale(1) translateY(0);       opacity: 1; }
  100% { transform: scale(0.95) translateY(10px); opacity: 0; }
}

@keyframes drawer-in {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* ============================================
   Toast 動畫 Toast Animations
   ============================================ */
@keyframes toast-in {
  0%   { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

@keyframes toast-out {
  0%   { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* ============================================
   同步旋轉動畫 Sync Spin
   ============================================ */
@keyframes sync-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.icon-syncing {
  animation: sync-spin 1.5s linear infinite;
}

/* ============================================
   縮減動畫偏好 Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton {
    animation: none;
    background: var(--skeleton-base-color);
  }
}