/* ============================================================
   main.css – Globale stijlen
   Arvalo Route Planner (ARP)
   ============================================================ */

/* ── CSS variabelen ──────────────────────────────────────────── */
:root {
    /* Kleuren -- retint naar het "Instrumentenbord"-systeem (racing
       green/koper/kalksteen/bordeauxrood, zie css/admin.css). Zelfde
       hefboom-truc als de vorige restyle hier (zie git-historie):
       --color-primary/--color-bg zijn waar bijna elke pagina/knop in de
       app al op leunt, dus alleen deze tokens aanpassen re-skint het
       grootste deel van de site (browser.php/route.php/track.php/
       tracklogs.php/about.php/view_route.php) automatisch -- geen
       component-CSS hoeft aangeraakt. De al herontworpen pagina's
       (admin/profiel/vrienden/login) draaien op hun EIGEN --at-*-tokens
       in css/admin.css, dus die blijven ongemoeid door deze wijziging.
    */
    --color-primary:       #2F4A3C;   /* racing green (was marineblauw #1E2A47) */
    --color-primary-dark:  #203228;   /* donkerder racing green, hover          */
    --color-primary-light: #DCE6DC;   /* lichte groentint, hover-bg             */
    --color-bg:            #EDE7D8;   /* kalksteen/papier (was mintgroen)       */
    --color-surface:       #F7F3E8;   /* iets lichter papier, kaarten/panelen   */
    --color-border:        #D9D0BB;
    --color-text:          #2B2621;
    --color-muted:         #766C5C;
    --color-secondary-bg:  #E3DCC7;   /* inactieve/secundaire knoppen */
    --color-danger:        #A23B28;   /* koper-bordeaux/roest, reset/verwijder-KNOPPEN */
    --color-danger-dark:   #7E2E20;   /* donkerder roest, hover */
    --color-danger-border: #DFB4A6;
    --color-danger-bg:     #F3E1DA;
    --color-error:         #A23B28;   /* zelfde roest -- blijft ook voor meldingen/validatie, geen knoppen */
    --color-error-bg:      #F3E1DA;
    --color-error-border:  #DFB4A6;
    --color-success:       #2F4A3C;
    --color-success-bg:    #DCE6DC;
    --color-success-border:#2F4A3C;
    --color-accent:        #A8763A;   /* koper -- accentkleur voor grafieken/highlights, zelfde als --at-brass in css/admin.css */
    --color-accent-dark:   #8A5F2C;

    /* Typografie -- Archivo i.p.v. Segoe UI, zelfde body-lettertype als
       het admin/profiel/vrienden/login-systeem. --font-display is nieuw,
       alleen gebruikt voor het merk in de kop-balk (zie .brand-name in
       css/browser.css) -- de Google Fonts <link> ervoor staat (nog) alleen
       op browser.php zelf. */
    --font-sans: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont,
                 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

    /* Vormen -- iets minder rond, meer "instrumentenpaneel" dan voorheen */
    --radius:    7px;
    --radius-lg: 10px;

    /* Schaduwen -- warmere tint (bruin i.p.v. neutraal zwart) */
    --shadow:    0 1px 2px rgba(38,32,24,.10), 0 2px 6px rgba(38,32,24,.07);
    --shadow-lg: 0 8px 24px rgba(38,32,24,.16), 0 2px 8px rgba(38,32,24,.10);
}

/* ── Donker thema ────────────────────────────────────────────── */
body.dark {
    --color-primary-light: #26352C;
    --color-bg:            #1A1E1B;
    --color-surface:       #232823;
    --color-border:        #3A4038;
    --color-text:          #EAE4D4;
    --color-muted:         #97927F;
    --color-secondary-bg:  #2C322B;
    --color-error-bg:      #3A241E;
    --color-error-border:  #5C382D;
    --color-success-bg:    #26352C;
    --color-success-border:#6FA283;
    --color-accent:        #D8A85B;
    --color-accent-dark:   #B8863B;
    --shadow:    0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 0.9375rem;   /* 15px */
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

/* ── Typografie ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-text);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img, svg {
    display: block;
    max-width: 100%;
}

/* ── Utility ─────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}