:root {
    /* Brand — Teal & Vermilion (brand guide, Oct 2026).

       Slate & Blush read as a boutique to the men in the beta. Deep Teal carries the structure
       (header, selected states), Vermilion the main action and the accent, Brick the links, the
       Tint the highlights. Chalk and Ink are the page and the words. */
    --syc-primary:        #1F4A54;   /* Deep Teal */
    --syc-primary-dark:   #163840;
    --syc-primary-light:  #3E6C77;

    --syc-accent:         #EE5A3C;   /* Vermilion */
    --syc-accent-deep:    #E34234;   /* Deep Vermilion: large graphics on light */
    --syc-accent-dark:    #B03A1E;   /* Brick: links and accent text on light */
    --syc-accent-light:   #F7A491;
    --syc-accent-subtle:  #FDE1D8;   /* Vermilion Tint */

    --syc-bg:             #F6F5F1;   /* Chalk */
    --syc-surface:        #FFFFFF;
    --syc-surface-alt:    #EDEBE5;
    --syc-border:         #E1DED6;
    --syc-text:           #14262B;   /* Ink */
    --syc-text-muted:     #5E6B6F;
    --syc-text-light:     #A3ADB0;

    --syc-success:        #3F7A57;
    --syc-warning:        #C8933A;
    --syc-danger:         #B8372B;
    --syc-info:           #2F6573;

    /* Bricolage Grotesque for the logo and headings, DM Sans for everything read. */
    --syc-font-base:      'DM Sans', system-ui, -apple-system, sans-serif;
    --syc-font-heading:   'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
    --syc-font-size-base: 1rem;
    --syc-line-height:    1.6;

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

    /* Deep Teal bar with a Vermilion stripe under it. */
    --syc-header-bg:      #1F4A54;
    --syc-header-stripe:  #EE5A3C;
    --syc-header-height:  64px;
    --syc-stripe-height:  3px;

    /* The active tab is a Tint pill with Brick words, as in the guide's bottom bar. */
    --syc-nav-bg:         #FFFFFF;
    --syc-nav-active-bg:  #FDE1D8;
    --syc-nav-active-text:#B03A1E;

    /* Words that sit on Vermilion. White on #EE5A3C is under 3.5:1; Ink is over 5. */
    --syc-on-accent:      #14262B;
}

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: 700;
    letter-spacing: -0.01em;
}

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

/* Vermilion is the main action; Deep Teal is the secondary one. */
.btn-primary {
    background-color: var(--syc-accent);
    border-color: var(--syc-accent);
    color: var(--syc-on-accent);
    border-radius: var(--syc-radius);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--syc-accent-deep);
    border-color: var(--syc-accent-deep);
    color: var(--syc-on-accent);
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--syc-accent-light);
    border-color: var(--syc-accent-light);
    color: var(--syc-on-accent);
}
.btn-secondary {
    background-color: var(--syc-primary);
    border-color: var(--syc-primary);
    color: #FFFFFF;
    font-weight: 600;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--syc-primary-dark);
    border-color: var(--syc-primary-dark);
    color: #FFFFFF;
}
.btn-outline-primary {
    color: var(--syc-primary);
    border-color: var(--syc-primary);
    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-on-accent);
    font-weight: 600;
}
.btn-accent:hover {
    background-color: var(--syc-accent-deep);
    border-color: var(--syc-accent-deep);
    color: var(--syc-on-accent);
}
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(238,90,60,0.25);
    border-color: var(--syc-accent);
}