:root {
    --primary: #c41e3a;
    --primary-hover: #a01830;
    --primary-soft: color-mix(in srgb, #c41e3a 12%, transparent);
    --secondary: #d4af37;
    --accent: #d4af37;
    --dark: #0a0a0a;
    --light: #F5F5F5;
    --text: #1a1a1a;
    --heading: #0a0a0a;

    /* Derived brand helpers — follow the settings above automatically */
    --dark-2: color-mix(in srgb, #0a0a0a 90%, #ffffff);
    --secondary-soft: color-mix(in srgb, #d4af37 12%, transparent);
    --accent-soft: color-mix(in srgb, #d4af37 12%, transparent);

    /* Surfaces & hairlines — flipped by the dark block below */
    --surface: #ffffff;
    --surface-2: color-mix(in srgb, #0a0a0a 4%, #ffffff);
    --border: color-mix(in srgb, #C0C0C0 60%, transparent); /* Silver Gray — borders, subtle dividers */
    color-scheme: light;

    --white: #ffffff;
    --gray: #94a3b8;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Semantic INK — foreground colour for text sitting ON the soft tinted
       backgrounds (badges, alerts, change-due readouts, POS pills). Light mode
       needs the dark shades for contrast against a pale tint; the dark block
       below swaps them for the bright semantic colours so ONE rule stays
       readable on graphite too. Usage: color:var(--danger-ink). */
    --success-ink: #047857;
    --warning-ink: #b45309;
    --danger-ink:  #b91c1c;
    --info-ink:    #1d4ed8;
    --shadow: 0 4px 20px color-mix(in srgb, #0a0a0a 8%, transparent);
    --shadow-lg: 0 12px 40px color-mix(in srgb, #0a0a0a 16%, transparent);
    --radius: 10px;
    --radius-lg: 18px;
    --transition: all 0.25s ease;

    --sidebar-bg: var(--dark);
    --sidebar-text: #cbd5e1;
}

/* ============================================================
   🌙 DARK THEME — storefront night mode
   Values come from Admin ▸ White Label & Settings ▸ Appearance
   ▸ Dark Theme. Visitors flip it with the 🌞/🌙 switch; the
   choice is kept in localStorage and applied before first paint.
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #c41e3a;
    --primary-hover: #a01830;
    --primary-soft: color-mix(in srgb, #c41e3a 22%, transparent);
    --secondary: #d4af37;
    --accent: #d4af37;
    --dark: #0a0a0a;
    --dark-2: color-mix(in srgb, #0a0a0a 82%, #ffffff);
    --light: #1a1a1a;
    --text: #F5F5F5;
    --heading: #FFFFFF;
    --secondary-soft: color-mix(in srgb, #d4af37 22%, transparent);
    --accent-soft: color-mix(in srgb, #d4af37 22%, transparent);

    /* Polished Silver — muted text & icons on graphite */
    --gray: #B0B0B0;
    --border: color-mix(in srgb, #B0B0B0 32%, transparent);
    --surface: #1E1E1E;
    --surface-2: color-mix(in srgb, #FFFFFF 5%, #1E1E1E);

    /* Semantic ink flips to the bright accents so text on a tinted
       background stays readable on the dark surface. */
    --success-ink: var(--success);
    --warning-ink: var(--warning);
    --danger-ink:  var(--danger);
    --info-ink:    var(--info);
}

/* ============================================================
   v6.22 - SITE FAQ (public faq.php)
   Uses the storefront CSS variables so it re-brands with the
   theme and adapts to the dark theme automatically.
   ============================================================ */
.sf-faq-search { position:relative; max-width:640px; margin:0 auto 30px; }
.sf-faq-search i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--gray); }
.sf-faq-search input { width:100%; padding:13px 16px 13px 44px; border:1px solid var(--border); border-radius:12px; font-size:1rem; background:var(--surface); color:var(--text); }
.sf-faq-cat { display:flex; align-items:center; gap:10px; font-size:1.3rem; margin:34px 0 4px; }
.sf-faq-cat i { color:var(--primary); }
.sf-faq-items { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.sf-faq-item { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.sf-faq-item summary { cursor:pointer; padding:14px 18px; font-weight:600; list-style:none; display:flex; align-items:center; gap:10px; }
.sf-faq-item summary::before { content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--primary); transition:transform .2s; }
.sf-faq-item[open] summary::before { transform:rotate(90deg); }
.sf-faq-item summary::-webkit-details-marker { display:none; }
.sf-faq-body { padding:0 18px 16px; color:var(--text); }
.sf-faq-body p { margin:0 0 10px; }
.sf-faq-list { margin:0 0 10px; padding-left:22px; }
.sf-faq-list li { margin-bottom:6px; }