/* ==========================================================================
   Eigen Haard — design tokens
   --------------------------------------------------------------------------
   Source of truth: official Eigen Haard stylesheet PDF dated 2015-10-17
   (file: "20151017 - Stylesheet Eigen Haard.pdf"). The brand book is the
   authoritative reference for fonts, type scale, colors, and buttons.

   Cross-checked against four live computed-style snapshots taken 2026-05-04:
    - eigenhaard.nl/                        (public homepage)
    - eigenhaard.nl/te-huur/sociale-huur/   (public listings)
    - mijn.eigenhaard.nl/.../informatie/    (portal info)
    - mijn.eigenhaard.nl/account/postcode/… (portal workflow form)

   Where the live implementation has DRIFTED from the brand book, the brand
   book wins and the deviation is flagged in comments below.

   Known deviations (live → brand book):
    1. Body text color: live #655F5F → brand #525252 (Neutral/700)
    2. Primary CTA color: live red CTAs → brand AccentGreen (#8CC971)
        Red is for HEADINGS, not buttons. The red "input" on live sites is
        a search button, not the canonical primary action.
    3. Portal links: live #0000EE (browser default) → brand #33B6EE
    4. Various greys observed live (#767676, #808080, #B8B8B8, etc.) are
        not in the brand scale — Neutral/x tokens are the canonical greys.
   ========================================================================== */

:root {
  /* ==========================================================================
    PRIMITIVE TOKENS — directly from the brand book
    ========================================================================== */

  /* -------- Tokens/Red (brand book scale) -------- */
  --eh-red-50:  #FFF1F2;
  --eh-red-100: #FFCACD;
  --eh-red-200: #FF9EA7;
  --eh-red-300: #FF6B7F;
  --eh-red-400: #EE3B60;
  --eh-red-500: #D00447;     /* PrimaryRed — the brand red */
  --eh-red-600: #AF003A;
  --eh-red-700: #830029;
  --eh-red-800: #590019;
  --eh-red-900: #35000C;

  /* -------- Tokens/Blue (brand book scale) -------- */
  --eh-blue-50:  #E9F8FF;
  --eh-blue-100: #CFF0FF;
  --eh-blue-200: #B5E8FF;
  --eh-blue-300: #98DFFF;
  --eh-blue-400: #6FCBF2;
  --eh-blue-500: #33B6EE;    /* PrimaryBlue — the brand blue */
  --eh-blue-600: #16A7D7;
  --eh-blue-700: #007498;
  --eh-blue-800: #004359;
  --eh-blue-900: #001C27;

  /* -------- Tokens/Neutral (brand book scale) -------- */
  --eh-neutral-0:    #FFFFFF;  /* White */
  --eh-neutral-100:  #F2F2F2;
  --eh-neutral-200:  #E0E0E0;
  --eh-neutral-300:  #C6C6C6;
  --eh-neutral-400:  #A8A8A8;
  --eh-neutral-500:  #8D8D8D;
  --eh-neutral-600:  #6F6F6F;
  --eh-neutral-700:  #525252;  /* default body text */
  --eh-neutral-800:  #393939;
  --eh-neutral-900:  #262626;
  --eh-neutral-950:  #161616;
  --eh-neutral-1000: #000000;  /* Black */

  /* -------- Accent colors (brand book) -------- */
  --eh-accent-green:  #8CC971;
  --eh-accent-yellow: #F9C13C;
  --eh-accent-orange: #EA801F;
  --eh-accent-purple: #BD6DB3;

  /* ==========================================================================
    SEMANTIC TOKENS — meaning-driven aliases for use in components
    ========================================================================== */

  /* -------- Brand -------- */
  --eh-brand-red:  var(--eh-red-500);    /* page titles, h2 on functional pages */
  --eh-brand-blue: var(--eh-blue-500);   /* links, section subheadings */

  /* -------- Action / button colors -------- */
  /* Per the brand book, GREEN is the primary action. Blue is secondary. */
  --eh-action-primary:        var(--eh-accent-green);
  --eh-action-primary-hover:  #5C9646;                 /* darker green — observed in PDF, hex inferred */
  --eh-action-primary-focus:  #B8DFA5;                 /* lighter green — observed in PDF, hex inferred */

  --eh-action-secondary:        var(--eh-blue-500);
  --eh-action-secondary-hover:  var(--eh-blue-700);    /* dark navy hover, per PDF */
  --eh-action-secondary-focus:  var(--eh-blue-300);

  --eh-action-outline:          var(--eh-blue-500);    /* outlined blue link-button */
  --eh-action-outline-hover:    var(--eh-blue-700);

  --eh-action-disabled-bg:      var(--eh-neutral-400);
  --eh-action-disabled-fg:      var(--eh-neutral-0);

  /* -------- Text -------- */
  --eh-text:         var(--eh-neutral-700);   /* body text — official #525252 */
  --eh-text-strong:  var(--eh-neutral-1000);
  --eh-text-inverse: var(--eh-neutral-0);
  --eh-text-muted:   var(--eh-neutral-500);
  --eh-text-subtle:  var(--eh-neutral-400);

  /* -------- Surfaces -------- */
  --eh-surface:        var(--eh-neutral-0);
  --eh-surface-alt:    var(--eh-neutral-100);
  --eh-surface-muted:  var(--eh-neutral-100);
  --eh-surface-dark:   var(--eh-neutral-900);
  --eh-surface-tint-blue: var(--eh-blue-50);

  /* -------- Borders -------- */
  --eh-border:        var(--eh-neutral-300);
  --eh-border-soft:   var(--eh-neutral-200);
  --eh-border-strong: var(--eh-neutral-400);

  /* -------- Links -------- */
  --eh-link:       var(--eh-brand-blue);
  --eh-link-hover: var(--eh-blue-700);

  /* -------- Status -------- */
  --eh-success: var(--eh-accent-green);
  --eh-warning: var(--eh-accent-yellow);
  --eh-error:   var(--eh-brand-red);
  --eh-info:    var(--eh-brand-blue);

  /* -------- Focus -------- */
  --eh-focus-ring: var(--eh-blue-500);
  --eh-focus-ring-shadow: 0 0 0 3px rgba(51, 182, 238, 0.45);

  /* -------- Overlays -------- */
  --eh-overlay:      rgba(0, 0, 0, 0.5);
  --eh-overlay-soft: rgba(0, 0, 0, 0.1);

  /* ==========================================================================
    TYPOGRAPHY
    --------------------------------------------------------------------------
      Headings: TriplexSansOT (CustomFonts). Body/UI: Aptos (AptosFonts).
      Faces are loaded via portal-fonts.css (LWC) and theme custom CSS.
    ========================================================================== */
  --eh-font-body:    'Aptos', Arial, Helvetica, sans-serif;
  --eh-font-heading: 'TriplexSansOT', Arial, Helvetica, sans-serif;

  /* Type scale — every named style from the brand book */
  --eh-fs-h1:                60px;   /* Triplex Bold — heading scale unchanged */
  --eh-fs-h2:                36px;
  --eh-fs-h2-smaller:        30px;
  --eh-fs-h3:                24px;
  --eh-fs-h4:                20px;
  --eh-fs-intro:             22px;   /* Aptos Bold */
  --eh-fs-paragraph:         20px;   /* Aptos Regular */
  --eh-fs-paragraph-small:   18px;   /* Aptos Regular */
  --eh-fs-link-big:          22px;
  --eh-fs-link-idle:         20px;
  --eh-fs-link-breadcrumb:   18px;
  --eh-fs-label:             18px;   /* Aptos Regular (inputs) */
  --eh-fs-label-bold:        18px;   /* Aptos Bold (labels, buttons) */

  /* Generic-purpose aliases for utility use */
  --eh-fs-xs:    12px;
  --eh-fs-sm:    14px;
  --eh-fs-base:  var(--eh-fs-paragraph-small);  /* 18px */
  --eh-fs-body:  var(--eh-fs-paragraph);        /* 20px */
  --eh-fs-body-sm: var(--eh-fs-paragraph-small);
  --eh-fs-lg:    var(--eh-fs-h3);
  --eh-fs-xl:    var(--eh-fs-h2-smaller);
  --eh-fs-2xl:   var(--eh-fs-h2);
  --eh-fs-3xl:   var(--eh-fs-h1);

  /* Line heights */
  --eh-lh-h3:                calc(26 / 24);
  --eh-lh-intro:             calc(32 / 22);
  --eh-lh-paragraph:         1.5;
  --eh-lh-paragraph-small:   1.5;
  --eh-lh-link-big:          calc(26 / 22);
  --eh-lh-link-idle:         1.5;

  --eh-lh-body:    var(--eh-lh-paragraph);
  --eh-lh-heading: 1.1;
  --eh-lh-tight:   1.0;

  /* Weights */
  --eh-fw-light:   300;
  --eh-fw-regular: 400;
  --eh-fw-body:    400;
  --eh-fw-medium:  500;
  --eh-fw-bold:    700;

  /* ==========================================================================
    SPATIAL — borders, radii, shadows, motion
    ========================================================================== */
  --eh-radius-sm:    3px;
  --eh-radius-md:    4px;     /* dominant on public site */
  --eh-radius-portal: 5px;    /* dominant on mijn portal */
  --eh-radius-lg:    15px;
  --eh-radius-xl:    27.5px;
  --eh-radius-pill:  9999px;
  --eh-radius-circle: 50%;

  --eh-border-width: 1px;

  --eh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --eh-shadow-md: 0 0 25px 2px rgba(0, 0, 0, 0.10);
  --eh-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  --eh-transition-fast: 0.15s ease-out;
  --eh-transition:      0.3s ease-out;
  --eh-transition-slow: 0.5s ease-out;

  /* Spacing — inferred (no formal scale in brand book) */
  --eh-space-xs:  4px;
  --eh-space-sm:  8px;
  --eh-space-md:  12px;
  --eh-space-lg:  18px;
  --eh-space-xl:  24px;
  --eh-space-2xl: 30px;
  --eh-space-3xl: 48px;

  /* Home dashboard summary cards (rekeningen, contracten, post) — tallest reference widget */
  --eh-home-widget-min-height: 348px;
}

/* Reference: --tolkie-* variables come from the embedded text-to-speech
    widget, NOT from EH's design system. The brand book includes a "LEES VOOR"
    button which is the visible affordance for that widget — styled as an
    outlined blue button.

    Tolkie color values for reference only (do not use as brand tokens):
      --tolkie-primary-color:        #222F4B
      --tolkie-client-primary-color: #D00447  (matches --eh-brand-red)
      --tolkie-font-family:          'Atkinson Hyperlegible Next', sans-serif
*/