/*
 * Design tokens Holy Vajrasana
 * All values 1:1 from "Designsystem aus Homepage/Designsystem.dc.html"
 * (vault 59_Holyvajrasana_Tempel, version 21.09.2026, 543 lines,
 * including section 12 "Reconciliation").
 * Do not change freely: changes belong in the design system first.
 */

:root {
  /* --- Palette (section 03) --- */
  --hv-tempelrot:     #861815; /* Header left, red bands */
  --hv-header-dunkel: #6A120F; /* Header right, end of the gradient */
  --hv-footerrot:     #6D1816; /* Footer */
  --hv-signalrot:     #BD0B06; /* Links and underline of the link buttons */
  --hv-gold:          #F3B440; /* Gold edge, exactly twice per page */
  --hv-goldlicht:     #F6D78D; /* active navigation entry */
  --hv-sandlinie:     #DFC192; /* Separators, 2px, never all around */
  --hv-creme:         #FAF3E5; /* Band */
  --hv-sand:          #F3ECDA; /* Band, warm */
  --hv-anthrazit:     #444444; /* Running text and all headings */
  --hv-buehne:        #2F2F2E; /* Background behind the 1400px canvas */
  --hv-flaeche:       #FFFFFF; /* The page canvas itself is white */

  --hv-auf-rot:        rgba(250, 243, 229, 0.8); /* Footer links, cream instead of white (FAF3E5 at 80%) */
  --hv-trenner-auf-rot: rgba(255, 255, 255, 0.3); /* Nav separator 40x1 */

  /* --- Type (section 02) --- */
  --hv-serif: "PT Serif", Georgia, "Times New Roman", serif;
  /* CJK addition for the Chinese page tree */
  --hv-serif-cjk: "PT Serif", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC",
                  "Microsoft YaHei", Georgia, serif;

  --hv-fs-hero:   48px; /* homepage only */
  --hv-fs-h1:     40px; /* page title */
  --hv-fs-h2:     36px; /* page title on mobile */
  --hv-fs-h3:     28px; /* teaser title */
  --hv-fs-h4:     24px; /* footer title on mobile */
  --hv-fs-h5:     20px; /* footer title on desktop, mobile menu (bold) */
  --hv-fs-h6:     16px; /* breadcrumb */
  --hv-fs-body:   16px; /* running text */
  --hv-fs-link:   16px; /* text link and link button, 18 on mobile */
  --hv-fs-nav:    13px; /* main navigation, capitals.
                          The design system says 14, set to 13 on request. */
  --hv-fs-legende: 14px; /* image caption, identical everywhere */

  --hv-lh-tight: 1.3;
  --hv-lh-hero:  1.15;
  --hv-lh-text:  1.64;

  --hv-ls-display: -0.06em; /* hero, H1, H2, H3 */
  --hv-ls-eyebrow:  0.11em; /* eyebrow "Explore:" */

  /* --- Grid (section 01) --- */
  --hv-seite:      1400px; /* fixed canvas width, boxed */
  --hv-rand:         30px;
  --hv-spalten:        12;
  --hv-rinne:        24px;
  --hv-subnav:      317px; /* columns 1 to 3 */
  --hv-inhalt:      885px; /* columns 4 to 11 */
  --hv-inhalt-x:    371px;
  --hv-teaser-text: 658px;

  /* Vertical rhythm */
  --hv-gap-innen:    24px; /* within a unit */
  --hv-gap-block:    50px; /* between blocks */
  --hv-inhalt-oben:  20px; /* space below the header */

  /* Band heights */
  --hv-header-h:    171px;
  --hv-footer-h:    200px;
  --hv-footer-kopf:  10px; /* additional space above the footer content */
  --hv-footer-fuss:  50px; /* additional space below the footer content */
  --hv-goldkante:     2px; /* exactly twice: above the header, below the footer */

  /* --- Link buttons (section 04) --- */
  --hv-pfeil-b:      12px;
  --hv-pfeil-h:      13px;
  --hv-pfeil-gap:    10px;
  --hv-unterstrich:   2px;
  --hv-link-h:       31px;

  /* --- Components --- */
  /* No fixed row height any more: multi-line entries grow, the padding
     stays the same. */
  --hv-subnav-pad:     16px;
  --hv-subnav-pad-y:   20px;
  --hv-subnav-einzug:  20px; /* 2nd level */
  --hv-subnav-linie:    1px; /* separator at the bottom */
  --hv-subnav-luft:    60px; /* distance of the separators from the content column */
  --hv-breadcrumb-h:   36px;
  --hv-breadcrumb-gap:  4px; /* distance to the title */
  --hv-teaser-bild:   205px;
  --hv-teaser-rinne:   22px;
  --hv-linie:           2px; /* sand rule, never all around */

  /* --- Header (section 05) --- */
  --hv-logo-b:      364px;
  --hv-logo-h:       76px;
  --hv-logo-y:       20px;
  --hv-nav-h:        40px;
  --hv-nav-y:       111px;
  --hv-nav-gap:      12px;
  --hv-nav-trenner:  40px; /* 40 x 1px */
  --hv-header-verlauf: linear-gradient(90deg, var(--hv-tempelrot) 66.35%, var(--hv-header-dunkel) 100%);

  /* --- Stage --- */
  --hv-buehne-schatten: 0 0 80px rgba(0, 0, 0, 0.6);

  /* --- Ornaments (section 10) --- */
  --hv-wolke-w:   436px;
  --hv-wolke-h:   655px;
  --hv-wolke-x:  1047px;
  --hv-wolke-y:  -237px;

  /* No corner radius anywhere. */
  --hv-radius: 0;
}

/* --- Mobile (section 11) --- */
@media (max-width: 767px) {
  :root {
    --hv-rand:        20px;
    /* No fixed content width on mobile: the content fills the area and
       --hv-rand provides the side spacing through .hv-wrap. At 390px
       that gives 350 as before; at 500 or 700 the content would
       otherwise stand as a narrow column in the middle. */
    --hv-inhalt:      100%;
    --hv-subnav:     342px;
    --hv-header-h:    70px;
    --hv-footer-h:   403px;
    --hv-gap-block:   24px;
    --hv-fs-link:     18px;
    --hv-logo-b:     193px;
    --hv-logo-h:      40px;
    --hv-logo-y:      15px;
  }
}