/* --- Brandsma Capital - Combined Custom Styles (Hoskin-Inspired Theme) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary-bg: #ffffff; /* White */
    --secondary-bg: #f7f9fc; /* Very Light Gray */
    --primary-text: #1a202c; /* Dark Gray / Almost Black */
    --secondary-text: #4a5568; /* Medium Gray */
    --accent: #2dd4bf; /* Bright Green */
    --accent-hover: #5eead4; /* Lighter Green */
    --highlight: #facc15; /* Bright Yellow */
}
.brandsma-page-wrapper, .brandsma-page-wrapper-app {
    font-family: 'Inter', sans-serif;
    background-color: var(--secondary-bg);
    color: var(--primary-text);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--primary-bg);
    color: var(--primary-text);
}
.bg-primary { background-color: var(--primary-bg); }
.bg-secondary { background-color: var(--secondary-bg); }
.text-primary { color: var(--primary-text); }
.text-secondary { color: var(--secondary-text); }
.accent-color { color: var(--accent); }
.highlight-color { background-color: var(--highlight); }
.border-accent-color { border-color: var(--accent); }

.btn-primary {
    background-color: var(--accent);
    color: var(--primary-text) !important;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

/* Slider Styles */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #e2e8f0; /* Light Gray Track */
    outline: none;
    border-radius: 4px;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider:hover {
    opacity: 1;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--accent); /* Bright Green */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--accent);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}