@import "tailwindcss";
@source "../../templates/**/*.html";
@source "../js/**/*.js";
@plugin "daisyui" {
  themes: light, dim;
}

/* ========== wireframe 主題色覆寫 ========== */
/* 解決淺色模式下白字在淺灰背景上不可讀的問題 */
/* 深灰偏冷色系：保留極簡感但帶 Fluent 冷色氣質 */
:root:has(input.theme-controller[value=light]:checked),
[data-theme="light"] {
  --color-primary: oklch(32% 0.02 250);           /* 深冷灰 - 白字可讀 */
  --color-secondary: oklch(38% 0.02 250);         /* 中深冷灰 */
  --color-accent: oklch(34% 0.04 230);            /* 深灰偏藍 */

  /* 對應的 content 色（文字色） */
  --color-primary-content: oklch(98% 0 0);        /* 近白 */
  --color-secondary-content: oklch(98% 0 0);
  --color-accent-content: oklch(98% 0 0);

  /* neutral 覆寫（與 primary 一致，保持設計系統統一） */
  --color-neutral: oklch(32% 0.02 250);           /* 與 primary 一致的深冷灰 */
  --color-neutral-content: oklch(98% 0 0);        /* 近白 */

  /* 底色回暖 — 0.2.3 的暖奶白 #f8f7f4 風格 */
  --color-base-100: oklch(98.5% 0.005 85);
}

/* 保留現有 CSS 變數系統 */
@import "./theme.css";

/* ========== Fluent Design Tokens ========== */
:root {
  /* 圓角 - 採用 Fluent 官方規範 */
  --fluent-radius-none: 0px;
  --fluent-radius-sm: 2px;    /* Small: 徽章、<32px 元素 */
  --fluent-radius-md: 4px;    /* Medium: 按鈕、下拉選單（預設） */
  --fluent-radius-lg: 8px;    /* Large: 大型按鈕 */
  --fluent-radius-xl: 12px;   /* X-Large: 卡片、工作表、彈出窗口 */
  --fluent-radius-circle: 50%;

  /* 陰影 - Fluent 雙層系統（Light Theme） */
  --fluent-shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.14);
  --fluent-shadow-4: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
  --fluent-shadow-8: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14);
  --fluent-shadow-16: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14);
  --fluent-shadow-28: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14);
  --fluent-shadow-64: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14);

  /* 動畫時長 - Fluent 官方規範 */
  --fluent-duration-ultra-fast: 50ms;
  --fluent-duration-faster: 83ms;
  --fluent-duration-fast: 167ms;
  --fluent-duration-normal: 250ms;
  --fluent-duration-slow: 300ms;
  --fluent-duration-slower: 400ms;
  /* Charter v2 §5 三角色補齊（CD-7 命名避讓既有 slow:300ms） */
  --fluent-duration-medium: 333ms;       /* charter standard 中段過場 */
  --fluent-duration-emphasis: 500ms;     /* charter 強調級長過場 */

  /* 動畫緩動函數 - Fluent 官方規範 */
  --fluent-ease-decel: cubic-bezier(0, 0, 0, 1);        /* 進入動畫 */
  --fluent-ease-accel: cubic-bezier(1, 0, 1, 1);        /* 離開動畫 */
  --fluent-ease-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --fluent-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Acrylic 毛玻璃 - 採用視覺憲章較強效果 */
  --fluent-blur: 30px;
  --fluent-saturate: 140%;
  --fluent-acrylic-bg-light: rgba(255, 255, 255, 0.7);
  --fluent-acrylic-bg-dark: rgba(28, 28, 30, 0.7);

  /* Charter v2 §2 三階玻璃補齊 */
  --fluent-blur-light: 12px;     /* floating-control 近景（貼合元件薄膜）*/
  --fluent-blur-heavy: 60px;     /* canvas Mica 主畫布 */

  /* Smoke 遮罩 */
  --fluent-smoke: rgba(0, 0, 0, 0.4);

  /* Charter v2 §3 角色色白名單 — Overlay 6 階 */
  --overlay-gallery:  rgba(0, 0, 0, 0.85);  /* sample gallery 暗幕 */
  --overlay-badge:    rgba(0, 0, 0, 0.7);   /* picker source badge 背景 */
  --overlay-modal:    rgba(0, 0, 0, 0.6);   /* lightbox backdrop */
  --overlay-gradient: rgba(0, 0, 0, 0.55);  /* card hover 漸層 bottom */
  --overlay-control:  rgba(0, 0, 0, 0.45);  /* 浮在媒體上的控制按鈕 */
  --overlay-letterbox: rgba(0, 0, 0, 0.2);  /* 媒體封面 letterbox 黑邊背景 */

  /* Constellation Lab star tokens - theme-aware, light defaults, dim overrides below */
  --star-line-bright: oklch(0.48 0.14 75);
  --star-line-fade:   oklch(0.60 0.10 75);
  --star-glow:        oklch(0.55 0.16 72);
}

/* Dark Theme 陰影 - 更深的陰影 */
[data-theme="dim"] {
  --fluent-shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.24), 0px 1px 2px rgba(0, 0, 0, 0.28);
  --fluent-shadow-4: 0px 0px 2px rgba(0, 0, 0, 0.24), 0px 2px 4px rgba(0, 0, 0, 0.28);
  --fluent-shadow-8: 0px 0px 2px rgba(0, 0, 0, 0.24), 0px 4px 8px rgba(0, 0, 0, 0.28);
  --fluent-shadow-16: 0px 0px 2px rgba(0, 0, 0, 0.24), 0px 8px 16px rgba(0, 0, 0, 0.28);
  --fluent-shadow-28: 0px 0px 2px rgba(0, 0, 0, 0.24), 0px 14px 28px rgba(0, 0, 0, 0.28);
  --fluent-shadow-64: 0px 0px 2px rgba(0, 0, 0, 0.24), 0px 32px 64px rgba(0, 0, 0, 0.28);

  --fluent-smoke: rgba(0, 0, 0, 0.6);

  /* Constellation Lab star tokens - dim theme overrides (bright gold on dark) */
  --star-line-bright: oklch(0.86 0.11 80);
  --star-line-fade:   oklch(0.70 0.08 80);
  --star-glow:        oklch(0.88 0.14 78);
}

/* ========== Fluent Utility Classes ========== */

/* Acrylic 毛玻璃效果 */
.fluent-acrylic {
  background-color: var(--fluent-acrylic-bg-light);
  backdrop-filter: blur(var(--fluent-blur)) saturate(var(--fluent-saturate));
  -webkit-backdrop-filter: blur(var(--fluent-blur)) saturate(var(--fluent-saturate));
}

[data-theme="dim"] .fluent-acrylic {
  background-color: var(--fluent-acrylic-bg-dark);
}

/* Smoke 遮罩（用於 Modal 背景） */
.fluent-smoke {
  background-color: var(--fluent-smoke);
}

/* 圓角 Utility */
.fluent-rounded-sm { border-radius: var(--fluent-radius-sm); }
.fluent-rounded-md { border-radius: var(--fluent-radius-md); }
.fluent-rounded-lg { border-radius: var(--fluent-radius-lg); }
.fluent-rounded-xl { border-radius: var(--fluent-radius-xl); }

/* 陰影 Utility */
.fluent-shadow-2 { box-shadow: var(--fluent-shadow-2); }
.fluent-shadow-4 { box-shadow: var(--fluent-shadow-4); }
.fluent-shadow-8 { box-shadow: var(--fluent-shadow-8); }
.fluent-shadow-16 { box-shadow: var(--fluent-shadow-16); }

/* 卡片標準樣式（12px 圓角 + 頂部高光線 + shadow-4） */
.fluent-card {
  border-radius: var(--fluent-radius-xl);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent),
    var(--fluent-shadow-4);
  transition: transform var(--fluent-duration-fast) var(--fluent-ease-standard),
              box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
}

.fluent-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent),
    var(--fluent-shadow-8),
    0 0 20px var(--glow-primary);
}

/* 動畫 Transition Utility */
.fluent-transition {
  transition-duration: var(--fluent-duration-normal);
  transition-timing-function: var(--fluent-ease-standard);
}

.fluent-transition-fast {
  transition-duration: var(--fluent-duration-fast);
  transition-timing-function: var(--fluent-ease-decel);
}

/* Alpine.js 過渡動畫 */
.rotate-180 {
  transform: rotate(180deg);
}

/* Alpine.js x-transition 基礎樣式 */
[x-cloak] {
  display: none !important;
}

/* ========== Constellation Lab（56b-T1）========== */
/* slot--hidden / rail--hidden 用 opacity:0 + pointer-events:none */
/* 不用 display:none：GSAP 絕對定位計算需要 layout */
.slot--hidden {
  opacity: 0;
  pointer-events: none;
}

.rail--hidden {
  opacity: 0;
  pointer-events: none;
}

/* A3-3: Tag Alias 緊湊牆 layout */
.tag-alias-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.tag-alias-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}


