:root {

    /* Typography */
    --bulma-family-primary: 'Manrope', sans-serif;
    --bulma-family-secondary: 'Manrope', sans-serif;

    /* Background */
    --bulma-body-background-color: white;

    /* Summer Ocean Breeze 
    https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557 */

    /* Bulma Colors */
    --bulma-primary-h: 208deg;
    --bulma-primary-s: 53%;
    --bulma-primary-l: 32%;

    --bulma-link-h: 208deg;
    --bulma-link-s: 53%;
    --bulma-link-l: 32%;

    --bulma-info-h: 208deg;
    --bulma-info-s: 53%;
    --bulma-info-l: 32%;

    /* Rarity colors */
    --is-normal: #e7eaf6;
    --is-special: #e0ffcd;
    --is-rare: #f76b8a;
    --is-epic: #fdffab;
    --is-legendary: #8f71ff;
    
    --is-normal-darker: #c8cfea;
    --is-special-darker: #a1ff66;
    --is-rare-lighter: #fdced8;
    --is-epic-lighter: #ffffcc;

    /* Shadows */
    --my-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.05) 0px 10px 20px -5px, rgba(0, 0, 0, 0.1) 0px 20px 50px -20px;

    /* Color variables for dropdown arrow and other elements */
    --color-primary-h: 208deg;
    --color-primary-s: 53%;
    --color-primary-l: 32%;

    /* Dropdown arrow */
    --bulma-navbar-dropdown-arrow: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

    /* Bulma Link */
    --bulma-link: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

    /* Bulma Navbar */
    --bulma-navbar-h: var(--color-primary-h);
    --bulma-navbar-s: var(--color-primary-s);
    --bulma-navbar-l: var(--color-primary-l);

    /* AlertifyJS */
    --color-alertify-success: #b3ec56;
    --color-alertify-error: #E4004B;
}

.radius { border-radius: 8px; }
.shadow { box-shadow: var(--my-shadow); }

/* Menú principal */
.navbar {
	--bulma-navbar-item-selected-h: 182deg;
	--bulma-navbar-item-selected-s: 43%;
	--bulma-navbar-item-selected-l: 76%;
}

.notification.is-success { background-color: #e6fff9; }

.navbar-item { font-weight: 900; }

/* Botones */
.button.is-primary { color: white; }

/* Fondo de opción seleccionada en el navbar */
.navbar.is-transparent .navbar-dropdown a.navbar-item.is-active, .navbar.is-transparent .navbar-dropdown a.navbar-item.is-selected { background-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); }

/* AlertifyJS */
.alertify-notifier { text-align: center!important; }
.alertify-notifier .ajs-message.ajs-success { border-radius: 8px; color: #1b4b33; background-color: var(--color-alertify-success)!important; }
.alertify-notifier .ajs-message.ajs-error { border-radius: 8px; color: white; background-color: var(--color-alertify-error)!important; }

/* Centrado vertical para tablas */
.content .table.is-vcentered td,
.content .table.is-vcentered th {
    vertical-align: middle !important;
}

/* Corrección de breadcrumbs */
.content li + li { margin-top: 0; }

/* Tabs */
.tabs ul { margin-inline-start: 0; }

/* Cards de rareza de los cromos */
.card.is-normal { border: 3px solid var(--is-normal); }
.card.is-special { border: 3px solid var(--is-special); }
.card.is-rare { border: 3px solid var(--is-rare); }
.card.is-epic { border: 3px solid var(--is-epic); }
.card.is-legendary { border: 3px solid var(--is-legendary); }

/* Tags de rareza de los cromos */
.tag.is-normal { background-color: var(--is-normal); }
.tag.is-special { background-color: var(--is-special); }
.tag.is-rare { background-color: var(--is-rare); color: white; }
.tag.is-epic { background-color: var(--is-epic); }
.tag.is-legendary { background-color: var(--is-legendary); color: white; }

/* Tags de rareza en el modal de intercambio */
.dupe-tag.is-normal { border: 1px solid var(--is-normal-darker); background-color: var(--is-normal); }
.dupe-tag.is-special { border: 1px solid var(--is-special-darker); background-color: var(--is-special); }
.dupe-tag.is-rare { border: 1px solid var(--is-rare); background-color: var(--is-rare-lighter); }
.dupe-tag.is-epic { border: 1px solid var(--is-epic); background-color: var(--is-epic-lighter); }
.dupe-tag.is-legendary { border: 1px solid var(--is-legendary); background-color: var(--is-legendary); }