/* =============================================================
   Serenade Holding AG — Design Tokens
   Extracted from Figma file oQhmhUU0axPdFzvhmTaKPg
   ============================================================= */

:root {
    /* --------- Colours --------- */
    --c-petrol:        #447073;
    --c-petrol-50:     rgba(68, 112, 115, 0.5);
    --c-wasser:        #32AEAB;
    --c-wiese:         #BED339;
    --c-schilf:        #FECB3C;
    --c-white:         #FFFFFF;

    --c-bg-light:      #F6FAFB;
    --c-bg-mid:        #DEEBEB;
    --c-bg-light-86:   rgba(246, 250, 251, 0.86);
    --c-bg-mid-86:     rgba(222, 235, 235, 0.86);

    /* hair-thin divider colour for use on petrol surfaces (Figma footer Line 7) */
    --c-divider-on-petrol: rgba(255, 255, 255, 0.35);

    /* per-variant accents used by teaser / menu pill / button */
    --c-accent-blau:   var(--c-wasser);
    --c-accent-gruen:  var(--c-wiese);
    --c-accent-gelb:   var(--c-schilf);
    --c-accent-petrol: var(--c-petrol);

    /* --------- Typography --------- */
    --ff-display:      "Akhand", sans-serif;
    --ff-text:         "IBM Plex Serif", Georgia, "Times New Roman", serif;

    --fw-regular:      400;
    --fw-bold:         700;

    --fs-h1:           64px;
    --fs-h2:           40px;
    --fs-h3:           24px;
    --fs-body:         20px;
    --fs-nav:          24px;
    --fs-small:        16px;
    --fs-xsmall:       14px;
    --fs-plus:         32px;

    --lh-display:      1;
    --lh-text:         1.7;

    /* --------- Spacing --------- */
    --s-0:             0;
    --s-1:             5px;
    --s-2:             10px;
    --s-3:             15px;
    --s-4:             20px;
    --s-5:             24px;
    --s-6:             30px;
    --s-7:             40px;
    --s-8:             50px;
    --s-9:             60px;
    --s-10:            80px;
    --s-11:            100px;
    --s-12:            154px;

    /* --------- Layout --------- */
    --layout-max:       1728px;
    --layout-gutter:    300px;
    --layout-inner:     1128px;
    --layout-half:      542px;
    --layout-third:     344px;
    --layout-field:     545px;
    --layout-fieldwide: 1129px;

    /* --------- Vertical rhythm (Figma-derived spacings) ---------
     * - --vr-hero    Hero bottom → first H1 in #inhalt
     *                (Figma home: 798→945=147, subpages: 565→709=144)
     * - --vr-tight   Heading-only block → next block, and <p>+<p>
     *                inside the same block (Figma: 22-33 px, avg ≈ 24)
     * - --vr-section Default block-to-block gap (text → module,
     *                module → module, etc.) (Figma: 45-90 px, ≈ 80)
     * - --vr-footer  Last content block → footer top. On desktop this is 0:
     *                the footer module carries its own 176 px transparent top
     *                (Figma node 23:330, band at inset 44 %) which already
     *                IS the gap to the petrol band, so content sits flush with
     *                the footer frame top exactly like Figma. Re-added for the
     *                stacked footer at <=1024 px, where the band starts at
     *                top:0 and needs a real gap (see template.css). */
    --vr-hero:          144px;
    --vr-tight:         24px;
    --vr-section:       80px;
    --vr-footer:        0px;

    /* --------- Border --------- */
    --bw-card:         3px;
    --bw-thin:         1px;
    --bw-marker:       2px;

    /* --------- Radius --------- */
    --rad-pill:        50px;
    --rad-card:        30px;
    --rad-hero:        145px;
    --rad-dot:         9999px;

    /* --------- Shadow --------- */
    --sh-card:         0 0 0 0 transparent;

    /* --------- Transitions --------- */
    --tr-fast:         150ms ease-out;
    --tr-base:         220ms ease-out;
    --tr-slow:         360ms ease-out;

    /* --------- Background gradients --------- */
    --bg-page:         linear-gradient(248deg, var(--c-bg-light) 30.969%, var(--c-bg-mid) 69.031%);
    /* Figma's rect 23:27 has a 13.15deg gradient on a 180deg-rotated element,
     * so the effective on-screen direction is 13.15 + 180 = 193.15deg. */
    --bg-top-bar:      linear-gradient(193.152deg, var(--c-bg-light-86) 24.288%, var(--c-bg-mid-86) 75.712%);

    /* --------- Navigation bar (Figma rect 23:27 + logo 1:3 + menu 23:261) --------- */
    --nav-h:         174px;   /* navbar height (desktop)             */
    --nav-h-md:      120px;   /* navbar height (tablet)              */
    --nav-h-sm:      80px;    /* navbar height (mobile)              */
    --nav-logo-x:    69px;    /* logo left offset                    */
    --nav-logo-y:    42px;    /* logo top offset                     */
    --nav-logo-w:    281px;   /* logo box width                      */
    --nav-logo-h:    80px;    /* logo box height                     */
    --nav-logo-w-md: 220px;
    --nav-logo-w-sm: 160px;
    --nav-menu-r:    86px;    /* menu right offset (1728-713-929=86) */
    --nav-menu-y:    58px;    /* menu top offset                     */

    /* --------- Breakpoints (literals must match below) --------- */
    --breakpoint-sm:   640px;
    --breakpoint-md:   768px;
    --breakpoint-lg:   1024px;
    --breakpoint-xl:   1280px;
    --breakpoint-2xl:  1536px;
}