/* Smart Apothiki: primary buttons (.btn-brand), cyan gradient with a glossy finish.
 *
 * Use
 *   Pages that extend base_app.html:  class="btn btn-brand"   (.btn gives the size)
 *   Stand-alone pages:                 class="btn-brand" next to their own Tailwind
 *                                      size utilities, with this file linked in <head>.
 *   Same look on <button> and <a>. Disabled: the disabled attribute, or
 *   aria-disabled="true" on a link.
 *
 * This file only paints. It never sets display, padding, border, width, height
 * or font size, so a button keeps the same box in every state.
 *
 * Colours: logo cyan along the top edge (#10d4fd, #05bbf6) turning into a deep
 * logo blue (#1b66f2 -> #1f45d0) by 27% of the height, under a white sheen that
 * is gone by 29%. Glyphs start at about a third of the height, so every part of
 * a label sits on the blue: measured behind the glyph pixels of a 14px and a
 * 12px label, white is at least 5.1:1 (4.8:1 while hovered), WCAG AA for text.
 * Keep the sheen and the cyan above 30% if you change the stops.
 *
 * The selectors start with :root on purpose. The Tailwind Play CDN appends its
 * <style> at the end of <head>, after this file, so without the extra weight
 * its .btn:focus ring, .btn:disabled and the background reset on
 * [type=submit] would override these rules.
 */

/* Registered so that hover and press fade the gradient itself. Browsers
   without @property switch instantly; the var() fallbacks keep the colours. */
@property --sa-cta-1 { syntax: "<color>"; inherits: false; initial-value: #10d4fd; }
@property --sa-cta-2 { syntax: "<color>"; inherits: false; initial-value: #05bbf6; }
@property --sa-cta-3 { syntax: "<color>"; inherits: false; initial-value: #1b66f2; }
@property --sa-cta-4 { syntax: "<color>"; inherits: false; initial-value: #1f45d0; }
@property --sa-cta-sheen { syntax: "<number>"; inherits: false; initial-value: 1; }

:root .btn-brand,
:root .btn-brand:focus {
    color: #fff;
    text-shadow: 0 1px 1px rgba(2, 36, 110, 0.38);
    background-color: var(--sa-cta-3, #1b66f2);
    background-image:
        /* sheen over the top edge, above the label */
        linear-gradient(180deg,
            rgba(255, 255, 255, calc(0.38 * var(--sa-cta-sheen, 1))) 0%,
            rgba(255, 255, 255, calc(0.22 * var(--sa-cta-sheen, 1))) 16%,
            rgba(255, 255, 255, calc(0.10 * var(--sa-cta-sheen, 1))) 25%,
            rgba(255, 255, 255, 0) 29%),
        /* body: logo cyan into logo blue */
        linear-gradient(180deg,
            var(--sa-cta-1, #10d4fd) 0%,
            var(--sa-cta-2, #05bbf6) 10%,
            var(--sa-cta-3, #1b66f2) 27%,
            var(--sa-cta-4, #1f45d0) 100%);
    /* Same five layers in every state so the shadows can animate. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),   /* top highlight */
        inset 0 -1px 0 rgba(4, 44, 140, 0.35),     /* darker bottom edge */
        inset 0 0 0 0 rgba(3, 30, 100, 0),         /* pressed shade (off) */
        0 1px 2px rgba(7, 27, 102, 0.16),          /* contact shadow */
        0 4px 14px -4px rgba(5, 170, 246, 0.6);    /* cyan glow */
    transition:
        --sa-cta-1 150ms ease, --sa-cta-2 150ms ease, --sa-cta-3 150ms ease,
        --sa-cta-4 150ms ease, --sa-cta-sheen 150ms ease,
        box-shadow 150ms ease, color 150ms ease, opacity 150ms ease,
        translate 150ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: a little brighter with a wider glow. Only where a real hover exists,
   so a tap on a phone does not leave the button lit. */
@media (hover: hover) {
    :root .btn-brand:hover:where(:not(:disabled, [aria-disabled="true"])) {
        --sa-cta-1: #1fdafe;
        --sa-cta-2: #0fc3f8;
        --sa-cta-3: #1f6af4;
        --sa-cta-4: #2550dc;
        --sa-cta-sheen: 1.15;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            inset 0 -1px 0 rgba(4, 44, 140, 0.35),
            inset 0 0 0 0 rgba(3, 30, 100, 0),
            0 2px 4px rgba(7, 27, 102, 0.16),
            0 8px 20px -6px rgba(5, 187, 246, 0.7);
    }
}

/* Lift by 1px with a mouse or trackpad. "translate" composes with any
   transform the button already has; the press below uses "transform", like
   the .btn press in motion.css, so the two never add up. */
@media (hover: hover) and (pointer: fine) {
    :root .btn-brand:hover:where(:not(:disabled, [aria-disabled="true"])) {
        translate: 0 -1px;
    }
}

/* Pressed: less sheen, a slightly deeper colour, an inner shadow, no lift. */
:root .btn-brand:active:where(:not(:disabled, [aria-disabled="true"])) {
    --sa-cta-1: #0cc6f7;
    --sa-cta-2: #04aef0;
    --sa-cta-3: #175de6;
    --sa-cta-4: #1c3fc4;
    --sa-cta-sheen: 0.4;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(4, 44, 140, 0.2),
        inset 0 2px 5px rgba(3, 30, 100, 0.32),
        0 1px 1px rgba(7, 27, 102, 0.18),
        0 2px 6px -3px rgba(5, 170, 246, 0.4);
    translate: none;
    transform: scale(0.97);
    transition-duration: 60ms;
}

/* Keyboard focus only: a clear cyan ring (3.3:1 against white). */
:root .btn-brand:focus-visible {
    outline: 2px solid #0596dc;
    outline-offset: 2px;
}

/* Disabled: grey-blue, no glow, no movement. */
:root .btn-brand:disabled,
:root .btn-brand[aria-disabled="true"] {
    --sa-cta-1: #c9d9e4;
    --sa-cta-2: #b6c9d8;
    --sa-cta-3: #9fb4c8;
    --sa-cta-4: #8fa4bb;
    --sa-cta-sheen: 0.6;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 1px rgba(30, 41, 59, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(30, 41, 59, 0.12),
        inset 0 0 0 0 rgba(3, 30, 100, 0),
        0 0 0 0 rgba(7, 27, 102, 0),
        0 0 0 0 rgba(5, 170, 246, 0);
    cursor: not-allowed;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    :root .btn-brand,
    :root .btn-brand:focus { transition: none !important; }
    :root .btn-brand:hover,
    :root .btn-brand:active { translate: none !important; transform: none !important; }
}