/* ════════════════════
   MIXIN BASE RULES
   Common structure — no colors here
   ════════════════════ */

[class*="-section"] { box-sizing: border-box; }

[class*="-section"] h1,
[class*="-section"] h2,
[class*="-section"] h3,
[class*="-section"] h4,
[class*="-section"] h5,
[class*="-section"] h6 { font-weight: 500; line-height: 1.2; }

[class*="-section"] p { line-height: 1.85; }

[class*="-section"] a { text-decoration: none; transition: color 0.2s, border-color 0.2s; }

[class*="-section"] strong,
[class*="-section"] b { font-weight: 500; }

[class*="-section"] em,
[class*="-section"] i { font-style: italic; }

[class*="-section"] span { display: inline; border-radius: 3px; padding: 1px 5px; }

[class*="-section"] ul,
[class*="-section"] ol { padding-left: 20px; line-height: 1.85; }

[class*="-section"] li { margin-bottom: 6px; }

[class*="-section"] blockquote { border-left-width: 3px; border-left-style: solid; padding: 14px 20px; margin: 16px 0; border-radius: 0 6px 6px 0; }

[class*="-section"] code { border-radius: 4px; padding: 2px 7px; font-family: 'Courier New', monospace; font-size: 0.9em; }

[class*="-section"] pre { border-radius: 8px; padding: 16px; overflow-x: auto; }

[class*="-section"] mark { border-radius: 3px; padding: 1px 4px; }

[class*="-section"] hr { border: none; border-top-width: 1px; border-top-style: solid; margin: 24px 0; }

[class*="-section"] table { border-collapse: collapse; width: 100%; }

[class*="-section"] th,
[class*="-section"] td { padding: 10px 14px; text-align: left; border-width: 1px; border-style: solid; }

[class*="-section"] th { font-weight: 50; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; }

[class*="-section"] button,
[class*="-section"] .button,
[class*="-section"] input[type="submit"],
[class*="-section"] input[type="button"] { cursor: pointer; border-width: 2px; border-style: solid; border-radius: 6px; font-weight: 500; transition: background 0.2s, color 0.2s, border-color 0.2s; }

[class*="-section"] input[type="text"],
[class*="-section"] input[type="email"],
[class*="-section"] input[type="tel"],
[class*="-section"] input[type="number"],
[class*="-section"] input[type="password"],
[class*="-section"] textarea,
[class*="-section"] select { border-width: 1px; border-style: solid; border-radius: 6px; transition: border-color 0.2s; outline-offset: 2px; }

[class*="-section"] label { font-weight: 500; font-size: 0.88em; letter-spacing: 0.3px; }

[class*="-section"] img { border-width: 1px; border-style: solid; border-radius: 4px; }


/* ════════════════════
   COLOR APPLIER CLASSES
   Yeh rules :root variables ko elements pe apply karte hain
   Theme file mein sirf :root values badlo — yeh automatically update hoga
   ════════════════════ */

/* ── PRIMARY SECTION ── */
.primary-section { background: var(--primary-bg) !important; color: var(--primary-para) !important; }
.primary-section h1,.primary-section h2,.primary-section h3,.primary-section h4,.primary-section h5,.primary-section h6 { color: var(--primary-heading) !important; border-color: var(--primary-border-accent) !important; }
.primary-section p { color: var(--primary-para) !important; }
.primary-section strong,.primary-section b { color: var(--primary-strong) !important; }
.primary-section em,.primary-section i { color: var(--primary-em) !important; }
.primary-section span { color: var(--primary-span-color) !important; }
.primary-section a { color: var(--primary-link) !important; }
.primary-section a:hover { color: var(--primary-link-hover) !important; border-bottom-color: var(--primary-link-hover) !important; }
.primary-section li { color: var(--primary-para) !important; }
.primary-section li::marker { color: var(--primary-border-accent) !important; }
.primary-section blockquote { background: var(--primary-blockquote) !important; border-left-color: var(--primary-blockquote-border) !important; color: var(--primary-para) !important; }
.primary-section code,.primary-section pre { background: var(--primary-code-bg) !important; color: var(--primary-code-text) !important; }
.primary-section mark { background: var(--primary-mark) !important; color: var(--primary-mark-text) !important; }
.primary-section hr { border-top-color: var(--primary-divider) !important; }
.primary-section table { border-color: var(--primary-table-border) !important; }
.primary-section th { background: var(--primary-th-bg) !important; color: var(--primary-th-text) !important; border-color: var(--primary-table-border) !important; }
.primary-section td { color: var(--primary-td-text) !important; border-color: var(--primary-table-border) !important; }
.primary-section button,.primary-section .button,.primary-section input[type="submit"] { background: var(--primary-btn-bg) !important; color: var(--primary-btn-text) !important; border-color: var(--primary-btn-bg) !important; }
.primary-section button:hover,.primary-section .button:hover { background: var(--primary-btn-hover) !important; border-color: var(--primary-btn-hover) !important; }
.primary-section input[type="text"],.primary-section input[type="email"],.primary-section input[type="tel"],.primary-section textarea,.primary-section select { background: var(--primary-input-bg) !important; color: var(--primary-input-text) !important; border-color: var(--primary-input-border) !important; }
.primary-section input:focus,.primary-section textarea:focus { border-color: var(--primary-input-focus) !important; outline-color: var(--primary-input-focus) !important; }
.primary-section ::placeholder { color: var(--primary-placeholder) !important; }
.primary-section label { color: var(--primary-label) !important; }
.primary-section img { border-color: var(--primary-border) !important; }

/* ── SECONDARY SECTION ── */
.secondary-section { background: var(--secondary-bg) !important; color: var(--secondary-para) !important; }
.secondary-section h1,.secondary-section h2,.secondary-section h3,.secondary-section h4,.secondary-section h5,.secondary-section h6 { color: var(--secondary-heading) !important; border-color: var(--secondary-border-accent) !important; }
.secondary-section p { color: var(--secondary-para) !important; }
.secondary-section strong,.secondary-section b { color: var(--secondary-strong) !important; }
.secondary-section em,.secondary-section i { color: var(--secondary-em) !important; }
.secondary-section span { color: var(--secondary-span-color) !important; }
.secondary-section a { color: var(--secondary-link) !important;}
.secondary-section a:hover { color: var(--secondary-link-hover) !important; border-bottom-color: var(--secondary-link-hover) !important; }
.secondary-section li { color: var(--secondary-para) !important; }
.secondary-section li::marker { color: var(--secondary-border-accent) !important; }
.secondary-section blockquote { background: var(--secondary-blockquote) !important; border-left-color: var(--secondary-blockquote-border) !important; color: var(--secondary-para) !important; }
.secondary-section code,.secondary-section pre { background: var(--secondary-code-bg) !important; color: var(--secondary-code-text) !important; }
.secondary-section mark { background: var(--secondary-mark) !important; color: var(--secondary-mark-text) !important; }
.secondary-section hr { border-top-color: var(--secondary-divider) !important; }
.secondary-section table { border-color: var(--secondary-table-border) !important; }
.secondary-section th { background: var(--secondary-th-bg) !important; color: var(--secondary-th-text) !important; border-color: var(--secondary-table-border) !important; }
.secondary-section td { color: var(--secondary-td-text) !important; border-color: var(--secondary-table-border) !important; }
.secondary-section button,.secondary-section .button,.secondary-section input[type="submit"] { background: var(--secondary-btn-bg) !important; color: var(--secondary-btn-text) !important; border-color: var(--secondary-btn-bg) !important; }
.secondary-section button:hover,.secondary-section .button:hover { background: var(--secondary-btn-hover) !important; border-color: var(--secondary-btn-hover) !important; }
.secondary-section input[type="text"],.secondary-section input[type="email"],.secondary-section input[type="tel"],.secondary-section textarea,.secondary-section select { background: var(--secondary-input-bg) !important; color: var(--secondary-input-text) !important; border-color: var(--secondary-input-border) !important; }
.secondary-section input:focus,.secondary-section textarea:focus { border-color: var(--secondary-input-focus) !important; outline-color: var(--secondary-input-focus) !important; }
.secondary-section ::placeholder { color: var(--secondary-placeholder) !important; }
.secondary-section label { color: var(--secondary-label) !important; }
.secondary-section img { border-color: var(--secondary-border) !important; }

/* ── BASE SECTION ── */
.base-section { background: var(--base-bg) !important; color: var(--base-para) !important; }
.base-section h1,.base-section h2,.base-section h3,.base-section h4,.base-section h5,.base-section h6 { color: var(--base-heading) !important; border-color: var(--base-border-accent) !important; }
.base-section p { color: var(--base-para) !important; }
.base-section strong,.base-section b { color: var(--base-strong) !important; }
.base-section em,.base-section i { color: var(--base-em) !important; }
.base-section span { color: var(--base-span-color) !important; }
.base-section a { color: var(--base-link) !important;}
.base-section a:hover { color: var(--base-link-hover) !important; }
.base-section li { color: var(--base-para) !important; }
.base-section li::marker { color: var(--base-border-accent) !important; }
.base-section blockquote { background: var(--base-blockquote) !important; border-left-color: var(--base-blockquote-border) !important; color: var(--base-para) !important; }
.base-section code,.base-section pre { background: var(--base-code-bg) !important; color: var(--base-code-text) !important; }
.base-section mark { background: var(--base-mark) !important; color: var(--base-mark-text) !important; }
.base-section hr { border-top-color: var(--base-divider) !important; }
.base-section table { border-color: var(--base-table-border) !important; }
.base-section th { background: var(--base-th-bg) !important; color: var(--base-th-text) !important; border-color: var(--base-table-border) !important; }
.base-section td { color: var(--base-td-text) !important; border-color: var(--base-table-border) !important; }
.base-section button,.base-section .button,.base-section input[type="submit"] { background: var(--base-btn-bg) !important; color: var(--base-btn-text) !important; border-color: var(--base-btn-bg) !important; }
.base-section button:hover,.base-section .button:hover { background: var(--base-btn-hover) !important; color: var(--base-btn-hover-text) !important; border-color: var(--base-btn-hover) !important; }
.base-section input[type="text"],.base-section input[type="email"],.base-section input[type="tel"],.base-section textarea,.base-section select { background: var(--base-input-bg) !important; color: var(--base-input-text) !important; border-color: var(--base-input-border) !important; }
.base-section input:focus,.base-section textarea:focus { border-color: var(--base-input-focus) !important; outline-color: var(--base-input-focus) !important; }
.base-section ::placeholder { color: var(--base-placeholder) !important; }
.base-section label { color: var(--base-label) !important; }
.base-section img { border-color: var(--base-border) !important; }

/* ── NEUTRAL SECTION ── */
.neutral-section { background: var(--neutral-bg) !important; color: var(--neutral-para) !important; }
.neutral-section h1,.neutral-section h2,.neutral-section h3,.neutral-section h4,.neutral-section h5,.neutral-section h6 { color: var(--neutral-heading) !important; border-color: var(--neutral-border-accent) !important; }
.neutral-section p { color: var(--neutral-para) !important; }
.neutral-section strong,.neutral-section b { color: var(--neutral-strong) !important; }
.neutral-section em,.neutral-section i { color: var(--neutral-em) !important; }
.neutral-section span { color: var(--neutral-span-color) !important; }
.neutral-section a { color: var(--neutral-link) !important;}
.neutral-section a:hover { color: var(--neutral-link-hover) !important; }
.neutral-section li { color: var(--neutral-para) !important; }
.neutral-section li::marker { color: var(--neutral-border-accent) !important; }
.neutral-section blockquote { background: var(--neutral-blockquote) !important; border-left-color: var(--neutral-blockquote-border) !important; color: var(--neutral-para) !important; }
.neutral-section code,.neutral-section pre { background: var(--neutral-code-bg) !important; color: var(--neutral-code-text) !important; }
.neutral-section mark { background: var(--neutral-mark) !important; color: var(--neutral-mark-text) !important; }
.neutral-section hr { border-top-color: var(--neutral-divider) !important; }
.neutral-section table { border-color: var(--neutral-table-border) !important; }
.neutral-section th { background: var(--neutral-th-bg) !important; color: var(--neutral-th-text) !important; border-color: var(--neutral-table-border) !important; }
.neutral-section td { color: var(--neutral-td-text) !important; border-color: var(--neutral-table-border) !important; }
.neutral-section button,.neutral-section .button,.neutral-section input[type="submit"] { background: var(--neutral-btn-bg) !important; color: var(--neutral-btn-text) !important; border-color: var(--neutral-btn-bg) !important; }
.neutral-section button:hover,.neutral-section .button:hover { background: var(--neutral-btn-hover) !important; border-color: var(--neutral-btn-hover) !important; }
.neutral-section input[type="text"],.neutral-section input[type="email"],.neutral-section input[type="tel"],.neutral-section textarea,.neutral-section select { background: var(--neutral-input-bg) !important; color: var(--neutral-input-text) !important; border-color: var(--neutral-input-border) !important; }
.neutral-section input:focus,.neutral-section textarea:focus { border-color: var(--neutral-input-focus) !important; outline-color: var(--neutral-input-focus) !important; }
.neutral-section ::placeholder { color: var(--neutral-placeholder) !important; }
.neutral-section label { color: var(--neutral-label) !important; }
.neutral-section img { border-color: var(--neutral-border) !important; }

/* ── LIGHT SECTION ── */
.light-section { background: var(--light-bg) !important; color: var(--light-para) !important; }
.light-section h1,.light-section h2,.light-section h3,.light-section h4,.light-section h5,.light-section h6 { color: var(--light-heading) !important; border-color: var(--light-border-accent) !important; }
.light-section p { color: var(--light-para) !important; }
.light-section strong,.light-section b { color: var(--light-strong) !important; }
.light-section em,.light-section i { color: var(--light-em) !important; }
.light-section span { color: var(--light-span-color) !important; }
.light-section a { color: var(--light-link) !important;}
.light-section a:hover { color: var(--light-link-hover) !important; }
.light-section li { color: var(--light-para) !important; }
.light-section li::marker { color: var(--light-border-accent) !important; }
.light-section blockquote { background: var(--light-blockquote) !important; border-left-color: var(--light-blockquote-border) !important; color: var(--light-para) !important; }
.light-section code,.light-section pre { background: var(--light-code-bg) !important; color: var(--light-code-text) !important; }
.light-section mark { background: var(--light-mark) !important; color: var(--light-mark-text) !important; }
.light-section hr { border-top-color: var(--light-divider) !important; }
.light-section table { border-color: var(--light-table-border) !important; }
.light-section th { background: var(--light-th-bg) !important; color: var(--light-th-text) !important; border-color: var(--light-table-border) !important; }
.light-section td { color: var(--light-td-text) !important; border-color: var(--light-table-border) !important; }
.light-section button,.light-section .button,.light-section input[type="submit"] { background: var(--light-btn-bg) !important; color: var(--light-btn-text) !important; border-color: var(--light-btn-bg) !important; }
.light-section button:hover,.light-section .button:hover { background: var(--light-btn-hover) !important; border-color: var(--light-btn-hover) !important; }
.light-section input[type="text"],.light-section input[type="email"],.light-section input[type="tel"],.light-section textarea,.light-section select { background: var(--light-input-bg) !important; color: var(--light-input-text) !important; border-color: var(--light-input-border) !important; }
.light-section input:focus,.light-section textarea:focus { border-color: var(--light-input-focus) !important; outline-color: var(--light-input-focus) !important; }
.light-section ::placeholder { color: var(--light-placeholder) !important; }
.light-section label { color: var(--light-label) !important; }
.light-section img { border-color: var(--light-border) !important; }

/* ── SOFT SECTION ── */
.soft-section { background: var(--soft-bg) !important; color: var(--soft-para) !important; }
.soft-section h1,.soft-section h2,.soft-section h3,.soft-section h4,.soft-section h5,.soft-section h6 { color: var(--soft-heading) !important; border-color: var(--soft-border-accent) !important; }
.soft-section p { color: var(--soft-para) !important; }
.soft-section strong,.soft-section b { color: var(--soft-strong) !important; }
.soft-section em,.soft-section i { color: var(--soft-em) !important; }
.soft-section span { color: var(--soft-span-color) !important; }
.soft-section a { color: var(--soft-link) !important;}
.soft-section a:hover { color: var(--soft-link-hover) !important; }
.soft-section li { color: var(--soft-para) !important; }
.soft-section li::marker { color: var(--soft-border-accent) !important; }
.soft-section blockquote { background: var(--soft-blockquote) !important; border-left-color: var(--soft-blockquote-border) !important; color: var(--soft-para) !important; }
.soft-section code,.soft-section pre { background: var(--soft-code-bg) !important; color: var(--soft-code-text) !important; }
.soft-section mark { background: var(--soft-mark) !important; color: var(--soft-mark-text) !important; }
.soft-section hr { border-top-color: var(--soft-divider) !important; }
.soft-section table { border-color: var(--soft-table-border) !important; }
.soft-section th { background: var(--soft-th-bg) !important; color: var(--soft-th-text) !important; border-color: var(--soft-table-border) !important; }
.soft-section td { color: var(--soft-td-text) !important; border-color: var(--soft-table-border) !important; }
.soft-section button,.soft-section .button,.soft-section input[type="submit"] { background: var(--soft-btn-bg) !important; color: var(--soft-btn-text) !important; border-color: var(--soft-btn-bg) !important; }
.soft-section button:hover,.soft-section .button:hover { background: var(--soft-btn-hover) !important; border-color: var(--soft-btn-hover) !important; }
.soft-section input[type="text"],.soft-section input[type="email"],.soft-section input[type="tel"],.soft-section textarea,.soft-section select { background: var(--soft-input-bg) !important; color: var(--soft-input-text) !important; border-color: var(--soft-input-border) !important; }
.soft-section input:focus,.soft-section textarea:focus { border-color: var(--soft-input-focus) !important; outline-color: var(--soft-input-focus) !important; }
.soft-section ::placeholder { color: var(--soft-placeholder) !important; }
.soft-section label { color: var(--soft-label) !important; }
.soft-section img { border-color: var(--soft-border) !important; }