@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==================== CSS Properties for Animations ==================== */
/* Border Beam Animation Variable */
@property --start {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* Shimmer Position */
@property --shimmer-position {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

:root {
  --font-mono: 'JetBrains Mono', monospace;
  --font-dot-matrix: 'DSEG7-Classic', 'JetBrains Mono', monospace;
}

/* ==================== Nothing Dot Matrix Font ==================== */
/* DSEG7-Classic - Digital 7-Segment Display Font */
@font-face {
  font-family: 'DSEG7-Classic';
  src: url('/fonts/DSEG7Classic-Bold.woff2') format('woff2'),
       url('/fonts/DSEG7Classic-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DSEG7-Classic';
  src: url('/fonts/DSEG7Classic-Regular.woff2') format('woff2'),
       url('/fonts/DSEG7Classic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==================== Nothing.tech Light Theme Base ==================== */
@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply bg-nothing-gray-50 text-nothing-gray-900;
    font-feature-settings: 'liga' 1, 'calt' 1;
  }

  /* 點陣紋理背景 (Dot Matrix Pattern) */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px
    );
    background-size: 24px 24px;
  }

  /* 主內容層級 */
  #__next,
  main {
    position: relative;
    z-index: 1;
  }

  /* 滾動條 - 極簡風格 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-nothing-gray-300 rounded-full;
    transition: background 0.2s;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-nothing-gray-400;
  }

  /* 選取樣式 */
  ::selection {
    @apply bg-nothing-gray-900 text-nothing-white;
  }
}

/* ==================== Glass Components ==================== */
@layer components {
  /* 主要玻璃卡片 */
  .glass-card {
    @apply bg-white/70 backdrop-blur-glass border border-black/[0.08] rounded-glass shadow-glass;
    transition: all 0.2s ease;
  }

  .glass-card:hover {
    @apply bg-white/80 shadow-glass-hover border-black/[0.12];
  }

  /* 頂部導航 */
  .glass-header {
    @apply bg-white/85 backdrop-blur-[20px] border-b border-black/[0.06];
  }

  /* AI Copilot 面板 */
  .glass-copilot {
    @apply bg-nothing-gray-50/90 backdrop-blur-[20px] border border-status-thinking/20 rounded-glass;
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.1);
  }

  /* 狀態指示點 */
  .status-dot {
    @apply w-2 h-2 rounded-full;
  }

  .status-dot-healthy {
    @apply status-dot bg-status-healthy;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  }

  .status-dot-syncing {
    @apply status-dot bg-status-syncing animate-pulse;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  }

  .status-dot-warning {
    @apply status-dot bg-status-warning;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }

  .status-dot-critical {
    @apply status-dot bg-status-critical animate-breathe;
    box-shadow: 0 0 8px rgba(255, 51, 0, 0.5);
  }

  .status-dot-idle {
    @apply status-dot bg-status-idle;
  }

  .status-dot-thinking {
    @apply status-dot bg-status-thinking animate-breathe;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
  }

  /* 節點標籤 */
  .node-badge {
    @apply inline-flex items-center gap-1.5 px-2 py-0.5 rounded-button;
    @apply bg-nothing-gray-100 text-nothing-gray-700 font-mono text-xs;
  }

  /* 服務列表項 */
  .service-item {
    @apply flex items-center justify-between py-2 px-3 rounded-button;
    @apply hover:bg-nothing-gray-100/50 transition-colors;
  }

  /* 按鈕 - 主要 */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-button;
    @apply bg-nothing-gray-900 text-nothing-white font-medium text-sm;
    @apply hover:bg-nothing-gray-800 transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-nothing-gray-400 focus:ring-offset-2;
  }

  /* 按鈕 - 次要 */
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-button;
    @apply bg-nothing-gray-100 text-nothing-gray-800 font-medium text-sm;
    @apply hover:bg-nothing-gray-200 transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-nothing-gray-300 focus:ring-offset-2;
  }

  /* 按鈕 - 警告 */
  .btn-warning {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-button;
    @apply bg-status-critical/10 text-status-critical font-medium text-sm;
    @apply hover:bg-status-critical/20 transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-status-critical/30 focus:ring-offset-2;
  }

  /* AI 思考指示器 */
  .ai-indicator {
    @apply animate-breathe;
  }

  /* 掃描線動畫 */
  .scan-line {
    @apply absolute inset-0 overflow-hidden;
  }

  .scan-line::after {
    content: '';
    @apply absolute inset-y-0 w-1/3;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(139, 92, 246, 0.1),
      transparent
    );
    animation: scan 2s linear infinite;
  }
}

/* ==================== Utilities ==================== */
@layer utilities {
  /* Nothing.tech 高對比墨水色 (禁止 muted-foreground) */
  .text-ink {
    color: #111111;
  }

  .text-ink-secondary {
    color: #525252;
  }

  /* Dot Matrix Display Numbers (靈魂注入) */
  .font-dot-matrix {
    font-family: var(--font-dot-matrix);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  /* 巨型數字顯示 (2x size) */
  .dot-matrix-display {
    font-family: var(--font-dot-matrix);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    color: #111111;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
  }

  .dot-matrix-display-sm {
    font-family: var(--font-dot-matrix);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111111;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
  }

  /* 文字漸層 */
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, #111111 0%, #525252 100%);
  }

  /* 網格背景 (替代方案) */
  .bg-grid {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  /* 隱藏滾動條但保留功能 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}