/**
 * ==============================================================================
 * FeelingsWheels - High-Contrast Dark & Light Theme System (GoSpinWheel Style)
 * ==============================================================================
 * File: assets/css/theme.css
 * Purpose: 100% visible, ultra-crisp colors in both Dark Mode and Light Mode.
 */

/* -------------------------------------------------------------------------- */
/* 1. DARK MODE VARIABLES (Default Cyber-Slate #0B0F14)                       */
/* -------------------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --bg-body: #0B0F14;
    --bg-card: #141A21;
    --bg-card-subtle: #161D26;
    --bg-elevated: #1B242F;
    --bg-input: #0E1318;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.14);
    --border-active: rgba(255, 255, 255, 0.24);

    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-inverse: #0B0F14;

    /* Accents */
    --accent-cyan: #38E1FF;
    --accent-cyan-hover: #1CC8EA;
    --accent-cyan-glow: rgba(56, 225, 255, 0.25);

    --accent-mint: #00E599;
    --accent-mint-hover: #00C782;
    --accent-mint-glow: rgba(0, 229, 153, 0.25);

    --accent-pink: #FF2E93;
    --accent-pink-hover: #E01979;

    --accent-gold: #F59E0B;
    --accent-danger: #EF4444;

    /* Fonts & Shapes */
    --font-heading: 'Plus Jakarta Sans', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    --font-body: 'Inter', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

    --transition-fast: 0.15s ease;
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------- */
/* 2. PROPER LIGHT MODE TOKENS (High-Contrast GoSpinWheel Look)               */
/* -------------------------------------------------------------------------- */
[data-theme="light"],
body.theme-light {
    /* Backgrounds: Pure Crisp White Surfaces */
    --bg-body: #F4F6F9;                  /* Ultra-clean soft grey background */
    --bg-card: #FFFFFF;                  /* Pure White Floating Cards */
    --bg-card-subtle: #F1F5F9;           /* Secondary rows & inner panels */
    --bg-elevated: #E2E8F0;              /* Hover states */
    --bg-input: #FFFFFF;                 /* White inputs */

    /* Borders: Crisp, High-Contrast Grey */
    --border-subtle: #E2E8F0;
    --border-medium: #CBD5E1;
    --border-active: #94A3B8;

    /* Text: Deep Dark Slate (100% Readable in Bright Sunlight) */
    --text-primary: #0F172A;             /* Bold Deep Dark */
    --text-secondary: #334155;           /* Solid Slate Grey */
    --text-muted: #64748B;               /* Readable secondary labels */
    --text-inverse: #FFFFFF;

    /* Accents adjusted for light mode contrast */
    --accent-cyan: #0284c7;              /* Deep Sky Blue for perfect contrast on white */
    --accent-cyan-hover: #0369A1;
    --accent-cyan-glow: rgba(2, 132, 199, 0.2);

    --accent-mint: #03a875;              /* Deep Emerald Green */
    --accent-mint-hover: #047857;
    --accent-mint-glow: rgba(5, 150, 105, 0.2);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.12);
}

/* -------------------------------------------------------------------------- */
/* 3. LIGHT MODE SPECIFIC COMPONENT OVERRIDES (Zero Clashing Colors)          */
/* -------------------------------------------------------------------------- */

/* Header in Light Mode */
[data-theme="light"] .site-header {
    background-color: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #E2E8F0;
}

[data-theme="light"] .brand-logo {
    color: #0F172A;
}

[data-theme="light"] .nav-link {
    color: #334155;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: #0F172A;
}

/* Dropdown Menus in Light Mode */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .wheel-select-dropdown,
[data-theme="light"] .tools-dropdown-menu,
[data-theme="light"] .entry-dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-action-item:hover,
[data-theme="light"] .preset-item-btn:hover {
    background: #F1F5F9 !important;
}

/* Wheel Stage Controls & High-Contrast Buttons in Light Mode */
[data-theme="light"] .btn-control-square,
[data-theme="light"] .btn-stage-action,
[data-theme="light"] .btn-wheel-select,
[data-theme="light"] .btn-ad-free-badge {
    background: #FFFFFF !important;
    border: 1.5px solid #94A3B8 !important; /* Sharp, high-contrast border */
    color: #0F172A !important;             /* Pitch dark readable text/icon */
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    font-weight: 600;
}

[data-theme="light"] .btn-control-square:hover,
[data-theme="light"] .btn-stage-action:hover,
[data-theme="light"] .btn-wheel-select:hover {
    background: #F1F5F9 !important;
    border-color: #475569 !important;      /* Hover par deep slate border */
    color: #000000 !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14) !important;
}

/* List Tab Elements in Light Mode */
[data-theme="light"] .entry-row-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

[data-theme="light"] .entry-row-item:hover {
    border-color: #CBD5E1;
    background: #FFFFFF;
}

[data-theme="light"] .entry-text-input {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] .entry-text-input:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

/* High-Contrast Stepper (+ / -) Buttons */
[data-theme="light"] .weight-stepper {
    background: #F8FAFC !important;
    border: 1.5px solid #94A3B8 !important;
}

[data-theme="light"] .btn-step {
    color: #0F172A !important;
    font-weight: 800 !important;
}

[data-theme="light"] .btn-step:hover {
    background: #E2E8F0 !important;
    color: #000000 !important;
}

[data-theme="light"] .weight-val {
    color: #0F172A !important;
}

[data-theme="light"] .percent-badge {
    color: #64748B !important;
}

/* Modal / Popup Action Buttons (Remove, Copy, Download) */
[data-theme="light"] .btn-action-remove,
[data-theme="light"] .btn-action-copy-img,
[data-theme="light"] .btn-action-download {
    background: #F8FAFC !important;
    border: 1.5px solid #94A3B8 !important;
    color: #0F172A !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .btn-action-remove svg,
[data-theme="light"] .btn-action-copy-img svg,
[data-theme="light"] .btn-action-download svg {
    stroke: #0F172A !important;
}

[data-theme="light"] .btn-action-remove:hover {
    background: #EF4444 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .btn-action-remove:hover svg {
    stroke: #FFFFFF !important;
}

[data-theme="light"] .btn-action-copy-img:hover,
[data-theme="light"] .btn-action-download:hover {
    background: #E2E8F0 !important;
    border-color: #475569 !important;
    color: #0284C7 !important;
}

/* Input Fields & Textareas */
[data-theme="light"] .input-new-entry,
[data-theme="light"] .bulk-textarea,
[data-theme="light"] .custom-select-box {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] .input-new-entry:focus,
[data-theme="light"] .bulk-textarea:focus,
[data-theme="light"] .custom-select-box:focus {
    border-color: #059669 !important;
}

/* Tabs Bar */
[data-theme="light"] .panel-tabs-nav {
    background: #E2E8F0;
    border: 1px solid #CBD5E1;
}

[data-theme="light"] .tab-nav-btn {
    color: #475569;
}

[data-theme="light"] .tab-nav-btn.is-active {
    background: #FFFFFF !important;
    color: #059669 !important;
    border-color: #CBD5E1 !important;
    box-shadow: var(--shadow-sm);
}

/* SEO Below-the-fold & Footer */
[data-theme="light"] .seo-section {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

[data-theme="light"] .step-card,
[data-theme="light"] .use-case-box,
[data-theme="light"] .cat-card-item,
[data-theme="light"] .faq-item {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .cat-card-item:hover,
[data-theme="light"] .use-case-box:hover {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .site-footer {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

/* Universal Close Button Fix for Light Mode */
[data-theme="light"] .modal-close-btn,
[data-theme="light"] .btn-close,
[data-theme="light"] .drawer-close-btn,
[data-theme="light"] .history-close-btn {
    background: #F1F5F9 !important;
    border: 1.5px solid #94A3B8 !important;
    color: #0F172A !important;
}

[data-theme="light"] .modal-close-btn svg,
[data-theme="light"] .btn-close svg,
[data-theme="light"] .drawer-close-btn svg,
[data-theme="light"] .history-close-btn svg {
    stroke: #0F172A !important;
}

[data-theme="light"] .modal-close-btn:hover,
[data-theme="light"] .btn-close:hover,
[data-theme="light"] .drawer-close-btn:hover,
[data-theme="light"] .history-close-btn:hover {
    background: #E2E8F0 !important;
    border-color: #475569 !important;
    color: #000000 !important;
}


/* -------------------------------------------------------------------------- */
/* 4. BASE RESET & UTILITIES                                                  */
/* -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.is-hidden {
    display: none !important;
}

.is-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* -------------------------------------------------------------------------- */
/* SIMPLE & CLEAN HIGH-CONTRAST ARTICLE TYPOGRAPHY                            */
/* -------------------------------------------------------------------------- */
.long-article-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #F8FAFC; /* Clean Crisp White */
}

.long-article-content h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFFFFF; /* Pure White Heading */
    margin: 2rem 0 0.75rem;
}

.long-article-content h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF; /* Pure White Subheading */
    margin: 1.25rem 0 0.4rem;
}

.long-article-content p {
    margin-bottom: 1rem;
    color: #E2E8F0; /* Soft Bright White */
}

.long-article-content ul, 
.long-article-content ol {
    margin: 0.75rem 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.long-article-content li {
    color: #E2E8F0;
    line-height: 1.6;
}

.long-article-content strong {
    color: #FFFFFF;
    font-weight: 700;
}

.long-article-content em {
    color: #E2E8F0;
    font-style: italic;
}

/* Simple Light Mode */
[data-theme="light"] .long-article-content,
[data-theme="light"] .long-article-content p,
[data-theme="light"] .long-article-content li,
[data-theme="light"] .long-article-content em {
    color: #334155 !important;
}

[data-theme="light"] .long-article-content h3,
[data-theme="light"] .long-article-content h4,
[data-theme="light"] .long-article-content strong {
    color: #0F172A !important;
}