/* ============================================================================
THEMA — Robin Hood Boechout
----------------------------------------------------------------------------
Dit is het ENIGE bestand met kleurwaarden. In css/app.css staat geen enkele
hex-code: alles verwijst hiernaar. Wil je iets van kleur veranderen, doe dat
hier en het slaat overal door, ook in de logo's en de grafiek (die zijn
inline SVG en lezen dezelfde variabelen).
Twee dingen die NIET automatisch meegaan, omdat een manifest en meta-tags
geen CSS kunnen lezen:
- de in index.html
- "background_color" en "theme_color" in manifest.webmanifest
Pas je --bg aan, pas die drie dan handmatig mee aan.
============================================================================ */
:root {
/* --- 1. VLAKKEN EN TEKST -------------------------------------------------
Diep sparrengroen-navy. Donker werkt goed op OLED en spaart batterij
tijdens een lange schietbeurt. Wil je een lichte variant: zie het blok
"LICHTE VARIANT" onderaan dit bestand. */
--bg: #0B1A22; /* paginagrond */
--surface: #142B37; /* kaarten */
--surface-raised:#1C3B4A; /* velden, toetsen, verhoogde vlakken */
--surface-sunken:#0F222C; /* tabelkoppen, totaalrijen */
--line: #27505F; /* randen en scheidingslijnen */
--text: #E8F1F4; /* normale tekst */
--text-soft: #B4C8D1; /* secundaire tekst */
--text-dim: #7C97A3; /* labels, hints, uitgeschakelde tekst */
/* --- 2. BLAZOENRINGEN = PIJLWAARDE -------------------------------------
Dit is geen decoratie maar betekenis: elke schutter leest deze kleuren
zonder uitleg. Ze komen ALLEEN voor op pijlen en het keypad. Verander ze
alleen als de club met een ander blazoen schiet. */
--ring-gold: #FFC93C; /* X, 10, 9 */
--ring-gold-ink: #2A1C00; /* tekst op goud */
--ring-red: #E8412E; /* 8, 7 */
--ring-red-ink: #FFFFFF;
--ring-blue: #2D8CD6; /* 6, 5 */
--ring-blue-ink: #FFFFFF;
--ring-black: #0A141A; /* 4, 3 */
--ring-black-ink:#E8F1F4;
--ring-white: #EFF5F7; /* 2, 1 */
--ring-white-ink:#0B1A22;
/* --- 3. CERTIFICATEN ---------------------------------------------------- */
--bronze: #C97B3E;
--bronze-text: #E0975A; /* leesbaarder op donkere grond dan --bronze */
--silver: #BFCDD4;
--cert-gold: #FFC93C; /* apart van --ring-gold zodat je het los kan
bijstellen zonder de pijlwaarden te raken */
/* --- 4. STATUSKLEUREN --------------------------------------------------
Elke kleur heeft precies één betekenis. Een magenta element in beeld
betekent altijd "persoonlijk record", nooit iets anders. */
--pr: #FF3D9A; /* persoonlijk record */
--pr-ink: #2A0014;
--go: #00D48A; /* primaire actie, succes, "opgeslagen" */
--go-ink: #052019;
--go-glow: rgba(0, 212, 138, .24);
--warn: #FF9B3D; /* waarschuwing, onomkeerbare actie */
--warn-ink: #2A1200;
/* --- 5. DOORSCHIJNENDE LAGEN ------------------------------------------ */
--overlay: rgba(4, 12, 16, .72); /* achter een modal */
--nav-bg: rgba(15, 34, 44, .94); /* onderbalk, met blur */
--badge-tint: .16; /* dekking van badge-achtergrond */
--shadow: 0 10px 30px rgba(0, 0, 0, .35);
/* --- 6. VORM ------------------------------------------------------------
Bewust niet één radius voor alles: de scorekaart is een papieren
artefact met een strak raster, geen zachte kaart. */
--r-card: 16px;
--r-field: 12px;
--r-key: 12px;
--r-hero: 22px; /* het scoreblok bovenaan de invoer */
--r-sheet: 8px; /* scorekaart */
--r-pill: 999px;
/* --- 7. RUIMTE --------------------------------------------------------- */
--gap-xs: 6px;
--gap-sm: 9px;
--gap: 12px;
--gap-lg: 16px;
--pad-screen: 16px;
--app-max: 430px; /* de app is één telefoonkolom, geen desktoplayout */
/* --- 8. TYPOGRAFIE ----------------------------------------------------
Barlow Condensed voor scoregetallen en titels: smal en scorebordachtig,
en een driecijferig getal mag groot zijn zonder de kaart op te eten.
Barlow voor alles wat je leest. Eén superfamilie, twee breedtes. */
--font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
--tap-min: 44px; /* nooit kleiner, ook niet met handschoenen aan */
--tap-key: 62px; /* keypadtoets */
--tap-btn: 54px; /* primaire knop */
/* --- 9. TWEE WAARDEN DIE GEEN var() KUNNEN GEBRUIKEN ------------------
Een data-URI kan geen var() bevatten, dus de kleur van het select-pijltje
staat hier letterlijk. Pas je --text-dim aan, werk dan %237C97A3 mee bij
(dat is #7C97A3, URL-gecodeerd). */
--chevron: url("data:image/svg+xml;utf8,");
--chevron-sm: url("data:image/svg+xml;utf8,");
/* --- 10. GOOGLE-KNOP ---------------------------------------------------
Wit met donkere tekst is voorgeschreven door Google's branding
guidelines. Niet aanpassen zonder hun richtlijnen na te lezen. */
--google-btn-bg: #FFFFFF;
--google-btn-ink: #1F1F1F;
}
/* ============================================================================
LICHTE VARIANT
----------------------------------------------------------------------------
Donker is standaard, maar bij fel zonlicht op het veld is licht leesbaarder.
Wil je dat proberen: haal het commentaar weg. De ringkleuren blijven
ongewijzigd, want die zijn betekenis en niet stijl.
:root {
--bg: #F4F7F9;
--surface: #FFFFFF;
--surface-raised: #EDF2F5;
--surface-sunken: #E4EBEF;
--line: #CFDBE2;
--text: #0B1A22;
--text-soft: #3E5561;
--text-dim: #6B8492;
--bronze-text: #A85F26;
--go-ink: #FFFFFF;
--go: #00A86F;
--overlay: rgba(11, 26, 34, .45);
--nav-bg: rgba(255, 255, 255, .94);
--badge-tint: .14;
--shadow: 0 10px 30px rgba(11, 26, 34, .12);
}
============================================================================ */