/* Kunopilot brand primitives.
 *
 * Deliberately plain CSS rather than Tailwind utilities. The wordmark is the
 * one thing on every page that must never render wrong, and the deploy does
 * not rebuild Tailwind -- a class that was never compiled renders as nothing,
 * which on a logo reads as a broken page. These rules ship in a file that is
 * only ever collected, never compiled.
 *
 * Values come from docs/brand/logo-kit-README.txt. Do not invent new ones:
 * the mark is monochrome by design and the wordmark has exactly one weight,
 * one tracking and two colours.
 */

:root {
    --brand-ink: #10161C;       /* the mark on light ground */
    --brand-knockout: #FFFFFF;  /* the mark on dark ground */
    --brand-muted: #9AA0A6;     /* "pilot" on light ground */
    --brand-muted-dark: #8A9199; /* "pilot" on dark ground */
}

/* mark + wordmark, side by side. Used for every clickable logo. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

/* The mark inherits `color`, so it is recoloured by whatever it sits in --
   which is what the kit means by "one color at a time, any color". */
.brand-mark {
    display: block;
    flex: none;
    width: auto;
    color: currentColor;
}

/* Space Grotesk SemiBold, lowercase, -0.035em. The fallbacks matter: if the
   webfont fails the wordmark must still be a wordmark, not a serif surprise. */
.brand-wordmark {
    font-family: 'Space Grotesk', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.035em;
    text-transform: lowercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--brand-knockout);
}

/* "pilot" is the second half of one word, never an afterthought: lighter
   weight, muted colour, never a different size and never dropped.
 *
 * Weight and colour only -- no tracking of its own. The kit sets one
 * letter-spacing for the whole wordmark and its lockup SVG applies a single
 * value across both halves, so an override here would space "pilot" wider than
 * "kuno" and break the illusion that this is one word. (".app" did carry an
 * override, because a leading period needs the room. "pilot" does not.) */
.brand-wordmark .brand-tail {
    font-weight: 400;
    color: var(--brand-muted-dark);
}

/* On a light ground -- the docs site, printed pages, anything on white. */
.brand-wordmark--ink {
    color: var(--brand-ink);
}

.brand-wordmark--ink .brand-tail {
    color: var(--brand-muted);
}

/* The one size scale. Anything else should be a good reason, not a habit.
 *
 * Pair the mark with the wordmark at roughly 1.5x the font size -- that is the
 * ratio the kit's own lockup uses (a 56px wordmark against the 88-unit mark).
 * sm 15px -> 22 | md 18px -> 28 | lg 24px -> 36 | xl 36px -> 52 */
.brand-wordmark--sm { font-size: 0.9375rem; }
.brand-wordmark--md { font-size: 1.125rem; }
.brand-wordmark--lg { font-size: 1.5rem; }
.brand-wordmark--xl { font-size: 2.25rem; }

/* Clear space: the kit asks for the stem width (22% of the mark) on all four
   sides, and forbids putting the mark inside a border. This is the padding
   that buys it when a lockup sits against an edge. */
.brand-lockup--padded {
    padding: 0.375rem 0.5rem;
}

/* The strapline under the lockup in the app chrome. Muted so the wordmark
   stays the loudest thing in the corner. */
.brand-strapline {
    font-size: 0.625rem;
    line-height: 1;
    color: #6B7280;
    white-space: nowrap;
}