/* Custom Bootstrap CSS Library for SME AI Blog */

:root {
    /* Brand palette inspired by the reference image */
    --primary-color: #0F5C63;   /* Deep teal */
    --secondary-color: #4CB7A6; /* Lagoon teal */
    --accent-color: #F2C56B;    /* Sunlit gold */
    --forest-color: #2E7D5A;    /* Lush green */
    --mist-color: #E6F2F2;      /* Cool mist */
    --slate-color: #1E2E36;     /* Graphite */

    /* Backgrounds */
    --light-bg: #F3F8F7;        /* Pale aqua */
    --white: #FFFFFF;

    /* Text Colors */
    --text-primary: #10242A;    /* Dark slate */
    --text-secondary: #2C6E73;  /* Teal text */
    --text-light: #F3F8F7;      /* Pale aqua */
    --text-white: #FFFFFF;
}

body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(242, 197, 107, 0.25), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(76, 183, 166, 0.25), transparent 55%),
        linear-gradient(180deg, var(--mist-color), var(--light-bg));
    color: var(--text-primary);
}

/* Buttons */
.btn {
    border-radius: 4px;
    font-weight: 600;
    padding: 10px 20px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-white);
}

.btn-primary:hover {
    background-color: #0B4A50;
    border-color: #0B4A50;
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-white);
}

.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-white);
}

/* Navigation */
.navbar {
    background: linear-gradient(135deg, rgba(15, 92, 99, 0.95), rgba(44, 110, 115, 0.9));
    backdrop-filter: blur(6px);
}

.navbar .nav-link {
    color: var(--text-white);
}

.navbar .nav-link:hover {
    color: var(--light-bg);
}

/* Cards */
.card {
    border: 1px solid rgba(15, 92, 99, 0.12);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(16, 36, 42, 0.12);
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.92);
}

.card-header {
    background-color: var(--primary-color);
    color: var(--text-white);
    border-radius: 8px 8px 0 0 !important;
}

.card-title a {
    color: var(--slate-color);
}

.card-title a:hover {
    color: var(--primary-color);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

p {
    color: var(--text-primary);
    font-family: 'Manrope', sans-serif;
}

/* Utility Classes */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.badge.bg-primary {
    background-color: var(--primary-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Footer */
.footer {
    background-color: transparent;
    color: var(--text-secondary);
}

/* Material Design Icon tweaks */
.mdi {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* Social icon sizing (e.g., Simple Icons SVGs like Bluesky) */
.social-icon, .social-icon img {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
    margin-right: 0.35rem;
}