/* SV De Rotterdamse Hoek: het bordeaux-en-goudthema (kleuroptie 4), gelijk aan dat van de ledenmanager.
 *
 * Dit bestand staat als laatste in de <head> van elke pagina. Het legt de kleuren en lettertypen vast als
 * variabelen; de andere stijlbestanden en de pagina's zelf verwijzen daarnaar in plaats van naar vaste kleuren.
 * Wil je een kleur veranderen, dan doe je dat hier, op één plek.
 */

/* Lettertypen als bestand in static/fonts/ (zie HERKOMST.md daar), dus niets van een CDN. */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Hoofdkleur: bordeaux (koppen, tabelkoppen, de balk bovenaan) */
    --primary:          #4A1528;
    --primary-hover:    #3a1020;
    --primary-light:    #6a2038;

    /* Accent: goud (knoppen, randen, wat moet opvallen) */
    --accent:           #C9A84C;
    --accent-hover:     #b0902f;
    --accent-light:     #ddc47e;

    /* Achtergronden */
    --bg-page:          #F8F3F5;   /* warm gebroken wit */
    --bg-card:          #FFFFFF;
    --bg-soft:          #FAF6F7;   /* vlakken binnen een kaart */
    --bg-softer:        #F3ECEE;
    --bg-input:         #FFFFFF;
    --bg-table-head:    var(--primary);
    --bg-table-stripe:  #FAF6F7;
    --bg-table-hover:   #F3ECEE;

    /* Tekst */
    --text-primary:     #2C2C2C;
    --text-secondary:   #555555;
    --text-muted:       #777777;
    --text-on-dark:     #F8F3F5;
    --text-on-accent:   #3A1020;   /* donker bordeaux op goud: goed leesbaar */

    /* Randen */
    --border-color:     #E3DCDF;

    /* Status */
    --success-color:    #2e7d32;
    --success-hover:    #1b5e20;
    --danger-color:     #c62828;
    --danger-hover:     #8e0000;
    --warning-color:    #f57f17;
    --info-color:       #1565c0;
    --info-hover:       #0d47a1;

    --card-shadow:      0 2px 8px rgba(44,44,44,0.10);

    --font-heading:     'Playfair Display', Georgia, serif;
    --font-body:        'Inter', Arial, sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-page);
    color: var(--text-primary);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary);
}

a { color: var(--primary); }

/* Tabellen: bordeaux kop met lichte tekst en een gouden lijn eronder, zoals in de ledenmanager */
thead, thead th { background-color: var(--bg-table-head); color: var(--text-on-dark); }
thead th { border-bottom: 2px solid var(--accent); }
thead th a { color: var(--accent-light); }
tbody td { border-bottom: 1px solid var(--border-color); }

/* Knoppen: goud met donkere tekst */
.button, button, .edit-button, .delete-button, .btn-link, input[type="submit"] {
    font-family: var(--font-body);
    font-weight: 600;
}

/* Invoervelden */
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="tel"],
input[type="email"], select, textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }