/*********************************************/
/*  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. clamp() = mobiel -> desktop.
     De mobiele H2 (32px) staat zo in het ontwerp; de rest is daarop geschaald. */
  --bond-h1: clamp(2.25rem, 1.30rem + 4.22vw, 3.9375rem);  /* 36 -> 63 */
  --bond-h2: clamp(2rem, 1.55rem + 2.00vw, 3rem);          /* 32 -> 48 */
  --bond-h3: clamp(1.75rem, 1.47rem + 1.25vw, 2.25rem);    /* 28 -> 36 */
  --bond-h4: clamp(1.5rem, 1.36rem + 0.63vw, 1.75rem);     /* 24 -> 28 */
  --bond-h5: clamp(1.25rem, 1.11rem + 0.63vw, 1.5rem);     /* 20 -> 24 */
  --bond-body: 1.125rem;   /* 18px */
  --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 */

  /* ============ 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);
  --theme-nav-bg: #FFFFFF;
  --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);
  }
}