/* Dembo Loops branding.
 *
 * Mirrors dembo-social/public/css/dembo-brand.css so the wordmark reads the
 * same across the super-app: Pinyon Script cursive with the feather rotated
 * -45deg to its right. Kept as a separate stylesheet rather than edits to
 * Loops' own CSS so upstream merges from joinloops/loops-server stay clean.
 *
 * Naming, per the product structure:
 *   Dembo Social  the super-app you log into
 *   Dembo Pix     the photo side (Pixelfed)
 *   Dembo Loops   this, the short-form video side
 */

@font-face {
    font-display: swap;
    font-family: "Pinyon Script";
    src: url("/fonts/PinyonScript-Regular.ttf") format("truetype");
}

.dembo-loops-brand {
    align-items: center;
    color: #1c1917;
    display: inline-flex;
    gap: 0.45rem;
    max-width: 100%;
}

.dembo-loops-wordmark {
    font-family: "Pinyon Script", "Brush Script MT", cursive;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.dembo-loops-feather {
    flex: 0 0 auto;
    height: 1.65rem;
    transform: rotate(-45deg);
    width: 1.65rem;
}

/* Loops ships dark-first; keep the wordmark legible on its dark chrome. */
@media (prefers-color-scheme: dark) {
    .dembo-loops-brand {
        color: #f5f5f4;
    }
}

:root[data-theme="dark"] .dembo-loops-brand,
.dark .dembo-loops-brand {
    color: #f5f5f4;
}

/* The SSO button says "Dembo Social" (the super-app), so it needs the Dembo
   Social lockup classes here as well as the Dembo Loops ones above. */
.dembo-social-wordmark {
    font-family: "Pinyon Script", "Brush Script MT", cursive;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
}

.dembo-social-feather {
    flex: 0 0 auto;
    transform: rotate(-45deg);
}