/**
 * style.css
 * CSS 自訂屬性（Design Tokens）
 * 精確映射自 Figma Variables Collection: theme/copied-style
 * 來源檔案：破曉招聘站 (b7cOp653VBOKgIp6PbKdVO)
 * 逆向參考：www.marching.mo
 *
 * 讀取日期：2026-05-17
 * ─────────────────────────────────────────────────────────────
 * 使用方式：
 *   純 HTML  → <link rel="stylesheet" href="style.css">
 *   Tailwind → @import './style.css'; 放在 globals.css 最頂部
 *   Vue/React → import './style.css' 在 main entry
 */

/* ============================================================
   FIGMA TOKEN MAPPING
   Collection: theme/copied-style
   ============================================================ */
:root {

  /* ── 色彩：背景系統 ─────────────────────────────────────── */
  --color-bg-primary:     #080808;   /* color/bg/primary   — 主背景，近純黑   */
  --color-bg-secondary:   #111111;   /* color/bg/secondary — Navbar 底色      */
  --color-bg-surface:     #1C1C1C;   /* color/bg/surface   — 卡片提升層       */
  --color-bg-overlay:     rgba(0, 0, 0, 0.65); /* 圖片遮幕                    */

  /* ── 色彩：品牌強調色 ──────────────────────────────────── */
  --color-accent-primary: #C41230;   /* color/accent/primary — 品牌主紅       */
  --color-accent-deep:    #8B0F22;   /* color/accent/deep    — 深紅漸層終點   */
  --color-accent-dot:     #C41230;   /* 裝飾性小紅圓點                        */

  /* ── 色彩：文字 ────────────────────────────────────────── */
  --color-text-primary:   #FFFFFF;   /* color/text/primary   — 主文字         */
  --color-text-secondary: #AAAAAA;   /* color/text/secondary — 次要說明       */
  --color-text-muted:     #666666;   /* color/text/muted     — Footer 極淡    */
  --color-text-accent:    #C41230;   /* color/text/accent    — 連結 / CTA     */

  /* ── 色彩：邊框 ────────────────────────────────────────── */
  --color-border:         #2A2A2A;   /* color/border/default                  */
  --color-border-divider: #3A0010;   /* color/border/divider — active tab 線  */

  /* ── Relume 原生 Token（已覆寫）────────────────────────── */
  --relume-bg:            #080808;   /* Color Scheme 1/Background (overridden) */
  --relume-text:          #FFFFFF;   /* Color Scheme 1/Text       (overridden) */
  --relume-radius-large:  0px;       /* Radius/Large              (overridden) */

  /* ── 圓角 ──────────────────────────────────────────────── */
  --radius-none:          0px;       /* radius/none — 主視覺語言：全銳角      */
  --radius-sm:            2px;       /* radius/sm                             */
  --radius-default:       0px;       /* 統一預設值                            */

  /* ── 間距 ──────────────────────────────────────────────── */
  --spacing-section-y:    80px;      /* spacing/section-y — 區塊上下 padding  */
  --spacing-section-y-lg: 120px;     /* 大屏加大版                            */
  --spacing-padding-x:    20px;      /* Page Padding/padding-global           */
  --spacing-container:    1280px;    /* Container/container-large             */

  /* ── 字體 ──────────────────────────────────────────────── */
  --font-display:   "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:      "Noto Sans TC", "Noto Sans", "Helvetica Neue", sans-serif;
  --font-mono:      "Source Code Pro", monospace;

  /* ── 字體大小（Figma Text Sizes collection）───────────── */
  --text-xs:        12px;    /* Text Sizes/Text Regular */
  --text-sm:        13px;
  --text-base:      16px;    /* Text Sizes/Text Medium  */
  --text-lg:        18px;
  --text-xl:        24px;
  --text-2xl:       32px;
  --text-3xl:       40px;    /* Text Sizes/Heading 2    */
  --text-4xl:       56px;    /* Hero display            */
  --text-5xl:       72px;    /* Section title           */
  --text-display:   96px;

  /* ── 行高 ──────────────────────────────────────────────── */
  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.5;

  /* ── 字距 ──────────────────────────────────────────────── */
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-brand:   0.08em;   /* Section title 字距           */
  --tracking-nav:     0.15em;   /* Navbar 字距                  */
  --tracking-zh:      0.5em;    /* 中文戲劇性字距（呈 現 價 值）*/

  /* ── 動畫 Timing ────────────────────────────────────────  */
  --ease-brand:    cubic-bezier(0.77, 0, 0.175, 1);    /* 主動畫節奏（膠卷感）*/
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 圖片縮放          */
  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-slow:   550ms;
  --duration-slower: 600ms;

  /* ── 邊框粗細 ───────────────────────────────────────────  */
  --stroke-default:   1px;   /* Stroke/Divider Width */
  --stroke-indicator: 2px;   /* Active tab 底線      */
}

/* ============================================================
   BASE RESET — 對應 Marching.mo 暗黑底色系統
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-base);
  color-scheme: dark;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 全局連結 ─────────────────────────────────────────────── */
a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

a:hover {
  color: var(--color-text-accent);
}

/* ── 英文大標 ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
}

/* ── 分隔線 ───────────────────────────────────────────────── */
hr {
  border: none;
  border-top: var(--stroke-default) solid var(--color-border);
}

/* ── 圖片 ─────────────────────────────────────────────────── */
img, video {
  display: block;
  max-width: 100%;
}

/* ============================================================
   UTILITY CLASSES — 直接對應 Figma Token 名稱
   ============================================================ */

/* 背景 */
.bg-primary   { background-color: var(--color-bg-primary);   }
.bg-secondary { background-color: var(--color-bg-secondary);  }
.bg-surface   { background-color: var(--color-bg-surface);    }
.bg-accent    { background-color: var(--color-accent-primary);}

/* 文字 */
.text-primary   { color: var(--color-text-primary);   }
.text-secondary { color: var(--color-text-secondary);  }
.text-muted     { color: var(--color-text-muted);      }
.text-accent    { color: var(--color-text-accent);     }

/* 英文 Section 大標樣式 */
.heading-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 900;
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
}

/* 中文戲劇性大字 */
.heading-zh-drama {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--tracking-zh);
}

/* 頁碼小標（01 / 02 / 03）*/
.section-number {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--color-accent-primary);
}

/* 裝飾紅點 */
.accent-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent-dot);
}

/* 版面容器 */
.container-brand {
  width: 100%;
  max-width: var(--spacing-container);
  margin-inline: auto;
  padding-inline: var(--spacing-padding-x);
}

/* Section 間距 */
.section-spacing {
  padding-block: var(--spacing-section-y);
}

.section-spacing-lg {
  padding-block: var(--spacing-section-y-lg);
}

/* ══════════════════════════════════════════════════════
   MODAL STYLES
   ══════════════════════════════════════════════════════ */
.modal-overlay {
  animation: fadeIn 0.25s ease;
}
.modal-card {
  animation: slideUp 0.3s var(--ease-brand);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.input-dark {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
}
.input-dark:focus {
  border-color: var(--color-accent-primary);
}
.upload-zone.active {
  border-color: var(--color-accent-primary) !important;
  background: rgba(196, 18, 48, 0.05);
}
.job-card {
  transition: opacity 0.3s cubic-bezier(0.77,0,0.175,1), transform 0.3s cubic-bezier(0.77,0,0.175,1);
}