/* ==========================================================================
   CBON Design Tokens
   全站唯一設計權杖來源。所有頁面只引用這裡的變數，不再 hardcode 顏色/字體/間距。
   ========================================================================== */

:root {
    /* --- 品牌主色（靛紫系）--- */
    --cbon-primary: #4f46e5;
    --cbon-primary-600: #4338ca;
    --cbon-primary-700: #3730a3;
    --cbon-primary-50: #eef2ff;
    --cbon-primary-100: #e0e7ff;

    /* --- 品牌副色（暖橘系，用於強調與折扣）--- */
    --cbon-accent: #ff6b35;
    --cbon-accent-600: #ea580c;
    --cbon-accent-50: #fff7ed;
    --cbon-accent-100: #ffedd5;

    /* --- 中性色 --- */
    --cbon-bg: #ffffff;
    --cbon-bg-soft: #f8f9ff;
    --cbon-bg-warm: #fff8f3;
    --cbon-surface: #ffffff;
    --cbon-surface-strong: #f1f5f9;
    --cbon-border: #e3e6f0;
    --cbon-border-soft: #f1f5f9;

    /* --- 文字 --- */
    --cbon-text: #0b1020;
    --cbon-text-muted: #5b6478;
    --cbon-text-soft: #94a3b8;
    --cbon-text-inverse: #ffffff;

    /* --- 狀態色 --- */
    --cbon-success: #10b981;
    --cbon-success-bg: #ecfdf5;
    --cbon-warning: #f59e0b;
    --cbon-warning-bg: #fffbeb;
    --cbon-error: #ef4444;
    --cbon-error-bg: #fef2f2;
    --cbon-info: #3b82f6;
    --cbon-info-bg: #eff6ff;

    /* --- 漸層 --- */
    --cbon-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
    --cbon-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.10) 0%, rgba(124, 58, 237, 0.10) 50%, rgba(236, 72, 153, 0.10) 100%);
    --cbon-gradient-accent: linear-gradient(135deg, #ff6b35 0%, #ff8a5b 60%, #ffa978 100%);
    --cbon-gradient-dark: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);

    /* --- 陰影 --- */
    --cbon-shadow-sm: 0 1px 2px rgba(15, 17, 38, 0.04);
    --cbon-shadow-md: 0 4px 14px rgba(15, 17, 38, 0.06);
    --cbon-shadow-lg: 0 12px 32px rgba(15, 17, 38, 0.08);
    --cbon-shadow-primary: 0 8px 24px rgba(79, 70, 229, 0.20);
    --cbon-shadow-accent: 0 6px 20px rgba(255, 107, 53, 0.28);

    /* --- 圓角 --- */
    --cbon-radius-sm: 8px;
    --cbon-radius-md: 12px;
    --cbon-radius-lg: 16px;
    --cbon-radius-xl: 20px;
    --cbon-radius-2xl: 24px;
    --cbon-radius-full: 9999px;

    /* --- 間距（4px 基準）--- */
    --cbon-space-1: 4px;
    --cbon-space-2: 8px;
    --cbon-space-3: 12px;
    --cbon-space-4: 16px;
    --cbon-space-5: 20px;
    --cbon-space-6: 24px;
    --cbon-space-8: 32px;
    --cbon-space-10: 40px;
    --cbon-space-12: 48px;

    /* --- 字體 --- */
    --cbon-font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang HK",
                       "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cbon-font-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;

    --cbon-text-xs: 0.72rem;
    --cbon-text-sm: 0.85rem;
    --cbon-text-base: 0.95rem;
    --cbon-text-lg: 1.1rem;
    --cbon-text-xl: 1.25rem;
    --cbon-text-2xl: 1.5rem;
    --cbon-text-3xl: 1.85rem;
    --cbon-text-4xl: 2.25rem;

    --cbon-weight-regular: 400;
    --cbon-weight-medium: 500;
    --cbon-weight-semibold: 600;
    --cbon-weight-bold: 700;
    --cbon-weight-black: 800;

    --cbon-leading-tight: 1.2;
    --cbon-leading-normal: 1.5;
    --cbon-leading-relaxed: 1.7;

    /* --- 過渡 --- */
    --cbon-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --cbon-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cbon-duration-fast: 120ms;
    --cbon-duration-base: 200ms;
    --cbon-duration-slow: 320ms;

    /* --- 容器 --- */
    --cbon-container-max: 480px;
    --cbon-container-wide: 1100px;

    /* --- Z-index --- */
    --cbon-z-base: 1;
    --cbon-z-sticky: 100;
    --cbon-z-modal: 1000;
    --cbon-z-toast: 1100;
    --cbon-z-tooltip: 1200;
}

/* 全站基礎重置（必須在任何頁面樣式前載入） */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--cbon-bg);
    color: var(--cbon-text);
    font-family: var(--cbon-font-sans);
    font-size: var(--cbon-text-base);
    line-height: var(--cbon-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--cbon-primary);
    text-decoration: none;
    transition: color var(--cbon-duration-fast) var(--cbon-ease);
}

a:hover {
    color: var(--cbon-primary-700);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--cbon-weight-bold);
    line-height: var(--cbon-leading-tight);
    color: var(--cbon-text);
}

p {
    margin: 0;
}

/* 共用容器 */
.cbon-container {
    width: 100%;
    max-width: var(--cbon-container-max);
    margin: 0 auto;
    padding: 0 var(--cbon-space-4);
}

.cbon-container-wide {
    width: 100%;
    max-width: var(--cbon-container-wide);
    margin: 0 auto;
    padding: 0 var(--cbon-space-4);
}

@media (min-width: 768px) {
    .cbon-container,
    .cbon-container-wide {
        padding: 0 var(--cbon-space-6);
    }
}