/*
 * Magneet Pure — Klant-customizations
 *
 * Pas hier project-specifieke styling aan, NIET in style.css.
 * Bij theme-update overschrijft style.css, dit bestand blijft behouden.
 *
 * Pattern: alle aanpassingen via CSS custom properties (`:root` overrides).
 *
 * Volgorde:
 *   1. Brand kleuren
 *   2. Typografie (fonts, optioneel grootte-scaling)
 *   3. Spacing / radius (zelden nodig)
 *   4. Component overrides (alleen in uitzonderlijke gevallen)
 *
 * @package MagneetPure
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. BRAND KLEUREN
   ═══════════════════════════════════════════════════════════════════════
   
   Default in style.css zijn neutraal (zwart/grijs). 
   Vervang minstens primary + accent voor herkenbare branding.
   
   Tip: Gebruik tools als coolors.co of palettes.shecodes.io om consistente
   kleurensets te genereren. Test contrast op contrast-ratio.com.
*/

:root {
    /* Primaire kleur — buttons, links, focus states */
    /* --color-primary:        #000000; */
    /* --color-primary-hover:  #1a1a1a; */
    /* --color-primary-light:  rgba(0, 0, 0, 0.06); */

    /* Secondaire kleur — minder dominant, gebruikt voor outlines/accenten */
    /* --color-secondary:       #555555; */
    /* --color-secondary-hover: #333333; */

    /* Accent kleur — voor highlights, badges, attention-grabbers */
    /* --color-accent:        #ff3300; */
    /* --color-accent-hover:  #cc2900; */
}


/* ═══════════════════════════════════════════════════════════════════════
   2. TYPOGRAFIE
   ═══════════════════════════════════════════════════════════════════════
   
   Default gebruikt system fonts. Vervang voor klant-specifiek lettertype.
   Upload webfont eerst via Bricks → Custom Fonts (of ander mechanisme),
   dan hier de var aanpassen.
*/

:root {
    /* Primaire body font (lopende tekst) */
    /* --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */

    /* Secondaire (headings) — kan zelfde zijn als primary */
    /* --font-secondary: 'Playfair Display', Georgia, serif; */

    /* Monospace (code blocks) */
    /* --font-mono: 'JetBrains Mono', ui-monospace, monospace; */
}


/* ═══════════════════════════════════════════════════════════════════════
   3. SPACING & RADIUS (zelden nodig)
   ═══════════════════════════════════════════════════════════════════════
   
   Default radius is 8px. Voor meer "gerond" / playful: 16px+.
   Voor zakelijke / strak: 4px of 0.
*/

:root {
    /* --radius-sm:   4px; */
    /* --radius-md:   8px; */
    /* --radius-lg:  16px; */
    /* --radius-xl:  24px; */
    /* --radius-full: 999px; */

    /* Container max-width — default 1280px */
    /* --container-max: 1280px; */
}


/* ═══════════════════════════════════════════════════════════════════════
   4. COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════════════
   
   Alleen als CSS variabelen niet genoeg zijn. Bij voorkeur bug-fix /
   project-uitzondering. Niet hier hele blokken herschrijven.
*/

/* Voorbeeld: button met extra subtle shadow voor klant X
.pri-cta {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
*/


/* ═══════════════════════════════════════════════════════════════════════
   PRINT STYLES (klant-specifiek logo, etc.)
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    /* Project-specifieke print overrides */
}