/**
 * 塔羅占卜 LIFF - 專業視覺設計系統
 * 黑金配色方案 - 神秘、奢華、專業
 */

/* ============================================
   設計代幣 (Design Tokens)
   ============================================ */

:root {
    /* ========== 配色系統 ========== */

    /* 主色調 - 黑色系 (Primary - Black) */
    --color-black-pure: #000000;
    --color-black-rich: #0a0a0a;
    --color-black-soft: #1a1a1a;
    --color-black-light: #2d2d2d;
    --color-black-lighter: #404040;

    /* 輔助色 - 沙金色系 (Accent - Sand Gold) */
    --color-gold-dark: #A88B4F;
    --color-gold-base: #C9A962;
    --color-gold-light: #D4AF65;
    --color-gold-lighter: #E5D5A8;
    --color-gold-pale: #F2E8D0;

    /* 語義色 (Semantic Colors) */
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-error: #F44336;
    --color-info: #2196F3;

    /* 中性色 - 用於文字 (Neutrals) */
    --color-white: #FFFFFF;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #EEEEEE;
    --color-gray-300: #E0E0E0;
    --color-gray-400: #BDBDBD;
    --color-gray-500: #9E9E9E;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* ========== 漸變系統 ========== */

    /* 主要漸變 - 黑金組合 */
    --gradient-black-gold: linear-gradient(135deg,
        var(--color-black-pure) 0%,
        var(--color-black-soft) 50%,
        var(--color-black-light) 100%);

    --gradient-gold-shine: linear-gradient(135deg,
        var(--color-gold-dark) 0%,
        var(--color-gold-light) 50%,
        var(--color-gold-dark) 100%);

    --gradient-gold-vertical: linear-gradient(180deg,
        var(--color-gold-lighter) 0%,
        var(--color-gold-base) 100%);

    /* 卡片背景漸變 */
    --gradient-card-bg: linear-gradient(135deg,
        var(--color-black-rich) 0%,
        var(--color-black-soft) 50%,
        var(--color-black-rich) 100%);

    /* 容器背景漸變 */
    --gradient-container-bg: radial-gradient(ellipse at top,
        var(--color-black-soft) 0%,
        var(--color-black-pure) 100%);

    /* ========== 陰影系統 ========== */

    /* 基礎陰影 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.8);

    /* 金色發光陰影 */
    --shadow-gold-sm: 0 2px 8px rgba(201, 169, 98, 0.3);
    --shadow-gold-md: 0 4px 16px rgba(201, 169, 98, 0.4);
    --shadow-gold-lg: 0 8px 24px rgba(201, 169, 98, 0.5);
    --shadow-gold-xl: 0 12px 32px rgba(201, 169, 98, 0.6);

    /* 內陰影 */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-inset-gold: inset 0 1px 3px rgba(201, 169, 98, 0.2);

    /* ========== 發光效果 ========== */

    --glow-gold-soft: 0 0 10px rgba(201, 169, 98, 0.4);
    --glow-gold-medium: 0 0 20px rgba(201, 169, 98, 0.6);
    --glow-gold-strong: 0 0 30px rgba(212, 175, 101, 0.8);
    --glow-gold-intense: 0 0 40px rgba(212, 175, 101, 1);

    /* ========== 字體系統 ========== */

    /* 字體家族 */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                    'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji';
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
                 'Courier New', monospace;

    /* 字體大小 - Type Scale (1.250 - Major Third) */
    --text-xs: 0.64rem;      /* 10.24px */
    --text-sm: 0.8rem;       /* 12.8px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.25rem;      /* 20px */
    --text-xl: 1.563rem;     /* 25px */
    --text-2xl: 1.953rem;    /* 31.25px */
    --text-3xl: 2.441rem;    /* 39px */
    --text-4xl: 3.052rem;    /* 48.83px */
    --text-5xl: 3.815rem;    /* 61px */

    /* 字重 */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;

    /* 行高 */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* 字間距 */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ========== 間距系統 ========== */

    /* 基於 8px grid system */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* ========== 圓角系統 ========== */

    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ========== 邊框系統 ========== */

    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;

    /* ========== Z-index 層級 ========== */

    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-popover: 1400;
    --z-tooltip: 1500;

    /* ========== 動畫系統 ========== */

    /* 持續時間 */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    /* 緩動函數 */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);

    /* ========== 斷點系統 ========== */

    --breakpoint-xs: 320px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ========== 容器最大寬度 ========== */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
}

/* ============================================
   全局重置與基礎樣式
   ============================================ */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-white);
    background: var(--gradient-container-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================
   字體樣式類別
   ============================================ */

.text-heading-1 {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.text-heading-2 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.text-heading-3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

.text-heading-4 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

.text-body-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.text-body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.text-body-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-caption {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
}

/* 金色文字 */
.text-gold {
    color: var(--color-gold-base);
    text-shadow: var(--glow-gold-soft);
}

.text-gold-light {
    color: var(--color-gold-lighter);
}

.text-gold-dark {
    color: var(--color-gold-dark);
}

/* ============================================
   選取文字顏色
   ============================================ */

::selection {
    background: var(--color-gold-base);
    color: var(--color-black-pure);
}

::-moz-selection {
    background: var(--color-gold-base);
    color: var(--color-black-pure);
}

/* ============================================
   滾動條樣式
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-black-soft);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-gold-vertical);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

/* ============================================
   焦點狀態
   ============================================ */

*:focus {
    outline: 2px solid var(--color-gold-base);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   實用工具類別
   ============================================ */

/* 陰影 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-gold { box-shadow: var(--shadow-gold-md); }
.shadow-gold-lg { box-shadow: var(--shadow-gold-lg); }

/* 發光 */
.glow-gold { box-shadow: var(--glow-gold-medium); }
.glow-gold-strong { box-shadow: var(--glow-gold-strong); }

/* 過渡 */
.transition-fast { transition: all var(--duration-fast) var(--ease-out); }
.transition-normal { transition: all var(--duration-normal) var(--ease-in-out); }
.transition-slow { transition: all var(--duration-slow) var(--ease-smooth); }

/* 隱藏 */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

/* 響應式隱藏 */
@media (max-width: 640px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 641px) {
    .hidden-desktop { display: none !important; }
}