/*********************************************/
/*  theme.css                                */
/*-------------------------------------------*/
/*           This file is part of:           */
/*               Hope4KidsBS5                */
/*       based on 2shine (2shine.org)        */
/*-------------------------------------------*/
/*  Runtime design tokens. Aanpasbaar op de  */
/*  server zonder rebuild. Waarden komen     */
/*  uit het Figma-bestand — zie              */
/*  docs/design-tokens.md                    */
/*********************************************/

:root,
[data-bs-theme="default-theme"] {

  /* ============ MERKKLEUREN ============ */
  /* Figma: Foundation/Light blue/Brand colour */
  --bond-blue: #6487D1;
  --bond-blue-600: #5B7BBE;
  --bond-blue-400: #839FDA;
  --bond-blue-100: #CFDAF1;
  --bond-blue-50: #F0F3FA;
  --bond-blue-tint: #E1E7F3;

  /* Figma: Foundation/Dark blue/Brand colour */
  --bond-navy: #2A2575;
  --bond-navy-600: #26226A;
  --bond-navy-100: #BDBBD4;

  /* Achtergronden */
  --bond-cream: #F7F2E7;      /* paginaachtergrond */
  --bond-cream-alt: #FBF8F1;  /* tweede crèmetint */
  --bond-surface: #FDFBF7;    /* witte kaarten (Figma: Backround 1) */

  /* Semantisch — gebruik deze in componenten, niet de kleuren hierboven */
  --bond-bg: var(--bond-cream);
  --bond-text: var(--bond-navy);
  --bond-heading: var(--bond-blue);
  --bond-on-dark: #FFFFFF;

  /* LET OP: wit op --bond-blue haalt 3.54:1 en dus geen WCAG AA voor normale
     tekst. Gebruik voor vlakken met lopende tekst --bond-panel-dark.
     Zie docs/design-tokens.md, bevinding 1. */
  --bond-panel: var(--bond-blue);
  --bond-panel-dark: var(--bond-navy);

  /* ============ TYPOGRAFIE ============ */
  --bond-font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bond-font-heading: "Lora", Georgia, "Times New Roman", serif;

  /* Type-schaal uit Figma (Hope4Kids.fig). clamp() = mobiel -> desktop.
     De mobiele maten voor H1/H2/H3 staan als eigen stijl in het ontwerp
     (H1-mobile 40, H2-mobile 32, H3-Mobile 24); H4 en H5 zijn daarop
     geschaald, want die hebben geen mobiele variant. */
  --bond-h1: clamp(2.5rem, 1.99rem + 2.16vw, 3.9375rem);    /* 40 -> 63 */
  --bond-h2: clamp(2rem, 1.65rem + 1.50vw, 3rem);           /* 32 -> 48 */
  --bond-h3: clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem);      /* 24 -> 36 */
  --bond-h4: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem);     /* 20 -> 28 */
  --bond-h5: clamp(1.125rem, 0.99rem + 0.56vw, 1.5rem);     /* 18 -> 24 */

  /* Bodytekst is 16px. In de vorige export was dat 18; op de bijgewerkte
     schermen (Landing page, About the project) staat nu overal 16. De 18px
     komt alleen nog voor op Work packages horizontal, dat niet is herzien. */
  --bond-body: 1rem;       /* 16px */
  --bond-body-lg: 1.125rem;/* 18px -- alleen waar het ontwerp dat nog gebruikt */
  --bond-small: 0.875rem;  /* 14px */
  --bond-button: 1rem;     /* 16px, SemiBold */

  /* Figma zet alles op 1.2. Voor koppen klopt dat; voor lopende tekst is het
     te krap (WCAG 1.4.8 houdt 1.5 aan). Zet op 1.2 om het ontwerp exact te volgen. */
  --bond-line-height-heading: 1.2;
  --bond-line-height-body: 1.6;

  --bond-weight-heading: 700;  /* Lora Bold */
  --bond-weight-body: 400;
  --bond-weight-strong: 600;   /* Noto Sans SemiBold */

  /* ============ RADII ============ */
  --bond-radius-card: 36px;    /* grote contentkaarten */
  --bond-radius-card-sm: 24px; /* logovlakken */
  --bond-radius-media: 16px;   /* thumbnails, artikelkaarten */
  --bond-radius-panel: 17px;   /* footer, kaartblokken */
  --bond-radius-nav: 10px;
  --bond-radius-pill: 999px;

  /* ============ SPACING ============ */
  /* Gelijk aan de Bootstrap-standaardschaal, zoals in de KPAL-skin. Zo doet
     mb-3 wat je verwacht (1rem) en is er maar een spacingsysteem.
     De twee grootste stappen bestaan niet in Bootstrap en zijn toegevoegd
     voor de sectie-afstanden uit het ontwerp (Figma: 122px). */
  --bond-space-xs: 0.5rem;    /*   8  = spacer 2 */
  --bond-space-sm: 1rem;      /*  16  = spacer 3 */
  --bond-space-md: 1.5rem;    /*  24  = spacer 4 */
  --bond-space-lg: 3rem;      /*  48  = spacer 5 */
  --bond-space-xl: 6rem;      /*  96  = spacer 6 */
  --bond-space-2xl: 7.5rem;   /* 120  = spacer 7 */

  /* ============ VERTICALE RITMIEK ============ */
  /* De ruimte boven en onder elk blok. Twee blokken op elkaar geven dus het
     dubbele: 2x60 = 120px, de sectie-afstand uit het ontwerp.
     Dit is de enige plek waar die ruimte staat -- container, lichte band en
     hero gebruiken allemaal dit token, zodat het overal gelijk is. */
  --bond-block-space: 1.5rem;

  /* Extra lucht onder de hero. Het ontwerp heeft daar 80px in plaats van de
     60px die tussen gewone blokken staat. */
  --bond-hero-space-after: 0;

  /* ============ COMPONENT: HERO ============ */
  /* Bovengrens voor de hoogte van de hero, als deel van de schermhoogte.
     Zonder grens vult hij op 1920x1080 bijna het hele scherm.
     Lager = meer van de pagina eronder zichtbaar. */
  --bond-hero-max-height: 70vh;

  /* Welk deel van de achtergrondfoto in beeld blijft. De hero is breder dan
     hoog, dus er valt boven en onder iets weg.
       0%   bovenkant van de foto tegen de bovenrand -- foto staat het laagst
       25%  huidige instelling
       50%  midden (browserstandaard)
     Aanpasbaar zonder rebuild. */
  --bond-hero-image-position: center 25%;

  /* ============ COMPONENT: KAART ============ */
  /* Gemeten in Figma op de contentkaarten (Who we are, Our key aims,
     Expected results, de WP-kaarten): 24px horizontaal, 32px verticaal,
     32px tussen blokken. 32px zit niet op de spacingschaal en is daarom
     een eigen componenttoken. */
  --bond-card-padding-x: 1.5rem;  /* 24 */
  --bond-card-padding-y: 2rem;    /* 32 */
  --bond-card-gap: 2rem;          /* 32 */
  --bond-card-bg: var(--bond-surface);

  /* De blauwe kaartvariant. Wit op --bond-blue haalt 3.54:1 en dus geen
     WCAG AA voor lopende tekst. Zodra daarover besloten is, is dit de enige
     regel die hoeft te wijzigen: zet er var(--bond-navy) neer en de hele
     variant is toegankelijk. Zie docs/terugkoppeling-ontwerp.md punt 1. */
  --bond-card-blue-bg: var(--bond-blue);

  /* ============ BOOTSTRAP KOPPELEN ============ */
  --bs-primary: var(--bond-blue);
  --bs-secondary: var(--bond-navy);
  --bs-body-bg: var(--bond-bg);
  --bs-body-color: var(--bond-text);

  --bs-body-font-family: var(--bond-font-body);
  --bs-body-font-size: var(--bond-body);
  --bs-body-font-weight: var(--bond-weight-body);
  --bs-body-line-height: var(--bond-line-height-body);

  --bs-border-radius: var(--bond-radius-media);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--bond-radius-panel);
  --bs-border-radius-xl: var(--bond-radius-card-sm);
  --bs-border-radius-xxl: var(--bond-radius-card);

  --bs-link-color: var(--bond-navy);
  --bs-link-hover-color: var(--bond-blue-600);

  /* Thema-vlakken (bestaande hooks van dit thema) */
  --theme-backdrop-bg: var(--bond-cream);
  --theme-page-main-bg: var(--bond-cream);
  --theme-breadcrumb-bg: var(--bond-cream);
  /* De navigatiebalk ligt over het herobeeld heen, dus de afronding onderaan
     tekent zich af tegen de foto. */
  --theme-nav-bg: var(--bond-surface);
  --theme-footer-bg: var(--bond-blue);
  --theme-font: var(--bond-font-body);
  --theme-font-headlines: var(--bond-font-heading);

  /* ============ SCHADUWEN ============ */
  /* Het ontwerp gebruikt vlakken zonder schaduw; bewust subtiel gehouden. */
  --bs-box-shadow-sm: 0 1px 2px rgba(42, 37, 117, 0.06);
  --bs-box-shadow: 0 4px 16px rgba(42, 37, 117, 0.08);
  --bs-box-shadow-lg: 0 12px 40px rgba(42, 37, 117, 0.12);

  /* ============ COMPONENTEN ============ */
  .breadcrumb {
    --bs-breadcrumb-font-size: var(--bond-small);
  }

  /* Gevulde navy pill — "For Families", "Horizontal Work Packages" */
  .btn-primary {
    --bs-btn-color: var(--bond-on-dark);
    --bs-btn-bg: var(--bond-navy);
    --bs-btn-border-color: var(--bond-navy);
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-navy-600);
    --bs-btn-hover-border-color: var(--bond-navy-600);
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-navy-600);
    --bs-btn-active-border-color: var(--bond-navy-600);
    --bs-btn-disabled-color: var(--bond-on-dark);
    --bs-btn-disabled-bg: var(--bond-navy-100);
    --bs-btn-disabled-border-color: var(--bond-navy-100);
  }

  /* Blauwe pill */
  .btn-secondary {
    --bs-btn-color: var(--bond-on-dark);
    --bs-btn-bg: var(--bond-blue);
    --bs-btn-border-color: var(--bond-blue);
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-blue-600);
    --bs-btn-hover-border-color: var(--bond-blue-600);
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-blue-600);
    --bs-btn-active-border-color: var(--bond-blue-600);
    --bs-btn-disabled-color: var(--bond-on-dark);
    --bs-btn-disabled-bg: var(--bond-blue-100);
    --bs-btn-disabled-border-color: var(--bond-blue-100);
  }

  /* Witte outline pill — footernavigatie op blauw */
  .btn-outline-light {
    --bs-btn-color: var(--bond-navy);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-navy);
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-navy);
    --bs-btn-active-border-color: #FFFFFF;
  }

  .btn-outline-primary {
    --bs-btn-color: var(--bond-navy);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bond-navy);
    --bs-btn-hover-color: var(--bond-on-dark);
    --bs-btn-hover-bg: var(--bond-navy);
    --bs-btn-hover-border-color: var(--bond-navy);
    --bs-btn-active-color: var(--bond-on-dark);
    --bs-btn-active-bg: var(--bond-navy);
    --bs-btn-active-border-color: var(--bond-navy);
  }

  .footer {
    --bs-link-color: var(--bond-on-dark);
    --bs-link-hover-color: var(--bond-blue-100);
  }

  .navbar-nav {
    --bs-nav-link-color: var(--bond-blue);
    --bs-nav-link-hover-color: var(--bond-navy);
    --bs-navbar-active-color: var(--bond-navy);
  }

  .table {
    --bs-table-bg: var(--bond-surface);
  }
}