:root {
    /* Brand — Slate & Blush */
    --syc-primary:        #3D5A6E;
    --syc-primary-dark:   #2C4255;
    --syc-primary-light:  #5A7A90;

    --syc-accent:         #E8A598;
    --syc-accent-dark:    #C8806F;
    --syc-accent-light:   #F2C4BC;
    --syc-accent-subtle:  #FBF0EE;

    --syc-bg:             #F6F4F2;
    --syc-surface:        #FFFFFF;
    --syc-surface-alt:    #EEECEA;
    --syc-border:         #E2DDD8;
    --syc-text:           #2A3540;
    --syc-text-muted:     #7A8590;
    --syc-text-light:     #B0BAC0;

    --syc-success:        #4A7C59;
    --syc-warning:        #C8933A;
    --syc-danger:         #B85450;
    --syc-info:           #4A6F8A;

    --syc-font-base:      'Inter', system-ui, -apple-system, sans-serif;
    --syc-font-heading:   'Playfair Display', Georgia, serif;
    --syc-font-size-base: 1rem;
    --syc-line-height:    1.6;

    --syc-radius:         6px;
    --syc-radius-lg:      12px;
    --syc-radius-xl:      20px;
    --syc-shadow:         0 1px 3px rgba(61,90,110,0.08), 0 1px 2px rgba(61,90,110,0.04);
    --syc-shadow-lg:      0 4px 16px rgba(61,90,110,0.10);
    --syc-transition:     0.2s ease;

    /* Header stripe becomes the blush accent */
    --syc-header-bg:      #3D5A6E;
    --syc-header-stripe:  #E8A598;
    --syc-header-height:  64px;
    --syc-stripe-height:  3px;

    /* Nav active uses primary green */
    --syc-nav-bg:         #FFFFFF;
    --syc-nav-active-bg:  #3D5A6E;
    --syc-nav-active-text:#FFFFFF;
}

body {
    background-color: var(--syc-bg);
    color: var(--syc-text);
    font-family: var(--syc-font-base);
    font-size: var(--syc-font-size-base);
    line-height: var(--syc-line-height);
}

h1, h2, h3, .syc-heading {
    font-family: var(--syc-font-heading);
    font-weight: 400;
}

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

.btn-primary {
    background-color: var(--syc-primary);
    border-color: var(--syc-primary);
    color: #FFFFFF;
    border-radius: var(--syc-radius);
    font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--syc-primary-dark);
    border-color: var(--syc-primary-dark);
}
.btn-outline-primary {
    color: var(--syc-primary);
    border-color: var(--syc-border);
    background: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--syc-surface-alt);
    border-color: var(--syc-primary);
    color: var(--syc-primary);
}
.btn-accent {
    background-color: var(--syc-accent);
    border-color: var(--syc-accent);
    color: var(--syc-primary);
    font-weight: 600;
}
.btn-accent:hover {
    background-color: var(--syc-accent-dark);
    border-color: var(--syc-accent-dark);
    color: var(--syc-primary);
}
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(232,165,152,0.30);
    border-color: var(--syc-accent);
}