/* ══════════════════════════════════════════════════════════════
   雷蒙三十品牌設計系統 — 共用 CSS 變數
   來源：ui-gallery/css/variables.css
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'zihunbiantaoti';
  src: url('https://image.lifehacker.tw/brand/ZiHunBianTaoTi.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 主品牌色 ── */
  --primary: #21A4B1;
  --primary-light: #2ec4d4;
  --primary-dark: #007481;
  --primary-glow: rgba(33, 164, 177, 0.3);
  --primary-tint: #E6F7F9;

  /* ── 強調色 ── */
  --accent: #E77E47;
  --accent-light: #F6B85A;
  --accent-dark: #C85A2F;
  --accent-glow: rgba(231, 126, 71, 0.3);

  /* ── 背景色 ── */
  --bg-cream: #F7F5F0;
  --bg-soft: #FAF9F5;
  --bg-neutral: #F5F5F5;
  --bg-white: #ffffff;
  --bg-dark: #111111;

  /* ── 文字色 ── */
  --text-dark: #1a1a1a;
  --text-medium: #374151;
  --text-light: #6B7280;
  --text-muted: #888888;

  /* ── 狀態色 ── */
  --ok: #10B981;
  --ok-tint: #ECFDF5;
  --ng: #EF4444;
  --ng-tint: #FEF2F2;

  /* ── 邊線 ── */
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.08);

  /* ── 字體 ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Inter', "PingFang TC", "Noto Sans TC", "Heiti TC", sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --font-display: 'zihunbiantaoti', 'Noto Sans TC', sans-serif;

  /* ── 陰影 ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 12px 40px rgba(33, 164, 177, 0.18);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);

  /* ── 圓角 ── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* ── 動態 ── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }
::selection { background: rgba(33, 164, 177, 0.2); color: var(--text-dark); }