/* StreamCoreVPN theme (palette: E6E8E6, CED0CE, 9FB8AD, 475841, 3F403F) */
:root {
    /* Neutral theme */
    --bs-primary: #3F403F; /* Onyx */
    --bs-primary-rgb: 63, 64, 63;
    --bs-link-color: #3F403F;
    --bs-link-hover-color: #2B2B2B; /* darker neutral */

    /* App tokens */
    --scv-text: #3F403F;     /* Onyx */
    --scv-bg: #E6E8E6;       /* Platinum */
    --scv-surface: #FFFFFF;  /* White surfaces */
    --scv-accent: #CED0CE;   /* Neutral chip/surface */
    /* Background theme palette */
    --bg-cream: #F2F6D0;     /* Cream */
    --bg-honeydew: #D0E1D4;  /* Honeydew */
    --bg-pearl: #D9D2B6;     /* Pearl */
    --bg-desert: #E4BE9E;    /* Desert sand */
    --bg-dim: #71697A;       /* Dim gray */
}

body {
    color: var(--scv-text);
}

.hero {
    padding: 64px 0;
}

.bg-tint {
    background: white;
}

/* Alternating section utilities */
.section-surface { background: var(--scv-surface); }
.section-tint { background: var(--scv-bg); }

/* Image-provided palette utilities */
.bg-cream { background: var(--bg-cream) !important; }
.bg-honeydew { background: var(--bg-honeydew) !important; }
.bg-pearl { background: var(--bg-pearl) !important; }
.bg-desert { background: var(--bg-desert) !important; }
.bg-dim { background: var(--bg-dim) !important; color: #fff; }

/* Optional subtle gradient for hero or callouts */
.bg-soft-gradient {
    background: linear-gradient(180deg, var(--bg-cream) 0%, #ffffff 100%);
}

.plan-card .badge-recommended {
    background-color: var(--bs-primary);
}

.plan-card .price {
    font-size: 28px;
    font-weight: 700;
}

.plan-card .bandwidth {
    font-weight: 600;
}

.plan-card:hover {
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.13);
    transform: translateY(-2px);
    transition: all .2s ease;
}

.muted {
    color: #6b7280;
}

.feature-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d5d5d5;
    color: var(--bs-primary);
    font-size: 16px;
    margin-bottom: 6px;
}

.sticky-cta {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e5e7eb;
}

/* Navbar accent stripe */
.border-accent {
    border-top: 3px solid var(--scv-accent) !important;
}

/* Buttons tuned to palette */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-active-bg: var(--bs-link-hover-color);
}

.btn-outline-secondary {
    --bs-btn-color: var(--scv-text);
    --bs-btn-border-color: #BFC3C5;
    --bs-btn-hover-bg: #BFC3C5;
    --bs-btn-hover-border-color: #BFC3C5;
    --bs-btn-hover-color: #111;
}

/* Links */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Footer surface */
footer { background: #fff; }

/* Inverted/accents for homepage panels */
.card-invert-primary {
    background: #627f71; /* soft mint */
    color: var(--scv-text);
}
.card-invert-primary .text-muted { color: #4b5563 !important; }
.card-invert-primary .card-title { color: var(--scv-text); }
.card-invert-primary .feature-icon { background: rgba(0,0,0,0.08); color: var(--scv-text); }
.card-invert-primary .card-body { padding: 1.25rem; }

.card-accent {
    background: #627f71; /* soft mint */
    color: var(--scv-text);
}
.card-accent .feature-icon { background: white; color: var(--scv-text); }
.card-accent .card-body { padding: 3px; }
.card-accent .card-title { color: var(--scv-text); }
.card-accent .text-muted { color: #4b5563 !important; }
.card-elevated { box-shadow: 0 6px 16px rgba(0,0,0,0.06); border-radius: 12px; }

/* Typography tweaks */
.card-title { letter-spacing: .2px; }

/* Feature items (icon above title) */
.feature-item { text-align: center; }

/* Floating icon + inner container for cards */
.card-with-floating { position: relative; }
.card-floating-icon {
    border: 1px solid #ffc107;
    position: absolute;
    top: -12px;
    left: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    font-weight: 600;
}
.card-inner {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    height:100%;
}

/* Navbar mint theme */
.navbar-mint { background: #627f71 !important; }
.navbar-mint .navbar-brand,
.navbar-mint .nav-link { color: #fff !important; }
.navbar-mint .nav-link:hover, .navbar-mint .navbar-brand:hover { opacity: .85; }
.navbar-mint .btn { --bs-btn-color: #fff; --bs-btn-border-color: #fff; }
.navbar-mint .navbar-toggler { border-color: rgba(255,255,255,0.7); }
.navbar-mint .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Remove default card borders for accent panels */
.card-accent, .card-invert-primary { border: 0 !important; }