/* ============================================================
   IUASR Website — Design Tokens
   v1.0 — IUASR Corporate Identity v1.0.1 (2024-09)
   ------------------------------------------------------------
   Dit bestand is dé bron van waarheid voor kleur, type, ruimte,
   radii, schaduw en motion van de PUBLIEKE WEBSITE (iuasr.nl).

   Herkomst: overgenomen van het registratieportaal
   (iuasr-portal-tokens.css) en daarna eigendom van DEZE site.
   De website mag hier afwijken van het portaal waar de nieuwe
   ontwerpen daarom vragen. Refereer NIET naar het portaalbestand.

   Twee lagen:
     LAAG 1 — Brand-tokens, exact zoals op iuasr.nl. Niet aanpassen.
     LAAG 2 — Semantische site-tokens. Refereren altijd aan laag 1.
              Pas hier aan voor site-specifieke UX.
   ============================================================ */

:root {

  /* ============================================================
     LAAG 1 — IUASR BRAND TOKENS (1:1 met de huisstijl)
     ============================================================ */

  /* Primair — indigo (Pantone 2765 C · #201547) */
  --priColor100: rgba(32, 21, 71, 1);       /* #201547 — kern */
  --priColor101: rgba(32, 21, 71, 0.03);    /* zeer subtiele tint */
  --priColor102: rgba(32, 21, 71, 0.06);    /* lichte tint */
  --priColor103: rgb(242, 241, 244);        /* #F2F1F4 — pagina-bg */
  --priColor104: rgba(242, 241, 244, 0.75);
  --priColor105: rgba(250, 250, 250, 0.75);
  --priColor106: rgba(242, 241, 244, 0.5);

  /* Secundair — crimson (186 C), grijs, peach */
  --secColor100: rgba(200, 16, 46, 1);      /* #C8102E — crimson */
  --secColor200: rgba(222, 222, 222, 1);    /* #DEDEDE */
  --secColor201: #F4F4F4;
  --secColor300: rgba(255, 210, 176, 1);    /* #FFD2B0 — peach */
  --secColor301: rgba(255, 210, 176, 0.3);
  --secColor302: rgba(255, 210, 176, 0.6);
  --secColor303: rgba(255, 210, 176, 0.8);

  /* Officiële merkkleuren — uit Corporate Identity v1.0.1 */
  --priColor200: #285C4D;                   /* Pantone 626 C — heritage groen */
  --priColor201: rgba(40, 92, 77, 0.06);
  --priColor202: rgba(40, 92, 77, 0.10);
  --priColor300: #D69A2D;                   /* Pantone 7563 C — goud */
  --priColor301: rgba(214, 154, 45, 0.10);
  --priColor302: rgba(214, 154, 45, 0.18);

  /* Hero-overlay indigo (donkerder dan #201547, uit homepage-ontwerp) */
  --heroOverlay: #10044A;

  /* Borders & overlays */
  --borderSubtleColor: rgba(32, 21, 71, 0.09);
  --borderColor:       rgba(32, 21, 71, 0.2);
  --white070:          rgba(255, 255, 255, 0.7);
  --black085:          rgba(0, 0, 0, 0.85);
  --blackAltText:      #6F6F6F;

  /* Fonts (exact zoals geladen op iuasr.nl) */
  --sans-serif-font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --serif-font:      "DM Serif Display", serif;
  --arabic-font:     "Reem Kufi", "Cairo", sans-serif;

  /* Layout-tokens */
  --unit: 1em;
  --spacing: 1em;
  --unitSize: 4px;
  --container-max: 1240px;            /* publieke site container (homepage v3) */
  --container-pad: 32px;
  --button-border-radius: 2px;        /* SITE-BREED — gereconcilieerd naar 2px (homepage v3). */
  --menu-header-height: 80px;
  --menu-header-spacer-width: 1em;
  --headlines-height: 18em;

  /* Logo-hoogtes — paritair met inschrijving.iuasr.nl (portal). */
  --logo-header-h: 96px;   /* header-logo rendert op * 0.72 ≈ 69px */
  --logo-footer-h: 96px;

  /* Spacing-schaal */
  --space-xs: 10px;
  --space-sm: 18px;
  --space-md: 32px;
  --space-lg: 44px;
  --space-xl: 64px;
  --space-section: 96px;              /* verticaal ritme tussen secties (homepage v3) */

  /* ============================================================
     LAAG 2 — SEMANTISCHE SITE-TOKENS
     Aliassen naar laag 1 met site-context.
     ============================================================ */

  /* ---- Kleur-rollen ---- */
  --iuasr-bg-page:        #FFFFFF;                       /* publieke site: wit basisvlak */
  --iuasr-bg-alt:         var(--priColor103);            /* #F2F1F4 — afwisselende secties */
  --iuasr-bg-card:        #FFFFFF;
  --iuasr-bg-surface-alt: var(--priColor102);
  --iuasr-bg-emphasis:    var(--priColor101);
  --iuasr-bg-callout:     var(--secColor301);            /* peach 30% */
  --iuasr-bg-callout-strong: var(--secColor300);         /* peach 100% */
  --iuasr-bg-dark:        var(--priColor100);            /* indigo secties (donate, footer) */
  --iuasr-bg-footer:      var(--priColor100);

  --iuasr-text-default:   var(--priColor100);            /* #201547 als hoofdtekst */
  --iuasr-text-muted:     var(--blackAltText);           /* #6F6F6F */
  --iuasr-text-inverse:   var(--priColor103);            /* #F2F1F4 op donker */
  --iuasr-text-brand:     var(--priColor100);
  --iuasr-text-link:      var(--secColor100);            /* crimson links */
  --iuasr-text-link-hover:#9A0C24;
  --iuasr-text-on-dark-accent: var(--secColor300);       /* peach accent op indigo */

  --iuasr-border-subtle:  var(--borderSubtleColor);
  --iuasr-border-default: var(--borderColor);
  --iuasr-border-focus:   var(--secColor100);

  /* Officiële secundaire merkkleuren — voor publicaties, covers, sub-merken */
  --iuasr-brand-green:  var(--priColor200);              /* IUR Press green cover */
  --iuasr-brand-gold:   var(--priColor300);              /* sub-brand accent */
  --iuasr-brand-green-soft: var(--priColor201);
  --iuasr-brand-gold-soft:  var(--priColor301);

  /* ---- Knoppen ---- */
  --iuasr-btn-radius:        var(--button-border-radius); /* 2px — site-breed, geen per-pagina override */
  --iuasr-btn-primary-bg:    var(--secColor100);          /* crimson */
  --iuasr-btn-primary-fg:    var(--priColor103);
  --iuasr-btn-primary-hover: #9A0C24;
  --iuasr-btn-secondary-fg:     var(--secColor100);
  --iuasr-btn-secondary-border: var(--secColor100);
  --iuasr-btn-link-fg:       var(--priColor100);          /* indigo voor inline links */

  /* ---- Typografie ---- */
  --iuasr-font-display: var(--serif-font);
  --iuasr-font-body:    var(--sans-serif-font);

  /* Schaal */
  --iuasr-text-xs:      0.75rem;     /* 12px */
  --iuasr-text-sm:      0.875rem;    /* 14px */
  --iuasr-text-base:    1rem;        /* 16px — site p */
  --iuasr-text-lg:      1.125rem;    /* 18px — site h4 */
  --iuasr-text-xl:      1.2rem;      /* 19.2px — site h3 */
  --iuasr-text-2xl:     1.5rem;      /* 24px — site h2 */
  --iuasr-text-3xl:     2.4rem;      /* 38.4px — site h1 (content) */
  --iuasr-text-display: 3.75rem;     /* 60px — homepage hero h1 */

  --iuasr-lh-xs:        16px;
  --iuasr-lh-sm:        20px;
  --iuasr-lh-base:      24px;
  --iuasr-lh-lg:        22px;
  --iuasr-lh-xl:        23px;
  --iuasr-lh-2xl:       29px;
  --iuasr-lh-3xl:       46px;

  /* Body weight: marketing-tekst = 200/300, UI/formulieren = 400. */
  --iuasr-weight-body:    400;
  --iuasr-weight-body-light: 300;
  --iuasr-weight-body-x-light: 200;  /* match-site display mode */
  --iuasr-weight-medium:  500;
  --iuasr-weight-semi:    600;
  --iuasr-weight-bold:    700;

  /* ---- Radii ---- */
  --iuasr-radius-sm:   4px;             /* kleine elementen (badges, alerts) */
  --iuasr-radius-md:   8px;             /* kaarten */
  --iuasr-radius-lg:   12px;
  --iuasr-radius-full: 9999px;

  /* ---- Shadows — getint met indigo, zoals de site ---- */
  --iuasr-shadow-sm: rgba(32, 21, 71, 0.08) 0px 2px 8px 0px;
  --iuasr-shadow-md: rgba(32, 21, 71, 0.15) 0px 4px 20px 0px;
  --iuasr-shadow-lg: rgba(32, 21, 71, 0.22) 0px 16px 48px -8px;
  --iuasr-shadow-card-hover: 0 12px 28px rgba(32, 21, 71, 0.08);

  /* ---- Focus ---- */
  --iuasr-focus-ring:     0 0 0 3px rgba(200, 16, 46, 0.30);    /* crimson glow */
  --iuasr-focus-ring-alt: 0 0 0 3px rgba(32, 21, 71, 0.25);     /* indigo glow */

  /* ---- Motion ---- */
  --iuasr-duration-fast:   120ms;
  --iuasr-duration-normal: 200ms;
  --iuasr-ease-standard:   cubic-bezier(0.2, 0, 0, 1);

  /* ---- Breakpoints (ter referentie; @media-waarden zijn letterlijk) ---- */
  --iuasr-bp-lg: 1100px;
  --iuasr-bp-md: 1024px;
  --iuasr-bp-sm: 640px;

  /* ============================================================
     SEMANTISCHE KLEUREN (success/warning/error/info)
     Bewust naast de huisstijl, niet eruit.
     ============================================================ */
  --iuasr-success-bg:  #E7F5EE;
  --iuasr-success-fg:  #156A42;
  --iuasr-warning-bg:  #FDF4E3;
  --iuasr-warning-fg:  #8D5905;
  --iuasr-error-bg:    #FBE9EB;
  --iuasr-error-fg:    #9A0C24;
  --iuasr-info-bg:     var(--secColor301);
  --iuasr-info-fg:     var(--priColor100);
}

/* ============================================================
   GEBRUIKSAANTEKENINGEN
   ------------------------------------------------------------
   1. De homepage gebruikt wit (#FFFFFF) als basisvlak met
      afwisselende #F2F1F4-secties (--iuasr-bg-alt). Donkere
      secties (donate, footer) zijn indigo (--iuasr-bg-dark).

   2. Marketing/display-tekst is licht (200–300); UI en
      formulieren 400. Wissel met --iuasr-weight-body*.

   3. Knoppen: één radius site-breed (--iuasr-btn-radius = 2px).
      GEEN per-pagina override. Crimson primair, peach op donker.

   4. Kaartschaduw is GETINT met indigo, geen neutraal grijs.

   5. Links zijn crimson (#C8102E), tekst is indigo (#201547).
      Respecteer deze omkering t.o.v. veel sites.
   ============================================================ */