/*
    JollySimple. The one stylesheet for the JollySimple surfaces: the marketing pages at /start,
    the shop owner's admin, and the internal dashboard.

    It is deliberately NOT loaded by a shop's own front end. Those are white labelled: the
    colours there come from the shop's own Settings row through Theme.StyleBlock, and a
    Basket3 violet leaking into somebody's storefront would be a bug, not a style.

    Everything is a token. If a colour appears as a hex value anywhere below the token
    block, that is a mistake worth fixing rather than copying.

    Loaded after UIkit and before any page specific sheet.
*/

/* ============================================================================
   Tokens
   ============================================================================ */

:root {
    /* ── The three ways to sell ───────────────────────────────────────────────
       One hue each, and the same three stripes as the basket in the mark. Green leads,
       because a price on it is what most sellers do with most of their stock; amber and
       plum are the other two ways. The old scheme led on a strong blue violet, which read
       as cold and technical next to what these shops actually sell.

       Two amber values on purpose: the bright one is for fills, strokes and icons, and
       the ink one is for amber as text, where the bright one is unreadable on white. */
    --b3-green: #167a63;
    --b3-green-dark: #0f5f4e;
    --b3-green-tint: #e7f3ee;
    --b3-green-pale: #c5e7dc;

    --b3-amber: #f2a03a;
    --b3-amber-dark: #cd8217;
    --b3-amber-ink: #b06b14;
    --b3-amber-tint: #fdf0de;

    --b3-plum: #95517f;
    --b3-plum-dark: #763b66;
    --b3-plum-tint: #f5e8f1;
    --b3-plum-pale: #ebcde0;

    /* ── What the interface is made of ────────────────────────────────────────
       Say primary, not green. Everything that is simply "the colour of a button" points
       here, so the whole system moves by editing this line rather than two hundred. */
    --b3-primary: var(--b3-green);
    --b3-primary-dark: var(--b3-green-dark);
    --b3-primary-tint: var(--b3-green-tint);

    /* Lit and shadowed versions of the primary, for the glossy gradients. */
    --b3-primary-lit: #16977b;
    --b3-primary-shadow: rgba(15, 120, 98, .30);

    /* ── Ink and paper ───────────────────────────────────────────────────────
       Warm rather than blue grey: brown black type on an off white paper, which is where
       the owl's brown and beige come from. Cool greys are what made the old screens feel
       like software rather than a shop. */
    --b3-ink: #2e2620;
    --b3-ink-light: #453a2f;
    --b3-text: #4f463d;
    --b3-muted: #7d7064;
    --b3-faint: #a89c8d;
    --b3-page: #faf7f2;
    --b3-surface: #ffffff;
    --b3-surface-alt: #fdfbf7;
    --b3-border: #ece3d8;
    --b3-border-strong: #ddd2c4;

    /* status */
    --b3-good: #14855c;
    --b3-warn: var(--b3-amber-ink);
    --b3-bad: #bf3b3b;

    /* shape */
    --b3-radius: 12px;
    --b3-radius-sm: 8px;
    --b3-radius-pill: 999px;

    --b3-shadow-sm: 0 1px 2px rgba(46, 38, 32, .05);
    --b3-shadow: 0 1px 2px rgba(46, 38, 32, .05), 0 8px 24px rgba(46, 38, 32, .07);
    --b3-shadow-lg: 0 2px 4px rgba(46, 38, 32, .06), 0 18px 48px rgba(46, 38, 32, .12);

    /* type */
    --b3-font: 'Plus Jakarta Sans', Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ── Names kept alive ────────────────────────────────────────────────────
       The violet and teal names are what the stylesheets said before the palette moved.
       Pointing them at the new tokens means a usage anywhere still resolves to a sensible
       colour rather than to nothing. Nothing new should use them. */
    --b3-violet: var(--b3-primary);
    --b3-violet-dark: var(--b3-primary-dark);
    --b3-violet-tint: var(--b3-primary-tint);
    --b3-teal: var(--b3-green);
    --b3-teal-tint: var(--b3-green-tint);
}

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

body {
    font-family: var(--b3-font);
    color: var(--b3-text);
    background-color: var(--b3-page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
    font-family: var(--b3-font);
    color: var(--b3-ink);
    font-weight: 800;
    letter-spacing: -.02em;
}

a {
    color: var(--b3-primary);
    text-decoration: none;
}

    a:hover {
        color: var(--b3-primary-dark);
        text-decoration: none;
    }

hr, .uk-hr {
    border-top: 1px solid var(--b3-border);
}

.uk-text-meta,
.uk-text-muted {
    color: var(--b3-muted);
}

/* The three ways to sell, wherever they are named. One class each so a colour is never
   typed twice and the marketing page, the admin and the mark cannot disagree. */
.b3-fixed { color: var(--b3-green); }
.b3-auction { color: var(--b3-plum); }
.b3-offer { color: var(--b3-amber-ink); }

.b3-fixed-bg { background-color: var(--b3-green-tint); }
.b3-auction-bg { background-color: var(--b3-plum-tint); }
.b3-offer-bg { background-color: var(--b3-amber-tint); }

/* ============================================================================
   Buttons
   ============================================================================ */

.uk-button {
    font-family: var(--b3-font);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--b3-radius-sm);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.uk-button-primary,
.uk-background-primary {
    background-color: var(--b3-primary);
    background-image: none;
    color: #fff;
}

    .uk-button-primary:hover,
    .uk-button-primary:focus {
        background-color: var(--b3-primary-dark);
        color: #fff;
    }

.uk-button-secondary {
    background-color: var(--b3-ink);
    background-image: none;
    color: #fff;
}

    .uk-button-secondary:hover,
    .uk-button-secondary:focus {
        background-color: var(--b3-ink-light);
        color: #fff;
    }

.uk-button-default {
    background-color: var(--b3-surface);
    border: 1px solid var(--b3-border);
    color: var(--b3-ink);
}

    .uk-button-default:hover,
    .uk-button-default:focus {
        background-color: var(--b3-surface);
        border-color: var(--b3-primary);
        color: var(--b3-primary);
    }

.uk-button-danger {
    background-color: var(--b3-bad);
    color: #fff;
}

.uk-button-large {
    padding: 0 32px;
    line-height: 52px;
    font-size: 1rem;
}

/* ============================================================================
   Cards, tables, forms, tabs
   ============================================================================ */

.uk-card,
.uk-card-default {
    background: var(--b3-surface);
    border: 1px solid var(--b3-border);
    border-radius: var(--b3-radius);
    box-shadow: var(--b3-shadow-sm);
    color: var(--b3-text);
}

.uk-card-hover:hover {
    box-shadow: var(--b3-shadow);
    border-color: var(--b3-border-strong);
}

.uk-card-header,
.uk-card-footer {
    border-color: var(--b3-border);
}

.uk-card-title {
    color: var(--b3-ink);
    font-weight: 800;
}

.uk-table th {
    color: var(--b3-ink);
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    font-weight: 700;
}

.uk-table td,
.uk-table th {
    border-color: var(--b3-border);
}

.uk-table-striped tbody tr:nth-of-type(odd) {
    background: var(--b3-surface-alt);
    border-top-color: var(--b3-border);
    border-bottom-color: var(--b3-border);
}

.uk-table-hover tbody tr:hover {
    background: var(--b3-primary-tint);
}

.uk-input, .uk-select, .uk-textarea {
    border-radius: var(--b3-radius-sm);
    border-color: var(--b3-border);
    color: var(--b3-ink);
}

    .uk-input:focus, .uk-select:focus, .uk-textarea:focus {
        border-color: var(--b3-primary);
        outline: none;
    }

.uk-form-label {
    color: var(--b3-muted);
    font-weight: 600;
}

input::placeholder,
textarea::placeholder {
    color: var(--b3-faint);
    opacity: 1;
}

.uk-tab > li > a {
    text-transform: none;
    letter-spacing: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--b3-muted);
    border-bottom-width: 3px;
}

.uk-tab > li > a:hover {
    color: var(--b3-ink);
}

.uk-tab > .uk-active > a {
    color: var(--b3-ink);
    border-color: var(--b3-primary);
}

.uk-badge {
    background-color: var(--b3-primary);
}

.uk-label {
    background-color: var(--b3-primary);
    text-transform: none;
    border-radius: var(--b3-radius-sm);
}

.uk-label-success { background-color: var(--b3-good); }
.uk-label-warning { background-color: var(--b3-warn); }
.uk-label-danger { background-color: var(--b3-bad); }

/* ============================================================================
   The last of UIkit's own blue

   UIkit paints anything it calls primary in #1e87f0. The pieces used most often are
   already overridden above; these are the rest of them, in one place, so a stray blue
   never turns up on a screen nobody thought to look at.
   ============================================================================ */

.uk-link,
a.uk-link-toggle:hover .uk-link-heading,
.uk-text-primary,
.uk-icon-link:hover,
.uk-accordion-title:hover {
    color: var(--b3-primary);
}

.uk-radio:focus,
.uk-checkbox:focus,
.uk-search-default .uk-search-input:focus {
    border-color: var(--b3-primary);
}

.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
    background-color: var(--b3-primary);
    border-color: transparent;
}

    .uk-radio:checked:focus,
    .uk-checkbox:checked:focus,
    .uk-checkbox:indeterminate:focus {
        background-color: var(--b3-primary-dark);
    }

.uk-list-primary > ::before {
    color: var(--b3-primary);
}

.uk-progress::-webkit-progress-value { background-color: var(--b3-primary); }
.uk-progress::-moz-progress-bar { background-color: var(--b3-primary); }

.uk-section-primary,
.uk-tile-primary,
.uk-card-primary,
.uk-card-badge,
.uk-subnav-pill > .uk-active > a {
    background-color: var(--b3-primary);
}

.uk-card-primary.uk-card-hover:hover {
    background-color: var(--b3-primary-dark);
}

/* The one gradient UIkit ships: blue into indigo. Ours is the two colours either side of
   the middle stripe, which is the only gradient in the brand. */
.uk-text-background {
    background-color: var(--b3-primary);
    background-image: linear-gradient(90deg, var(--b3-primary) 0%, var(--b3-plum) 100%);
}

.uk-alert-primary {
    background: var(--b3-primary-tint);
    color: var(--b3-ink);
    border-radius: var(--b3-radius-sm);
}

.uk-alert-success {
    background: var(--b3-green-tint);
    color: var(--b3-green-dark);
    border-radius: var(--b3-radius-sm);
}

.uk-alert-warning {
    background: var(--b3-amber-tint);
    color: var(--b3-amber-ink);
    border-radius: var(--b3-radius-sm);
}

.uk-alert-danger {
    background: #f7e7e3;
    color: #8f2f24;
    border-radius: var(--b3-radius-sm);
}

/* ============================================================================
   Shared pieces
   ============================================================================ */

/* A small caps label above a section heading. Used by every /start section. */
.section-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    font-weight: 800;
    color: var(--b3-primary);
}

/* The tinted circle behind a feature icon. Pair with a b3-*-bg for the colour. */
.b3-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--b3-radius-pill);
}

.b3-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--b3-radius-sm);
    background: var(--b3-primary-tint);
}

/* ============================================================================
   Names kept alive from the previous look

   Twenty odd views still say btn-primary, green-text, or style="color:var(--green-dark)"
   inline. Pointing the old names at the new tokens keeps every one of them correct, and
   costs a dozen lines; going through the views instead would be a lot of churn for the
   same result and one missed attribute would leave an element unstyled.

   Nothing new should use these. When a view is next edited for another reason, swap its
   old name for the token and delete the alias here once the last one has gone.
   ============================================================================ */

:root {
    --green: var(--b3-primary);
    --green-dark: var(--b3-ink);
    --green-light: var(--b3-green);
    --amber: var(--b3-amber-ink);
    --amber-light: var(--b3-amber);
    --cream: var(--b3-page);
    --cream-dark: var(--b3-border);
    --text: var(--b3-text);
}

.amber-text { color: var(--b3-amber-ink); }
.green-text { color: var(--b3-primary); }
.cream-background { background-color: var(--b3-page); }

.btn-primary { background-color: var(--b3-primary); color: #fff; }
    .btn-primary:hover, .btn-primary:focus { background-color: var(--b3-primary-dark); color: #fff; }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--b3-border);
    color: var(--b3-ink);
}

    .btn-ghost:hover, .btn-ghost:focus {
        border-color: var(--b3-primary);
        color: var(--b3-primary);
    }

.btn-outline-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
}

    .btn-outline-white:hover, .btn-outline-white:focus {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

.btn-danger { background-color: var(--b3-bad); color: #fff; }

/* The marketing navigation used to size its logo with this. */
.shrinklogo {
    height: 42px;
    width: auto;
    transition: height .3s ease-in-out;
}

.uk-navbar-sticky .shrinklogo {
    height: 34px;
}

/* A logo in a navigation bar. One rule rather than a height on every img tag. */
.b3-logo {
    height: 42px;
    width: auto;
    transition: height .3s ease-in-out;
}

.uk-navbar-sticky .b3-logo {
    height: 34px;
}

.b3-logo-small {
    height: 30px;
    width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PETAL GLASS
   ═══════════════════════════════════════════════════════════════════════════

   The back office and the marketing site, lightened. Everything below is layered
   over the palette above rather than replacing it, so reverting is deleting this
   block rather than unpicking a hundred rules.

   Three things make the look:

     the wash    three soft radial fields, lilac, powder blue and mint, on an off
                 white paper. It is fixed, so scrolling moves the content over a
                 still background rather than dragging the colour along with it.

     the glass   panels are white at about two thirds, with the wash blurred behind
                 them and a near white hairline on the edge. That hairline is what
                 sells it: without it the panels read as flat translucent boxes.

     the hue     petal, a soft violet, is now what the interface is made of. Green
                 stays exactly where it was semantically, for things that are good:
                 paid, sent, in stock, answering. Amber still means attention.

   To go back to green as the interface colour, delete the four --b3-primary lines
   in the block below and nothing else.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --b3-petal: #8a63ad;
    --b3-petal-dark: #6b4b86;
    --b3-petal-lit: #9c76bd;
    --b3-petal-tint: #f3ecf9;
    --b3-petal-pale: #d9c8ea;

    /* The interface hue. These four lines are the whole of the change. */
    --b3-primary: var(--b3-petal);
    --b3-primary-dark: var(--b3-petal-dark);
    --b3-primary-tint: var(--b3-petal-tint);
    --b3-primary-lit: var(--b3-petal-lit);
    --b3-primary-shadow: rgba(107, 75, 134, .28);

    /* Paper and glass */
    --b3-page: #fbf8fb;
    --b3-wash:
        radial-gradient(760px 520px at 12% 0%, #efe3f8 0%, rgba(239, 227, 248, 0) 60%),
        radial-gradient(760px 520px at 88% 8%, #dfe6fa 0%, rgba(223, 230, 250, 0) 60%),
        radial-gradient(680px 620px at 50% 100%, #e2f3e6 0%, rgba(226, 243, 230, 0) 62%);

    --b3-glass: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5));
    --b3-glass-strong: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .68));
    --b3-glass-edge: rgba(255, 255, 255, .95);
    --b3-glass-blur: blur(20px);
    --b3-glass-shadow: 0 14px 38px rgba(76, 54, 92, .09);

    --b3-ink: #3b2f47;
    --b3-text: #4e4557;
    --b3-muted: #7d7286;
    --b3-faint: #a79dae;
    --b3-border: #ece5f1;
    --b3-border-strong: #ddd2e6;

    --b3-radius: 18px;
    --b3-radius-sm: 12px;

    --b3-shadow-sm: 0 2px 6px rgba(76, 54, 92, .05);
    --b3-shadow: 0 14px 38px rgba(76, 54, 92, .09);
}

body {
    background-color: var(--b3-page);
    background-image: var(--b3-wash);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Panels. The blur is the expensive part, so it is here on cards and on the shell
   and nowhere else: a table of four hundred rows does not need frosting. */
.uk-card,
.uk-card-default {
    background: var(--b3-glass);
    backdrop-filter: var(--b3-glass-blur);
    -webkit-backdrop-filter: var(--b3-glass-blur);
    border: 1px solid var(--b3-glass-edge);
    box-shadow: var(--b3-glass-shadow);
}

.uk-card-hover:hover {
    background: var(--b3-glass-strong);
    box-shadow: 0 18px 44px rgba(76, 54, 92, .13);
}

.uk-card-header,
.uk-card-footer {
    border-color: rgba(107, 75, 134, .09);
}

/* A card that holds a long table reads better solid. Glass behind five hundred
   rows of small type is a headache rather than a look. */
.uk-card.b3-solid,
.b3-solid > .uk-card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: none;
}

.uk-button-primary {
    background-image: linear-gradient(120deg, var(--b3-petal-lit), var(--b3-petal-dark));
    border: 0;
    box-shadow: 0 8px 22px var(--b3-primary-shadow);
}

    .uk-button-primary:hover,
    .uk-button-primary:focus {
        background-image: linear-gradient(120deg, var(--b3-petal), var(--b3-petal-dark));
    }

/* The wordmark set in type rather than as an image: it then matches the page, takes
   the colour it is given, and needs no second file for light and dark panels. */
.b3-wordmark {
    font-family: var(--b3-font);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
    color: var(--b3-petal-dark);
    text-decoration: none;
    display: inline-block;
}

    .b3-wordmark span {
        color: var(--b3-amber);
    }

    .b3-wordmark:hover {
        text-decoration: none;
        color: var(--b3-petal);
    }

/* The wordmark on a dark panel: white word, amber numeral. */
.b3-wordmark-light {
    color: #fff;
}

    .b3-wordmark-light:hover {
        color: #fff;
    }