/*
 * Switch Volley Stars — design tokens
 * -----------------------------------
 * Kleuren komen uit het officiele Volley Stars-logo van de Nevobo
 * (navy #27285B, oranje #EC6724, teal #12AA9E). Wit is de basis;
 * navy draagt de structuur, oranje is het enige accent.
 */

:root {
    /* Merk */
    --vs-navy:          #27285B;
    --vs-navy-dark:     #1B1C42;
    --vs-navy-soft:     #ECEDF4;
    --vs-orange:        #EC6724;
    --vs-orange-dark:   #D1541A;
    --vs-orange-soft:   #FDF0E8;
    /* Oranje als tekstkleur op een lichte ondergrond. --vs-orange haalt op wit maar
       3,2:1 en zakt daarmee door de 4,5:1 die kleine tekst nodig heeft; deze tint
       haalt 5,2:1 op wit en 4,8:1 op de grijze paginakleur. */
    --vs-orange-tekst:  #B84A0E;
    --vs-teal:          #12AA9E;
    --vs-teal-soft:     #E7F7F5;

    /* Vlakken */
    --bg:               #FFFFFF;
    --surface:          #FFFFFF;
    --surface-2:        #F4F5F8;
    --surface-3:        #E9EBF1;

    /* Tekst */
    --text:             #1E2038;
    --muted:            #5A6078;
    --subtle:           #8B90A6;
    --on-dark:          #FFFFFF;
    --on-dark-muted:    rgba(255, 255, 255, 0.72);

    /* Lijnen en schaduwen */
    --border:           rgba(39, 40, 91, 0.10);
    --border-strong:    rgba(39, 40, 91, 0.20);
    --shadow-sm:        0 1px 2px rgba(39, 40, 91, 0.05), 0 1px 3px rgba(39, 40, 91, 0.06);
    --shadow-card:      0 1px 2px rgba(39, 40, 91, 0.05), 0 4px 12px rgba(39, 40, 91, 0.07);
    --shadow-md:        0 4px 14px rgba(39, 40, 91, 0.10);
    --shadow-float:     0 10px 30px rgba(39, 40, 91, 0.16);

    /* Status */
    --ok:               #12AA9E;
    --ok-soft:          #E7F7F5;
    --warn:             #F59E0B;
    --warn-soft:        #FEF6E7;
    --danger:           #DC2626;
    --danger-soft:      #FDECEC;

    /* Vorm */
    --r-sm:  6px;
    --r-md:  8px;
    --r-lg:  10px;
    --r-xl:  14px;
    --r-pill: 999px;

    /* Beweging */
    --t-fast: 0.12s cubic-bezier(.4, 0, .2, 1);
    --t-med:  0.2s cubic-bezier(.4, 0, .2, 1);

    /* Level-tint; per pagina overschreven met de kleur van dat level */
    --level: var(--vs-orange);

    /* Onderbalk. De offset wordt door JS gezet zodat de balk aan de
       visuele viewport hangt en op iOS niet meespringt met de adresbalk. */
    --nav-safe:   max(14px, env(safe-area-inset-bottom, 0px));
    --nav-height: calc(58px + var(--nav-safe));
    --nav-offset: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    background: var(--surface-2);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

@media (min-width: 760px) { body { font-size: 15px; } }

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: var(--vs-orange); text-decoration: none; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
button { border: 0; background: none; cursor: pointer; touch-action: manipulation; }

:focus-visible {
    outline: 3px solid rgba(236, 103, 36, 0.35);
    outline-offset: 2px;
}

/* iOS zoomt in op velden onder 16px. Alleen de pill-selects zijn
   uitgezonderd; die zijn breed genoeg om niet te triggeren. */
@media (max-width: 759px) {
    input:not(.pill-select), select:not(.pill-select), textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}