/* =====================================================================
   GENERATED by common/design/build_tokens.py — do not edit by hand.

   yak-foundations.css — the measurements every Yak product shares.

   Deliberately contains NO colour. Colour is per-product and lives in the
   generated yak-tokens-<product>.css; everything here is the same for the
   whole fleet, which is why it can be one file copied byte-identically into
   each stack's docroot rather than something each product re-invents (the
   spacing scale below started life as YakTimer's private --yt-space-*).
   ===================================================================== */

:root {
    /* Space. 4/8/12/16/24/32 — the ramp YakTimer arrived at independently. */
    --yak-space-1: 4px;
    --yak-space-2: 8px;
    --yak-space-3: 12px;
    --yak-space-4: 16px;
    --yak-space-5: 24px;
    --yak-space-6: 32px;

    /* Shape. Matches the daisyUI radius tokens the Phoenix apps already use,
       so a card is the same card on all three stacks. */
    --radius-selector: 0.25rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;
    --yak-border-width: 1.5px;

    --yak-maxw: 1120px;
    --yak-nav-h: 4rem;
    --yak-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --yak-duration: 220ms;
}

/* Type. Pinned to the browser default so text honours the user's setting and
   survives 200% zoom (SC 1.4.4), with a fluid heading ramp instead of
   per-breakpoint jumps. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { font-size: 1rem; line-height: 1.6; }

h1 { font-size: clamp(2rem, 4vw, 2.85rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.32rem); }
h5 { font-size: 1.12rem; }
h6 { font-size: 1rem; }

/* One visible focus ring for the fleet. Previously present in yak_desk and
   yak_mail only, which meant keyboard users got a different experience per
   product. :focus-visible so it does not fire on mouse clicks. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-field);
}

/* Motion is opt-in per element and always yields to the OS setting. */
@media (prefers-reduced-motion: no-preference) {
    .yak-rise { animation: yak-rise var(--yak-duration) var(--yak-ease) both; }
    @keyframes yak-rise {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}