/* ============================================================
   GLOBAL THEME — Perfect Opticals
   Dark Luxury Color Scheme
   ============================================================ */

/* ── Design Tokens ── */
:root {
    /* Brand Colors */
    --color-bg: #0f1117;
    /* Deep navy-black body background */
    --color-bg-elevated: #161b27;
    /* Slightly lifted surfaces */
    --color-bg-card: #1a1f30;
    /* Card/panel backgrounds */
    --color-bg-input: #161b27;
    /* Form inputs */

    --color-accent: #c9a86c;
    /* Gold primary accent */
    --color-accent-light: #e0c080;
    /* Lighter gold highlight */
    --color-accent-dim: rgba(201, 168, 108, 0.12);
    /* Subtle gold tint */
    --color-accent-border: rgba(201, 168, 108, 0.28);
    /* Gold border */

    --color-brand: #5A3323;
    /* Brand dark brown */
    --color-brand-light: #7a4a34;
    /* Lighter brown hover */
    --color-brand-dark: #3C1E12;
    /* Deeper brown */
    --color-brand-dim: rgba(90, 51, 35, 0.25);
    /* Subtle brown tint */

    /* Text Hierarchy — optimized for dark backgrounds */
    --color-text-primary: #f0f2f6;
    /* Main headings / key text — crisp off-white */
    --color-text-secondary: #c8cdd8;
    /* Body paragraphs — readable warm-gray */
    --color-text-muted: #8f96a3;
    /* Captions, metadata */
    --color-text-subtle: #5e6675;
    /* Placeholder, disabled */

    /* UI Elements */
    --color-border: #232a3a;
    /* Default border */
    --color-border-light: #2e3850;
    /* Lighter border */
    --color-divider: rgba(255, 255, 255, 0.06);
    /* Hair-line dividers */

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-accent: 0 6px 24px rgba(201, 168, 108, 0.25);

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.18s ease;
}

/* ── Body Reset ── */
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Typography Overrides ── */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary) !important;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

p {
    color: var(--color-text-secondary);
}

/* ── Links ── */
a {
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

/* ── Section Titles Global Override ── */
.section-title {
    color: var(--color-accent) !important;
}

/* ── Utility: Dark Card Surface ── */
.dark-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

/* ── Buttons Global ── */
.btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    color: #1a1208 !important;
    border: none;
    border-radius: 5px;
    transition: var(--transition);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
    box-shadow: var(--shadow-accent);
    transform: translateY(-2px);
    color: #1a1208 !important;
}

.btn-secondary {
    background: transparent;
    color: var(--color-accent) !important;
    border: 1.5px solid var(--color-accent-border);
    border-radius: 5px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background: var(--color-accent-dim);
    border-color: var(--color-accent);
    color: var(--color-accent) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* ── Selection highlight ── */
::selection {
    background: rgba(201, 168, 108, 0.30);
    color: var(--color-text-primary);
}