/**
 * Default Skin (White & Orange)
 * Base theme colors - loaded by default
 */

:root {
    /* Core Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    
    /* Accent Colors */
    --accent-orange: #d97706;
    --accent-orange-rgb: 217, 119, 6;
    --accent-orange-dark: #b45309;
    --accent-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    
    /* Buttons */
    --btn-primary: #d97706;
    --btn-primary-hover: #b45309;
    
    /* Text Colors */
    --text-heading: #1a1f36;
    --text-body: #374151;
    --text-muted: #4b5563;
    --text-primary: #1a1f36;
    --text-secondary: #374151;
    
    /* Borders */
    --border-color: #e5e7eb;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Dark Section Backgrounds */
    --bg-dark: #1a1f36;
    --bg-darker: #0f172a;
    --bg-dark-start: #1a1f36;
    --bg-dark-end: #2d3748;
    --bg-dark-alt-start: #0f172a;
    --bg-dark-alt-end: #1e293b;
    
    /* Status Colors */
    --accent-green: #22c55e;
    --accent-red: #ef4444;
}

/* Default skin has no additional overrides - uses base styles */

/* ==========================================================================
   Button Overrides for Light Theme
   ========================================================================== */

/* Secondary/Outline buttons - use accent color on light backgrounds */
[data-theme="default"] .btn-secondary,
:root .btn-secondary {
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

[data-theme="default"] .btn-secondary:hover,
:root .btn-secondary:hover {
    background: var(--btn-primary);
    color: #ffffff;
}

[data-theme="default"] .btn-outline,
:root .btn-outline {
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

[data-theme="default"] .btn-outline:hover,
:root .btn-outline:hover {
    background: var(--btn-primary);
    color: #ffffff;
}

/* Page hero outline buttons on light background */
[data-theme="default"] .page-hero-cta .btn-outline,
:root .page-hero-cta .btn-outline {
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

[data-theme="default"] .page-hero-cta .btn-outline:hover,
:root .page-hero-cta .btn-outline:hover {
    background: var(--btn-primary);
    color: #ffffff;
}

/* ==========================================================================
   Light Theme Page Overrides
   ========================================================================== */

/* Page Hero - Light theme needs proper contrast */
[data-theme="default"] .page-hero,
:root .page-hero {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

[data-theme="default"] .page-hero h1,
:root .page-hero h1 {
    color: var(--text-heading);
}

[data-theme="default"] .page-hero-subtitle,
:root .page-hero-subtitle {
    color: var(--text-muted);
}

/* Reseller Contact Box - Light theme */
[data-theme="default"] .reseller-contact-box,
:root .reseller-contact-box {
    background: var(--bg-secondary);
    border: 2px solid rgba(217, 119, 6, 0.2);
}

/* ==========================================================================
   Affiliate Page - Light Theme Overrides
   ========================================================================== */

[data-theme="default"] .affiliate-reward-card,
:root .affiliate-reward-card {
    border-color: var(--border-color);
}

[data-theme="default"] .partner-terms-box,
[data-theme="default"] .partner-ideal-box,
:root .partner-terms-box,
:root .partner-ideal-box {
    border-color: var(--border-color);
}

[data-theme="default"] .term-item,
:root .term-item {
    background: var(--bg-secondary);
}

[data-theme="default"] .ideal-list li,
:root .ideal-list li {
    border-bottom-color: var(--border-color);
}

[data-theme="default"] .reward-example,
:root .reward-example {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
}

[data-theme="default"] .reward-card-header,
:root .reward-card-header {
    border-bottom-color: var(--border-color);
}

/* Category Cards - Light theme */
[data-theme="default"] .category-card,
:root .category-card {
    border: 1px solid var(--border-color);
}

/* Country Cards - Light theme */
[data-theme="default"] .country-card,
:root .country-card {
    border: 1px solid var(--border-color);
}

/* Tier Cards - Light theme */
[data-theme="default"] .tier-card,
:root .tier-card {
    border: 1px solid var(--border-color);
}

/* Benefit Cards - Light theme */
[data-theme="default"] .benefit-card,
:root .benefit-card {
    border: 1px solid var(--border-color);
}

/* Quality Cards - Light theme */
[data-theme="default"] .quality-card,
:root .quality-card {
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   Additional Light Theme Overrides for pages.css
   Fix hardcoded rgba(255,255,255) borders that are invisible on white
   ========================================================================== */

/* League Cards */
[data-theme="default"] .league-card,
:root .league-card {
    border: 1px solid var(--border-color);
}

/* Visual Items */
[data-theme="default"] .visual-item,
:root .visual-item {
    border: 1px solid var(--border-color);
}

/* Channel Stats Bar */
[data-theme="default"] .channel-stats-bar,
:root .channel-stats-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Country Search */
[data-theme="default"] .country-search,
:root .country-search {
    border: 1px solid var(--border-color);
}

/* Tier Margin */
[data-theme="default"] .tier-margin,
:root .tier-margin {
    background: var(--bg-secondary);
}

/* Blog Cards */
[data-theme="default"] .post-card,
:root .post-card {
    border: 1px solid var(--border-color);
}

[data-theme="default"] .featured-post-card,
:root .featured-post-card {
    border: 1px solid var(--border-color);
}

/* Blog Section Title */
[data-theme="default"] .blog-section-title,
:root .blog-section-title {
    border-bottom: 1px solid var(--border-color);
}

/* Post Thumbnail Placeholder */
[data-theme="default"] .post-thumbnail-placeholder,
:root .post-thumbnail-placeholder {
    background: var(--bg-secondary);
}

/* Pagination */
[data-theme="default"] .blog-pagination a,
[data-theme="default"] .blog-pagination span,
:root .blog-pagination a,
:root .blog-pagination span {
    border: 1px solid var(--border-color);
}

/* Post Tags */
[data-theme="default"] .post-tags,
:root .post-tags {
    border-top: 1px solid var(--border-color);
}

[data-theme="default"] .tag,
:root .tag {
    border: 1px solid var(--border-color);
}

/* Share Buttons */
[data-theme="default"] .share-btn,
:root .share-btn {
    border: 1px solid var(--border-color);
}

/* Author Box */
[data-theme="default"] .author-box,
:root .author-box {
    border: 1px solid var(--border-color);
}

/* Post Navigation */
[data-theme="default"] .post-nav-item,
:root .post-nav-item {
    border: 1px solid var(--border-color);
}

/* Comments */
[data-theme="default"] .comments-area,
:root .comments-area {
    border-top: 1px solid var(--border-color);
}

[data-theme="default"] .comment-body,
:root .comment-body {
    border: 1px solid var(--border-color);
}

/* Sidebar Widgets */
[data-theme="default"] .sidebar-widget,
:root .sidebar-widget {
    border: 1px solid var(--border-color);
}

[data-theme="default"] .widget-title,
:root .widget-title {
    border-bottom: 1px solid var(--border-color);
}

/* Search Input */
[data-theme="default"] .search-input-wrapper,
:root .search-input-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Recent Posts Widget */
[data-theme="default"] .recent-post-item,
:root .recent-post-item {
    border-bottom: 1px solid var(--border-color);
}

/* Categories List */
[data-theme="default"] .categories-list li,
:root .categories-list li {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="default"] .cat-count,
:root .cat-count {
    background: var(--bg-secondary);
}

/* Quick Links */
[data-theme="default"] .quick-links-list li,
:root .quick-links-list li {
    border-bottom: 1px solid var(--border-color);
}

/* Device Cards */
[data-theme="default"] .device-card,
:root .device-card {
    border: 1px solid var(--border-color);
}

[data-theme="default"] .device-difficulty,
:root .device-difficulty {
    background: var(--bg-secondary);
}

/* App Cards */
[data-theme="default"] .app-card,
:root .app-card {
    border: 1px solid var(--border-color);
}

/* Contact Form */
[data-theme="default"] .contact-form-wrapper,
:root .contact-form-wrapper {
    border: 1px solid var(--border-color);
}

[data-theme="default"] .form-input,
[data-theme="default"] .form-textarea,
:root .form-input,
:root .form-textarea {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* FAQ Category Cards */
[data-theme="default"] .faq-category-card,
:root .faq-category-card {
    border: 1px solid var(--border-color);
}

/* Highlight Tags */
[data-theme="default"] .highlight-tag,
:root .highlight-tag {
    background: var(--bg-secondary);
}

/* Blog Hero Stats */
[data-theme="default"] .blog-stat,
:root .blog-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Code blocks in posts */
[data-theme="default"] .post-body code,
:root .post-body code {
    background: var(--bg-secondary);
}