/**
 * Theme CSS Variables and Custom Styles
 * 恩群數位行銷 - Enchun Digital Marketing
 *
 * Design tokens extracted from Webflow CSS
 * Last Updated: 2026-01-31
 */

/* ============================================
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ============================================ */

:root {
    /* ============================================
     🎨 COLORS - Extracted from Webflow CSS
     ============================================ */

    /* Primary Colors (主要色) */
    --color-primary: #3898ec;
    /* Primary blue */
    --color-primary-dark: #0082f3;
    /* Deep blue */
    --color-primary-light: #67aee1;
    /* Light blue */
    --color-primary-hover: #2895f7;
    /* Hover blue */

    /* Secondary Colors (次要色) */
    --color-secondary: #f39c12;
    /* Secondary orange */
    --color-secondary-light: #f6c456;
    /* Light pink */
    --color-secondary-dark: #d84038;
    /* Deep orange */

    /* Accent Colors (強調色) */
    --color-accent: #d84038;
    /* Accent red-orange */
    --color-accent-light: #f6c456;
    /* Light pink */
    --color-accent-dark: #ea384c;
    /* Deep red */
    --color-accent-pink: #bb8282;
    /* Pink */
    --color-accent-rose: #c48383;
    /* Rose */

    /* Link Colors (連結色) */
    --color-link: #3083bf;
    /* Default link */
    --color-link-hover: #23608c;
    /* Link hover */

    /* Neutral Colors (中性色 - Tailwind Slate mapping) */
    --color-white: #ffffff;
    /* White */
    --color-black: #000000;
    /* Black */
    --color-gray-50: #fafafa;
    /* Surface lightest */
    --color-gray-100: #f5f5f5;
    /* Surface light */
    --color-gray-200: #f3f3f3;
    /* Surface */
    --color-gray-300: #eeeeee;
    /* Border light */
    --color-gray-400: #dddddd;
    /* Border default */
    --color-gray-500: #c8c8c8;
    /* Mid gray */
    --color-gray-600: #999999;
    /* Text muted */
    --color-gray-700: #828282;
    /* Text dark */
    --color-gray-800: #758696;
    /* Dark gray 1 */
    --color-gray-900: #5d6c7b;
    /* Dark gray 2 */
    --color-gray-950: #4f4f4f;
    /* Darkest gray */

    /* Semantic Colors (語意化顏色) */
    --color-text-primary: #333333;
    /* Primary text */
    --color-text-secondary: #222222;
    /* Secondary text */
    --color-text-muted: #999999;
    /* Muted text */
    --color-text-light: #758696;
    /* Light text on dark */
    --color-text-inverse: #ffffff;
    /* Inverse (white) */

    /* Backgrounds (背景色) */
    --color-background: #f2f2f2;
    /* Main background - Grey 6 from Webflow */
    --color-surface: #fafafa;
    /* Surface background */
    --color-surface2: #f3f3f3;
    /* Surface elevated */
    --color-surface-dark: #2226;
    /* Dark background */

    /* Borders (邊框色) */
    --color-border: #e2e8f0;
    /* Default border */
    --color-border-light: #dddddd;
    /* Light border */

    /* Category Colors (文章分類) */
    --color-category-google: #67aee1;
    /* Google小學堂 */
    --color-category-meta: #8974de;
    /* Meta小學堂 */
    --color-category-news: #3083bf;
    /* 行銷時事最前線 */
    --color-category-enchun: #3898ec;
    /* 恩群數位 */

    /* Badge Colors (標籤) */
    --color-badge-hot: #ea384c;
    /* Hot 標籤 (紅) */
    --color-badge-new: #67aee1;
    /* New 標籤 (淡藍) */

    /* Webflow Colors - Story 1-4 Global Layout (Verified against original) */
    --color-enchunblue: #23608c;
    /* Enchun Blue - 品牌/主色 */
    --color-enchunblue-dark: #3083bf;
    /* Enchun Blue Dark - 品牌/主色深色 */
    --color-tropical-blue: #c7e4fa;
    /* Tropical Blue - 頁腳背景 (verified: rgb(199, 228, 250)) */
    --color-st-tropaz: #5d7285;
    /* St. Tropaz - 頁腳文字 */
    --color-amber: #f6c456;
    /* Amber - CTA/強調 */
    --color-tarawera: #2d3748;
    /* Tarawera - 深色文字 */
    --color-pale-purple: oklch(62.664% 0.15547 290.298);
    /* Pale Purple - CTA/強調 */
    --color-nav-link: var(--color-gray-200);
    /* Navigation Link - 使用灰色系 */

    /* Webflow Additional Colors - Story 1-5 Homepage */
    --color-notification-red: #d84038;
    /* Notification Red - CTA Button */
    --color-dark-blue: #062841;
    /* Dark Blue - Headings */
    --color-medium-blue: #67aee1;
    /* Medium Blue - Accents */
    --color-grey5: #e0e0e0;
    /* Grey 5 - Borders */
    --color-grey6: #f2f2f2;
    /* Grey 6 - Backgrounds */

    /* ============================================
     🔤 TYPOGRAPHY - From Webflow
     ============================================ */

    --font-family-sans: "Noto Sans TC", "Quicksand", Arial, sans-serif;
    --font-family-heading: "Noto Sans TC", "Quicksand", Arial, sans-serif;

    /* Rich Text Block Typography */
    --rtb-heading: 1.44rem;
    --rtb-body: 1rem;
    --rtb-blockquote: 0.9rem;

    /* ============================================
     📏 SPACING - Based on Tailwind scale
     ============================================ */

    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */
    --spacing-3xl: 4rem;
    /* 64px */

    /* Container */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
    --container-padding-lg: 2rem;

    /* ============================================
     🔲 BORDER RADIUS
     ============================================ */

    --radius-sm: 0.125rem;
    /* 2px */
    --radius: 0.375rem;
    /* 6px (DEFAULT) */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-3xl: 2rem;
    /* 32px */
    --radius-full: 9999px;
    /* Full circle */

    /* ============================================
     💫 SHADOWS
     ============================================ */

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
    --shadow-md:
        0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:
        0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* ============================================
     ⏱ TRANSITIONS
     ============================================ */

    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ============================================
     🎯 Z-INDEX LAYERS
     ============================================ */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal: 1040;
    --z-popover: 1060;
    --z-tooltip: 1080;

    /* ============================================
     📱 RESPONSIVE - Font Size Adjustments (Webflow)
     ============================================ */

    /* Webflow breakpoints:
       Desktop default: 19px
       Tablet (≤991px): 19px
       Mobile (≤767px): 16px
       Small (≤479px): 13px
    */
    --html-font-size-desktop: 19px;
    --html-font-size-tablet: 19px;
    /* 991px breakpoint */
    --html-font-size-mobile: 16px;
    /* 767px breakpoint */
    --html-font-size-small: 13px;
    /* 479px breakpoint */
}

/* ============================================
   🌙 DARK MODE (Optional - for future use)
   ============================================ */

/*@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #1a202c;
        --color-surface: #2d3748;
        --color-surface2: #1a202c;
        --color-text: #f7fafc;
        --color-text-muted: #a0aec0;
        --color-text-secondary: #e2e8f0;
        --color-border: #4a5568;
    }
}*/

/* ============================================
   📐 BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family-sans);
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    font-size: var(--html-font-size-desktop);
}

body {
    margin: 0;
    padding: 0;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    background-color: inherit;
}

/* ============================================
   📱 RESPONSIVE FONT SIZE ADJUSTMENTS
   ============================================ */

@media (max-width: 991px) {
    html {
        font-size: var(--html-font-size-tablet);
    }
}

@media (max-width: 767px) {
    html {
        font-size: var(--html-font-size-mobile);
    }
}

@media (max-width: 479px) {
    html {
        font-size: var(--html-font-size-small);
    }
}

/* ============================================
   🎨 UTILITY CLASSES
   ============================================ */

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg,
            var(--color-primary),
            var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animations */
.fade-in {
    animation: fadeIn var(--transition-normal) ease-in-out;
}

.slide-up {
    animation: slideUp var(--transition-normal) ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Shadow Custom */
.shadow-custom {
    box-shadow: var(--shadow-lg);
}

/* ============================================
   🔘 BUTTON STYLES
   ============================================ */

.btn-primary {
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-secondary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   🧭 NAVIGATION STYLES
   ============================================ */

.nav-link {
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width var(--transition-fast);
}

.nav-link:hover::after {
    width: 100%;
}

/* Active Navigation Link — position: relative ensures ::after stays within the link */
.nav-active {
    position: relative;
}

.nav-active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: var(--color-secondary);
}

/* ============================================
   📝 PROSE / MARKDOWN STYLES
   ============================================ */

.prose-custom {
    color: var(--color-text-primary);
    font-family: var(--font-family-sans);
}

.prose-custom h1,
.prose-custom h2,
.prose-custom h3,
.prose-custom h4,
.prose-custom h5,
.prose-custom h6 {
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.2;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.prose-custom h1 {
    font-size: 2.25rem;
}

.prose-custom h2 {
    font-size: 1.875rem;
}

.prose-custom h3 {
    font-size: 1.5rem;
}

.prose-custom p {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.prose-custom a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.prose-custom a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.prose-custom strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.prose-custom em {
    color: var(--color-text-muted);
}

.prose-custom code {
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    font-family: "Monaco", "Menlo", monospace;
    font-size: 0.875em;
}

.prose-custom pre {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}

.prose-custom blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--color-text-muted);
    font-style: italic;
    background: var(--color-surface);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

/* ============================================
   📊 TABLE STYLES
   ============================================ */

.prose-custom table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.prose-custom th,
.prose-custom td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
}

.prose-custom th {
    background: var(--color-surface);
    font-weight: 600;
}

/* ============================================
   🖼️ IMAGE STYLES
   ============================================ */

.prose-custom img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

/* ============================================
   📏 HR (DIVIDER) STYLES
   ============================================ */

.prose-custom hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-2xl) 0;
}

/* ============================================
   🏷️ CATEGORY BADGES
   ============================================ */

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-hot {
    background-color: var(--color-badge-hot);
    color: white;
}

.badge-new {
    background-color: var(--color-badge-new);
    color: white;
}

/* Category Badge Colors */
.badge-category-google {
    background-color: var(--color-category-google);
    color: white;
}

.badge-category-meta {
    background-color: var(--color-category-meta);
    color: white;
}

.badge-category-news {
    background-color: var(--color-category-news);
    color: white;
}

.badge-category-enchun {
    background-color: var(--color-category-enchun);
    color: white;
}