/* 使用 Tailwind CSS v4 的 Theme variable namespaces 功能，可以讓 Tailwind 自動產生對應的 utility class */
/* @see: https://tailwindcss.com/docs/theme#theme-variable-namespaces */
@theme {
  --color-primary-200: #69ffff;
  --color-primary-300: #3c63b9;
  --color-primary-400: #1d3f97;
  --color-primary-500: #3498db;
  --color-primary-600: #063d90;
  --color-primary-700: #0c1429;
  --color-secondary-400: #2cb986;
  --color-secondary-500: #2ecc71;
  --color-danger-400: #ff9fde;
  --color-danger-500: #e74c3c;
  --color-danger-600: #754b71;
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-gray: #bdc3c7;
  --color-background: #d7e9ff;
  --color-border: #fff;
  --color-text: #2c3e50;
  --color-white: #ffffff;
  --color-navigation: #3b5b8c;
  --color-input: #abc2e4;
}

/* Runtime CSS Variables */
:root {
  /*
   * 桌機版元件樹的站台識別色，放站台 CSS。新增桌機站台時它的 theme.css 要補齊同一組變數，
   * 由 desktopPalette.spec.ts 比對。
   */
  /* 主色漸層：選中的頁籤、導覽軌的 active 項、主要按鈕 */
  --color-accent-from: #327ee5;
  --color-accent-to: #1e2b76;
  /* 凸起面板：卡片與導覽軌項目的底 */
  --color-panel-from: #212d47;
  --color-panel-to: #263457;
  /* 凹陷面板：導覽軌與排行榜的外框底 */
  --color-panel-sunken-from: #151e34;
  --color-panel-sunken-to: #141a2a;
  /* 次要文字與外框 */
  --color-border-muted: #84a0d2;
  /* 分隔線 */
  --color-divider: #5a6b8e;
  /* 三個各自不同的亮藍強調色 */
  --color-highlight: #00d2ff;
  --color-highlight-alt: #39c0ff;
  --color-tab-active: #3bc9e3;

  /* Card */
  --border-card: #fff;
  --border-card-active: #fff;

  /* List Card */
  --list-card-border: var(--border-card);
  --list-card-border-active: var(--border-card-active);

  --list-card-bg: var(--gradient-background-800);
  --list-card-bg-active: var(--gradient-background-900);

  --list-card-text: var(--color-navigation);
  --list-card-text-active: var(--color-white);

  --list-card-gradient-border: var(--gradient-border-500);
  --list-card-gradient-border-active: var(--gradient-border-600);
}

@layer theme {
  .dark-theme {
    --color-primary-200: #69ffff;
    --color-primary-300: #a0abd3;
    --color-primary-400: #84c5e9;
    --color-primary-500: #2980b9;
    --color-primary-600: #1f3c48;
    --color-primary-700: #0c1429;
    --color-secondary-400: #2cb986;
    --color-secondary-500: #27ae60;
    --color-danger-400: #ff9fde;
    --color-danger-500: #c0392b;
    --color-danger-600: #754b71;
    --color-warning: #f39c12;
    --color-success: #219653;
    --color-input: #181927;
    --color-navigation: #586373;
    --color-white: #ffffff;
    --color-text: #ecf0f1;
    --color-border: #24376a;
    --color-background: #0b101c;
    --color-gray: #95a5a6;

    /* Card */
    --border-card: transparent;
    --border-card-active: transparent;

    /* List Card */
    --list-card-border: var(--border-card);
    --list-card-border-active: var(--border-card-active);

    --list-card-bg: var(--gradient-background-800);
    --list-card-bg-active: var(--gradient-background-700);

    --list-card-text: var(--color-navigation);
    --list-card-text-active: var(--color-white);

    --list-card-gradient-border: var(--gradient-border-500);
    --list-card-gradient-border-active: var(--gradient-border-600);
  }
}