/* ================================================================
   POPSBOOK THEME

   A five-step sunset palette, from light to dark:

     peach     #fcb76f
     coral     #e88666
     rose      #c05166
     plum      #8f3066
     eggplant  #541d61

   Plum is the main action color (buttons, active nav, focus).
   Eggplant anchors the header. Rose, coral and peach are accents.
   ================================================================ */

:root {

    /* ---------- Palette ---------- */

    --brand-peach: #fcb76f;
    --brand-coral: #e88666;
    --brand-rose: #c05166;
    --brand-plum: #8f3066;
    --brand-eggplant: #541d61;

    /* Pale tints for backgrounds, badges and hover states. */
    --brand-peach-soft: #fff4e8;
    --brand-coral-soft: #fdeee9;
    --brand-rose-soft: #f9eaed;
    --brand-plum-soft: #f6e9f1;
    --brand-eggplant-soft: #f2e8f4;

    /* Darker plum for hover/pressed text. */
    --brand-plum-deep: #6e2450;

    --brand-gradient: linear-gradient(
        90deg,
        var(--brand-eggplant) 0%,
        var(--brand-plum) 55%,
        var(--brand-rose) 100%
    );

    --brand-sunset: linear-gradient(
        90deg,
        var(--brand-plum),
        var(--brand-rose),
        var(--brand-coral),
        var(--brand-peach)
    );


    /* ---------- Surfaces ---------- */

    --brand-page: #fbf7f6;          /* app background, warm off-white */
    --brand-surface: #ffffff;       /* cards, sidebar, tables */
    --brand-surface-alt: #faf4f3;   /* nested panels */
    --brand-border: #eee3e3;
    --brand-text: #2f2430;
    --brand-text-muted: #85767f;

    --brand-shadow:
        0 1px 2px rgba(84, 29, 97, 0.05),
        0 4px 16px rgba(84, 29, 97, 0.06);

    --brand-focus-ring: 0 0 0 0.2em rgba(143, 48, 102, 0.18);


    /* ---------- Bulma: neutral greys pick up a warm hue ---------- */

    --bulma-scheme-h: 330;
    --bulma-scheme-s: 9%;
    --bulma-family-primary: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bulma-body-background-color: var(--brand-page);


    /*
     * Bulma 1.0 derives each color from h/s/l, but its text-on-color
     * and light/dark shades are baked in for the default colors, so
     * those are set here too.
     */

    /* ---------- Bulma: primary = plum ---------- */

    --bulma-primary-h: 326deg;
    --bulma-primary-s: 50%;
    --bulma-primary-l: 37%;
    --bulma-primary-rgb: 143, 48, 102;
    --bulma-primary-invert-l: 100%;
    --bulma-primary-light-l: 95%;
    --bulma-primary-light-invert-l: 32%;
    --bulma-primary-dark-l: 30%;
    --bulma-primary-dark-invert-l: 100%;
    --bulma-primary-on-scheme-l: 37%;


    /* ---------- Bulma: link = rose ---------- */

    --bulma-link-h: 349deg;
    --bulma-link-s: 47%;
    --bulma-link-l: 54%;
    --bulma-link-rgb: 192, 81, 102;
    --bulma-link-invert-l: 100%;
    --bulma-link-light-l: 95%;
    --bulma-link-light-invert-l: 38%;
    --bulma-link-dark-l: 40%;
    --bulma-link-dark-invert-l: 100%;
    --bulma-link-on-scheme-l: 44%;   /* a touch darker so link text reads well */


    /* ---------- Bulma: info = eggplant ---------- */

    --bulma-info-h: 288deg;
    --bulma-info-s: 54%;
    --bulma-info-l: 25%;
    --bulma-info-rgb: 84, 29, 97;
    --bulma-info-invert-l: 100%;
    --bulma-info-light-l: 95%;
    --bulma-info-light-invert-l: 25%;
    --bulma-info-dark-l: 20%;
    --bulma-info-dark-invert-l: 100%;
    --bulma-info-on-scheme-l: 25%;


    /* ---------- Bulma: warning = peach ---------- */

    --bulma-warning-h: 31deg;
    --bulma-warning-s: 96%;
    --bulma-warning-l: 71%;
    --bulma-warning-rgb: 252, 183, 111;
    --bulma-warning-invert-l: 18%;
    --bulma-warning-light-l: 95%;
    --bulma-warning-light-invert-l: 28%;
    --bulma-warning-dark-l: 32%;
    --bulma-warning-dark-invert-l: 100%;
    --bulma-warning-on-scheme-l: 32%;


    /* ---------- Bulma: danger = vermilion (kept clearly apart from rose) ---------- */

    --bulma-danger-h: 8deg;
    --bulma-danger-s: 70%;
    --bulma-danger-l: 47%;
    --bulma-danger-rgb: 204, 65, 36;
    --bulma-danger-invert-l: 100%;
    --bulma-danger-light-l: 95%;
    --bulma-danger-light-invert-l: 36%;
    --bulma-danger-dark-l: 36%;
    --bulma-danger-dark-invert-l: 100%;
    --bulma-danger-on-scheme-l: 42%;


    /* ---------- Bulma: success = muted sage (Bulma's mint is too loud) ---------- */

    --bulma-success-h: 150deg;
    --bulma-success-s: 32%;
    --bulma-success-l: 40%;
    --bulma-success-rgb: 69, 135, 102;
    --bulma-success-invert-l: 100%;
    --bulma-success-light-l: 94%;
    --bulma-success-light-invert-l: 26%;
    --bulma-success-dark-l: 28%;
    --bulma-success-dark-invert-l: 100%;
    --bulma-success-on-scheme-l: 32%;


    /* ---------- Bulma: focus ring follows primary ---------- */

    --bulma-focus-h: var(--bulma-primary-h);
    --bulma-focus-s: var(--bulma-primary-s);
    --bulma-focus-l: var(--bulma-primary-l);
}


/* ================================================================
   BASE
   ================================================================ */

html,
body {
    background-color: var(--brand-page);
    color: var(--brand-text);
}

.title {
    color: var(--brand-text);
}

.subtitle {
    color: var(--brand-text-muted);
}

.has-text-grey {
    color: var(--brand-text-muted) !important;
}


/* ================================================================
   TOP NAVBAR
   ================================================================ */

.navbar.is-brand {
    background: var(--brand-gradient);
    position: relative;
}

/* Thin sunset stripe along the bottom edge of the header. */
.navbar.is-brand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--brand-sunset);
}

/* The logo is wide (boots, book and wordmark); Bulma's default 1.75rem
   cap makes the wordmark too small to read. */
.navbar-item img.navbar-logo {
    max-height: 2.5rem;
    width: auto;
}

.navbar.is-brand .navbar-item,
.navbar.is-brand .navbar-link {
    color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
}

.navbar.is-brand .navbar-item:hover,
.navbar.is-brand .navbar-link:hover,
.navbar.is-brand .navbar-item.has-dropdown:hover .navbar-link {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar.is-brand .navbar-link:not(.is-arrowless)::after {
    border-color: rgba(255, 255, 255, 0.9);
}

.navbar.is-brand .navbar-dropdown .navbar-item {
    color: var(--brand-text);
}

.navbar.is-brand .navbar-dropdown .navbar-item:hover {
    color: var(--brand-plum);
    background-color: var(--brand-plum-soft);
}

.navbar.is-brand .navbar-burger {
    color: #ffffff;
}

.navbar.is-brand .button.is-light {
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.navbar.is-brand .button.is-light:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

.navbar.is-brand .button.is-primary {
    background-color: var(--brand-peach);
    color: var(--brand-eggplant);
}

.navbar.is-brand .button.is-primary:hover {
    background-color: #fdc78d;
}


/* ================================================================
   BUTTONS
   ================================================================ */

.button {
    font-weight: 600;
    border-radius: 8px;
}

.button.is-brand {
    background: var(--brand-gradient);
    color: #ffffff;
    border: none;
}

.button.is-brand:hover {
    filter: brightness(1.08);
    color: #ffffff;
}


/* ================================================================
   CARDS, BOXES, TABLES
   ================================================================ */

.box,
.card {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    box-shadow: var(--brand-shadow);
}

.table {
    background-color: var(--brand-surface);
    color: var(--brand-text);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--brand-shadow);
}

.table thead th {
    background-color: var(--brand-surface-alt);
    color: var(--brand-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--brand-border);
}

.table td,
.table th {
    border-color: var(--brand-border);
    vertical-align: middle;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: var(--brand-surface-alt);
}

.table.is-hoverable tbody tr:not(.is-selected):hover,
.table tbody tr:hover {
    background-color: var(--brand-plum-soft) !important;
}


/* ================================================================
   FORMS
   ================================================================ */

.input,
.textarea,
.select select {
    border-radius: 8px;
    border-color: var(--brand-border);
}

.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--brand-plum);
    box-shadow: var(--brand-focus-ring);
}

.label {
    color: var(--brand-text);
}


/* ================================================================
   NOTIFICATIONS AND TAGS
   ================================================================ */

.notification {
    border-radius: 10px;
}

/*
 * Colored notifications are always pastel: a pale tint of the color,
 * dark text in the same hue, and a thin solid edge on the left.
 */
.notification.is-primary,
.notification.is-primary.is-light {
    --bulma-notification-background-l: var(--bulma-primary-light-l);
    --bulma-notification-color-l: var(--bulma-primary-light-invert-l);
    border-left: 4px solid var(--bulma-primary);
}

.notification.is-link,
.notification.is-link.is-light {
    --bulma-notification-background-l: var(--bulma-link-light-l);
    --bulma-notification-color-l: var(--bulma-link-light-invert-l);
    border-left: 4px solid var(--bulma-link);
}

.notification.is-info,
.notification.is-info.is-light {
    --bulma-notification-background-l: var(--bulma-info-light-l);
    --bulma-notification-color-l: var(--bulma-info-light-invert-l);
    border-left: 4px solid var(--bulma-info);
}

.notification.is-success,
.notification.is-success.is-light {
    --bulma-notification-background-l: var(--bulma-success-light-l);
    --bulma-notification-color-l: var(--bulma-success-light-invert-l);
    border-left: 4px solid var(--bulma-success);
}

.notification.is-warning,
.notification.is-warning.is-light {
    --bulma-notification-background-l: var(--bulma-warning-light-l);
    --bulma-notification-color-l: var(--bulma-warning-light-invert-l);
    border-left: 4px solid var(--bulma-warning);
}

.notification.is-danger,
.notification.is-danger.is-light {
    --bulma-notification-background-l: var(--bulma-danger-light-l);
    --bulma-notification-color-l: var(--bulma-danger-light-invert-l);
    border-left: 4px solid var(--bulma-danger);
}

.tag:not(body).is-light {
    background-color: var(--brand-plum-soft);
    color: var(--brand-plum);
}


/* ================================================================
   HELPERS
   ================================================================ */

.has-background-brand {
    background: var(--brand-gradient);
}

.has-text-brand {
    color: var(--brand-plum);
}