/* ==========================================================================
   THEME: VITARENT — Vita Rent s.r.o.
   ==========================================================================
   Third client theme. Sale with a right of lifetime occupancy — the
   audience is seniors selling the house they will keep living in, so the
   personality is calm, trustworthy, unhurried. Light theme.

   Nothing here is provisional any more. The faces are the designer's,
   named in the Figma and self-hosted below since 2026-08-11; the
   borrowed pair they replaced (drga's Gelasio over ingrade's Inter) was
   the theme's last stand-in.

   The colours are FINAL as of 2026-08-11 — the designer's brand card
   (violet #433065, green #008760, yellow #FFDC1B, black #121212, white
   #FFFCFB) replaced the by-eye Figma reads of 2026-08-10. The brand hex
   is always the ACTING token (the violet is the primary itself, not an
   inspiration for a ramp that misses it); every derived value below was
   re-measured against the new anchors, figures at the tokens.

   Levers pulled (vs. neutral):
   - violet primary carries links and everything that acts; the CTA
     yellow lives in the `--btn-*` slots, because a yellow that is right
     as a button fill is unreadable as a link ink — the exact split the
     slots were built for
   - green secondary for marks and numbers
   - warm paper surfaces, near-black warm inverse
   - soft radii, pill buttons — friendly, nothing sharp
   - larger base text (seniors read this page)
   ========================================================================== */

/* Faces are part of the theme, not the base — see drga.css for the full
   argument, which applies here word for word: self-hosted so every OS
   draws the same letter, and because a Google-served font is a request
   to a third party on every page load.

   **Source Serif 4 and Work Sans, the designer's pair** (Figma, named
   2026-08-11). Both SIL Open Font License 1.1, so shipping the files is
   allowed outright — the licence question is the one that decides
   whether a named face can be honoured at all, and here it was free.

   The Figma says "Source Serif Pro". Adobe renamed that family at
   version 3 and Google Fonts serves the successor as **Source Serif 4**;
   same design, same foundry, and variable where Pro is three static
   weights. One variable file per subset covers 400–700, which is the
   shape every other theme here already uses — Pro would have meant three
   files per subset for the same range.

   latin-ext carries the Czech diacritics; the vietnamese, greek and
   cyrillic subsets Google offers are dropped, being bytes no template
   asks for. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/work-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 1. COLOR — violet, with the CTA yellow living in the button slots.
     The ramp is regenerated around the brand violet sitting at 700 —
     #433065 is darker than a comfortable 600, and nudging the brand to
     fit the ladder would be the wrong direction of respect. So the
     ladder bends: 700 is the card's hex verbatim and --color-primary
     points there. On the brand white it measures 11.12. */
  --color-primary-50:  #f6f4fb;
  --color-primary-100: #ebe6f5;
  --color-primary-200: #d4c9e8;
  --color-primary-300: #b6a4d6;
  --color-primary-400: #947ac2;
  --color-primary-500: #7352ad;
  --color-primary-600: #594087;
  --color-primary-700: #433065;   /* brand */
  --color-primary-800: #32234d;
  --color-primary-900: #231937;

  --color-primary: var(--color-primary-700);

  /* Green is the second brand colour — the marks, the numbers, the
     timeline icons. #008760 is the card's hex and it is a MARK green:
     4.44 on the brand white, a hair under the 4.5 text bar and past the
     3:1 graphics bar — so it draws and counts, and the strong variant
     reads: #006b4c measures 6.41 on the surface, 5.75 on the alt. */
  --color-secondary: #008760;
  --color-secondary-strong: #006b4c;

  /* The CTA yellow — the brand's THIRD colour, stated as a colour token
     and not only as a button fill. It stayed invisible to the derived
     palette (and so to the admin) while it lived solely in the `--btn-*`
     slots: design_tokens.mjs ramps `--color-*`, and "accent" was a copy
     of the green. Declared here, the tool builds it a ramp of its own —
     no `-strong` on purpose, because nothing anywhere READS in yellow;
     the readable stop falls to the generated 800, and asking the yellow
     itself to be an ink is how a 1.85:1 happens.

     The buttons then POINT at it. Still not in the primary ramp, for the
     original reason: as a fill under near-black ink it is the brand's
     loudest gesture, as a link ink on white it would be invisible. */
  --color-accent: #ffdc1b;
  /* The card's #FFDC1B — brighter than the by-eye lemon it replaces,
     which only helps: the ink clears 12.13 on it. */
  --btn-surface: var(--color-accent);
  --btn-ink: #241f10;
  /* Hover: the surface holds still and a darker-yellow ring appears.
     Darkening read as the light going out and lightening washed the
     button out (both tried, both Dissi's calls, 2026-08-10) — the ring
     answers the pointer without touching the colour the eye is on. */
  --btn-hover-surface: var(--btn-surface);
  --btn-hover-ink: var(--btn-ink);
  /* The Figma's bevel: a darker seam along the button's foot, drawn as
     an inset shadow so it never changes the geometry. A black overlay
     rather than a fixed amber, so the same value darkens whatever the
     surface is. 4px, on the grid (§6 counts shadow offsets); the hover
     restates it plus the ring, or motion.css's fallbacks would swap
     both for the default lift shadows. */
  --shadow-button: inset 0 -4px 0 rgb(0 0 0 / 0.16);
  --shadow-button-hover: inset 0 -4px 0 rgb(0 0 0 / 0.16),
    0 0 0 2px #d4b512;   /* the same darker-step of the NEW yellow */
  /* And the same button on the brand slab: the core inversion exists for
     themes whose button IS the brand colour; this one's is yellow, which
     the violet band cannot swallow — so the button keeps itself. */
  --btn-brand-surface: var(--btn-surface);
  --btn-brand-ink: var(--btn-ink);
  --btn-brand-hover-surface: var(--btn-hover-surface);
  --btn-brand-hover-ink: var(--btn-hover-ink);

  /* The testimonial is a solid brand object here — the client's Figma
     draws the reviews as green cards, and the green that can carry white
     text is the strong one: white on #006b4c measures 6.41:1, on the
     mark green #008760 only 4.53 — passing, but with no room for the
     softened inks below it. Every ink on the card moves with the
     surface; the 78% role ink still measures 4.56 on the 6.41 base. */
  --testimonial-surface: var(--color-secondary-strong);
  --testimonial-ink: #ffffff;
  --testimonial-role-ink: rgb(255 255 255 / 0.78);
  --testimonial-avatar-surface: #ffffff;
  --testimonial-avatar-ink: var(--color-secondary-strong);
  --testimonial-more-ink: #ffffff;
  --testimonial-more-hover-ink: rgb(255 255 255 / 0.82);

  /* The eyebrow is a FILLED tint chip — the third voice of the same
     component: drga wears the outlined chip with the dot, ingrade a bare
     tracked-out word, so this one drops the border and the dot and takes
     the ramp's light tint instead (Dissi, 2026-08-10: not the same as
     drga). 800 is the ramp's ink for the 100 chip, per the token
     contract; on brand/inverse slabs core's own override still wins. */
  --eyebrow-border-width: 0;
  --eyebrow-surface: var(--color-primary-100);
  --eyebrow-dot: none;
  --eyebrow-ink: var(--color-primary-800);
  --eyebrow-tracking: 0.08em;
  /* The same chip on a brand or inverse slab — core's override strips
     the default chip to a currentColor outline there, and with this
     theme's border already off that left a bare word (found on the CTA
     band). The light tint reads on the violet exactly as it does on the
     page: 100 under 800 is the ramp's own pairing. */
  --eyebrow-brand-surface: var(--color-primary-100);
  --eyebrow-brand-ink: var(--color-primary-800);

  /* The paging arrows: centred on a phone, at the row's end from tablet
     up (both Dissi, 2026-08-10). Mobile-first like every token — on a
     narrow screen the arrows are the only control on their row and the
     centre line is the page's axis; on desktop the Figma parks them
     right, leaving the centre to the join-them CTA. The desktop value
     lands via the media block after this rule — still token values on
     :root, which is all a theme file may contain. */
  --carousel-nav-align: center;

  /* The footer tile carries the logo's own mark (a fixed-colour
     artwork: black house, yellow leaf), so the tile goes brand-white
     under it — the mark cannot adapt to a violet tile, the tile adapts
     to the mark. Shadow keeps it off the inverse footer. */
  --footer-mark-surface: var(--color-surface);

  /* The fullscreen menu reads on the centre line (Dissi, 2026-08-10) —
     the page's section headers already moved there, and a menu flush
     left over centred content read as a different site. */
  --nav-open-align: center;
  --nav-open-text-align: center;

  /* On the desktop bar the links ride right, against the CTA (Dissi,
     2026-08-10) — the reading the token was written for: centred links
     are a menu, right-aligned links are an approach to the button.

     The right value is the air before the button, and it is measured
     rather than guessed: two labels sit 28px apart (12px of link
     padding either side of the 4px list gap), while the last label had
     only its own 12px before the button — visibly stuck to it. 16px
     puts the button the same 28px from the last word as the words are
     from each other. */
  --header-nav-margin: auto var(--space-4);

  /* The FAQ is a stack of panels, not a ruled list — the Figma draws
     each question as its own card (Dissi, 2026-08-10). The slots exist
     since ingrade asked the same; the panels here are the page surface
     on the block's alt slab, edged with the standard border. */
  --accordion-gap: var(--space-3);
  --accordion-rule: transparent;
  --accordion-panel-border: var(--color-border);
  --accordion-panel-width: var(--border-width);
  --accordion-radius: var(--radius-lg);
  --accordion-surface: var(--color-surface);
  --accordion-inset: var(--space-6);

  /* The card's white and black, verbatim: the paper is #FFFCFB (a pink
     cast, not the old beige), the inverse is the neutral #121212 the
     logo is drawn in, and the text is the same #121212 — 18.35 on the
     surface, 16.44 on the alt. The alt keeps the paper's warmth one
     step deeper; muted still measures 5.77 / 5.17 on the pair. */
  --color-surface:         #fffcfb;
  --color-surface-alt:     #f6efe8;
  --color-surface-inverse: #121212;

  --color-text:            #121212;
  --color-text-muted:      #6a6172;
  --color-text-on-primary: #ffffff;
  --color-text-on-inverse: #fffcfb;

  --color-border: #e3dcd2;

  /* Feedback states — success IS the brand green family now, so a sent
     form answers in the site's own voice: white on #0e8055 measures
     4.96, on the strong 8.36. */
  --color-success:        #0e8055;
  --color-success-soft:   #e6f4ee;
  --color-success-strong: #075940;
  --color-success-on:     #ffffff;

  --color-warning:        #9c6710;
  --color-warning-soft:   #f9efdb;
  --color-warning-strong: #6f4a08;
  --color-warning-on:     #ffffff;

  --color-error:          #b23d2e;
  --color-error-soft:     #f8e8e5;
  --color-error-strong:   #78271d;
  --color-error-on:       #ffffff;

  --color-info:           #4a6a8c;
  --color-info-soft:      #e9eff5;
  --color-info-strong:    #2e455e;
  --color-info-on:        #ffffff;

  /* 2. TYPOGRAPHY — bookish serif over a plain, legible sans, and the
     designer's own pair rather than a guess at it.
     The serif is the trust gesture: this page asks people to make the
     biggest financial decision of their retirement, and it should read
     like a well-set book, not like an app. Base text runs a step larger
     than the other themes — the audience is the reason.

     Georgia stays behind the serif as the fallback, for the reason drga
     records: a failed woff2 should degrade to the nearest thing rather
     than to something alien, and Georgia is the platform serif every
     machine has. */
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body:    "Work Sans", system-ui, sans-serif;
  /* The sub-claim drops to the body size (Dissi, 2026-08-11: the leads
     read too big everywhere). This theme's base is already 17px against
     the other themes' 16, so `--text-lg` on top of it was a second
     enlargement of the same text — two steps up from where the reader
     started rather than one. At the body size the sentence still opens
     the section without competing with the heading, and it stays the
     largest lead in the repo. Only `.lead` moves: `--text-lg` still
     sets the testimonial quote, the process title and the dialog. */
  --lead-size: var(--text-base);
  --font-button:  var(--font-body);

  --font-weight-heading: 700;
  --font-weight-body:    400;
  --font-weight-bold:    600;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
  --text-xl:   clamp(1.3125rem, 1.15rem + 0.8vw, 1.5625rem);
  --text-2xl:  clamp(1.5625rem, 1.3rem + 1.4vw, 2.0625rem);
  --text-3xl:  clamp(1.9375rem, 1.45rem + 2.4vw, 2.8125rem);
  --text-4xl:  clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
  --text-5xl:  clamp(2.75rem, 1.75rem + 4.4vw, 4.75rem);

  --leading-tight:   1.25;
  --leading-normal:  1.65;
  --leading-display: 1.08;      /* the serif needs the same air drga gives it */

  --tracking-tight:   -0.01em;
  --tracking-display: -0.015em;

  /* 3. SHAPE — soft, and the buttons are pills */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;
  --radius-panel: 28px;
  /* No --radius-button: buttons share --radius-md with the inputs they
     sit beside (Dissi, 2026-08-10 — pills looked like a second kit next
     to the hero's address field). */

  --border-width: 1px;

  /* 4. SPACE & DENSITY — airy, unhurried */
  --space-unit:    0.25rem;
  --section-space: clamp(4rem, 2rem + 6vw, 8.5rem);
  --container-max: 75rem;

  /* 5. SHADOWS — violet-tinted, felt not seen; the tint is the new
     ramp's 900 (#231937). */
  --shadow-sm: 0 1px 2px rgb(35 25 55 / 0.06);
  --shadow-md: 0 2px 4px rgb(35 25 55 / 0.05), 0 8px 24px rgb(35 25 55 / 0.07);
  --shadow-lg: 0 4px 12px rgb(35 25 55 / 0.05), 0 24px 56px rgb(35 25 55 / 0.11);

  /* 6. MOTION — calm; the reveals take their time */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --motion-easing:  var(--ease-out-expo);

  --motion-duration:      220ms;
  --motion-duration-slow: 450ms;

  --reveal-duration:       850ms;
  --reveal-duration-slow: 1050ms;
  --reveal-distance:        24px;
  --reveal-stagger:        100ms;
  --reveal-stagger-group:  100ms;
  --reveal-stagger-line:   130ms;
}

/* The desktop half of --carousel-nav-align — see the token above. */
@media (min-width: 56rem) {
  :root {
    --carousel-nav-align: flex-end;
  }
}