/* ==========================================================================
   Shared brand tokens — consumed by marketing.css (public site) and
   app.css (signed-in dashboard).

   Every colour derives from --base-h/s/l, which color.php emits from the
   admin's configured brand colours. Change the base colour in the admin and
   both surfaces re-tune together. Nothing here is brand-specific.
   ========================================================================== */

:root {
    /* color.php emits --base-h/s/l; --base composes them. Defined here rather
       than in style.css so pages that drop the legacy stylesheet still resolve
       every brand colour. */
    --base: var(--base-h) var(--base-s) var(--base-l);

    /* Primary — the admin's base colour, used as-is */
    --mk-primary: var(--base);
    --mk-primary-hover: var(--base-h) var(--base-s) calc(var(--base-l) + (100% - var(--base-l)) * 0.12);
    --mk-link-hover: var(--base-h) calc(var(--base-s) * 0.85) calc(var(--base-l) + (100% - var(--base-l)) * 0.22);

    /* Accent — a bright, saturated sibling of the primary hue */
    --mk-accent: var(--base-h) 65% 51%;
    --mk-accent-hover: var(--base-h) 68% 60%;
    --mk-accent-ink: var(--base-h) 60% 8%;
    --mk-accent-tint: var(--base-h) 45% 93%;
    --mk-accent-tint-2: var(--base-h) 40% 97%;
    --mk-accent-on-dark: var(--base-h) 70% 78%;

    /* Ink — near-black carrying a trace of the brand hue */
    --mk-ink: var(--base-h) 20% 6%;
    --mk-ink-80: var(--base-h) 14% 16%;

    /* Paper — warm neutrals, deliberately brand-independent */
    /* Page background and the slightly darker surface used for category
       strips, input fills and hover states. Deliberately neutral — no hue, no
       saturation — so it reads as light grey on any setup rather than picking
       up a warm cast. The pair keeps a ~3 point lightness gap so alternating
       surfaces stay distinguishable. */
    --mk-surface: 0 0% 97.5%;
    --mk-surface-2: 0 0% 94.5%;
    --mk-white: 0 0% 100%;
    --mk-input-bg: 30 33% 99%;

    /* Text */
    --mk-body-text: var(--base-h) 6% 30%;
    --mk-label-text: var(--base-h) 8% 24%;
    --mk-muted: var(--base-h) 5% 44%;
    --mk-muted-2: var(--base-h) 4% 57%;

    /* Signal */
    --mk-success: var(--base-h) 77% 39%;
    --mk-star: 38 91% 55%;

    /* Lines */
    --mk-border: hsl(var(--mk-ink) / 0.1);
    --mk-border-soft: hsl(var(--mk-ink) / 0.08);
    --mk-border-input: hsl(var(--mk-ink) / 0.16);
    --mk-border-dark: hsl(0 0% 100% / 0.12);

    /* Type */
    --mk-display: "Space Grotesk", "Montserrat", sans-serif;
    --mk-body: "Plus Jakarta Sans", "Nunito Sans", system-ui, sans-serif;
    --mk-mono: ui-monospace, Menlo, Consolas, monospace;

    /* Elevation */
    --mk-shadow-cta: 0 6px 18px hsl(var(--mk-primary) / 0.22);
    --mk-shadow-float: 0 20px 50px -26px hsl(var(--mk-primary) / 0.5);
}

@keyframes mkPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==========================================================================
   Base reset

   Mirrors the reset at the top of style.css. Duplicated here because pages
   rebuilt on the mk- system no longer load style.css, and without this they
   fall back to the browser default of content-box. Identical rules, so this
   is a no-op on pages that still load the legacy stylesheet.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

button {
    border: 0;
    background-color: transparent;
}

select {
    cursor: pointer;
}